简单粗暴的canvas图片压缩
比较适合刚拍的内存较大的照片,但存在一个问题,部分传到后台的图片会出现90deg的旋转
此问题只存在于IOS直接拍摄的照片中,任何添加滤镜和处理过的图片都不存在
将文件转为base64,绑定文件的change事件,获取到文件对象
var fileObjArr = e.target.files; var windowURL = window.URL || window.webkitURL; var dataURL = windowURL.createObjectURL(fileObjArr[0]);
//调用方法
dealImage(beforebase64,function(afterbase64) {
})
function dealImage(path, callback) { var img = new Image(); img.src = path; img.onload = function() { //默认按比例压缩 var w = this.width, h = this.height; var quality = 0.4; // 默认图片质量为0.7 //生成canvas var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); // 创建属性节点 canvas.setAttribute("width", w); canvas.setAttribute("height", h); ctx.drawImage(this, 0, 0, w, h); // ctx.rotate(90 * Math.PI / 180); // quality值越小,所绘制出的图像越模糊 var base64 = canvas.toDataURL('image/jpeg', quality); // 回调函数返回base64的值 callback(base64); }; };
相关推荐
northwindx 2020-05-31
xdyangxiaoromg 2020-03-27
pythonjw 2020-11-17
hedongli 2020-09-01
浪味仙 2020-08-17
IT兄弟团 2020-08-01
凉白开 2020-07-19
kjh00abc 2020-07-08
Skyline 2020-06-28
苦咖啡flask 2020-06-18
万物weiyi 2020-06-16
半纸药笺 2020-06-14
chenhaimeimeng 2020-06-13
JF0 2020-06-13
逍遥友 2020-06-02
kyelu 2020-06-02
tengyuan 2020-05-30
singer 2020-05-30
GreatZhou 2020-05-28