简单粗暴的canvas图片压缩

yixiaof 2019-06-26

比较适合刚拍的内存较大的照片,但存在一个问题,部分传到后台的图片会出现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);
    };
};

相关推荐