04-JS中图片压缩的一般方法

原文地址：https://zhuanlan.zhihu.com/p/31003294

// 图片压缩

// 1、urltoImage(url,fn) 会通过一个url加载所需要的图片对象，其中 url 参数传入图片的 url , fn 为回调方法,包含一个 Image 对象的参数，代码如下：

export function urltoImage(url,fn){
    var img = new Image();
    img.src = url;
    img.onload = function(){
        fn(img);
    }
}

// 2、 imagetoCanvas(image) 会将一个 Image 对象转变为一个 Canvas 类型对象，其中 image 参数传入一个Image对象，代码如下

export function imagetoCanvas(image){
    var cvs = document.createElement("canvas");
    var ctx = cvs.getContext('2d');
    cvs.width = image.width;
    cvs.height = image.height;
    ctx.drawImage(image, 0, 0, cvs.width, cvs.height);
    return cvs ;
};

// 3、 canvasResizetoFile(canvas,quality,fn) 会将一个 Canvas 对象压缩转变为一个 Blob 类型对象；其中 canvas 参数传入一个 Canvas 对象; quality 参数传入一个0-1的 number 类型，表示图片压缩质量; fn 为回调方法，包含一个 Blob 对象的参数;代码如下：

export function canvasResizetoFile(canvas,quality,fn){
    canvas.toBlob(function(blob) {
        fn(blob);
    },'image/jpeg',quality);
};

// 4、canvasResizetoDataURL(canvas,quality) 会将一个 Canvas 对象压缩转变为一个dataURL 字符串,其中 canvas 参数传入一个 Canvas 对象; quality 参数传入一个0-1的number类型，表示图片压缩质量;代码如下：

export function canvasResizetoDataURL(canvas,quality){
    return canvas.toDataURL('image/jpeg',quality);
};

// 5、 filetoDataURL(file,fn) 会将 File（Blob）类型文件转变为 dataURL 字符串,其中 file 参数传入一个 File （Blob）类型文件; fn 为回调方法，包含一个 dataURL 字符串的参数;代码如下：

export function filetoDataURL(file,fn){
    var reader = new FileReader();
    reader.onloadend = function(e){
        fn(e.target.result);
    };
    reader.readAsDataURL(file);
};

// 6、 dataURLtoImage(dataurl,fn) 会将一串 dataURL 字符串转变为 Image 类型文件,其中 dataurl 参数传入一个 dataURL 字符串, fn 为回调方法，包含一个 Image 类型文件的参数，代码如下：

export function dataURLtoImage(dataurl,fn){
    var img = new Image();
    img.onload = function() {
        fn(img);
    };
    img.src = dataurl;
};

// 7、 dataURLtoFile(dataurl) 会将一串 dataURL 字符串转变为 Blob 类型对象，其中 dataurl 参数传入一个 dataURL 字符串,代码如下：

export function dataURLtoFile(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
};

// 进一步封装   
//对于常用的将一个 File 对象压缩之后再变为 File 对象,我们可以将上面的方法再封装一下，参考如下代码：
export function fileResizetoFile(file,quality,fn){
    filetoDataURL (file,function(dataurl){
        dataURLtoImage(dataurl,function(image){
            canvasResizetoFile(imagetoCanvas(image),quality,fn);
        })
    })
}
// file 参数传入一个 File （Blob）类型文件； quality 参数传入一个 0-1 的 number 类型，表示图片压缩质量； fn 为回调方法，包含一个 Blob 类型文件的参数。
// 它使用起来就像下面这样：
// var file = document.getElementById('demo').files[0];
// fileResizetoFile(file,0.6,function(res){
//     console.log(res);
//     //拿到res，做出你要上传的操作；
// })