利用file和canvas实现图片压缩上传

作者: CondorHero | 来源:发表于2019-10-10 22:00 被阅读0次

利用file和canvas实现图片压缩上传
JS上传图片,利用canvas实现图片压缩
微信小程序上传图片压缩
图片上传压缩预览
Canvas 实现图片上传压缩
Canvas实现图片压缩上传
Vue上传图片压缩的问题
利用 canvas 实现图片压缩
vue 图片压缩
vue 图片压缩

利用的技术 HTML5 的 file API 和 canvas 的 drawImage API。

图片上传压缩的意义：

省流量
上传速度会比较快，降低上传失败的风险
一般电子设备拍摄的照片，文件会很大，头像上传时，会限制 5M 或者2M以内。所以用户不得不对图片进行再处理，而这种体验其实非常不好的。

一、canvas 的 drawImage() 方法。

API 请参考Canvas 使用指南和几个套路
drawImage 第一个参数就是图片/视频对象，可以是页面上获取的DOM对象，也可以是创建的虚拟 DOM。

二、上传的图片放到canvas上

思路通过 input 上传的图片，我们监听 change 事件可以得到上传图片的地址，在通过FileReader 转成 base64 ，然后创建 Image DOM 对象，放到 canvas 上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="file" id="file">
    <script>
        //创建canvas对象
        var canvas = document.createElement('canvas');
        //绑定canvas上下文
        var ctx = canvas.getContext('2d');
        // 设置canvas的宽和高
        canvas.width = 400;
        canvas.height = 300;
        // 得到file
        var oFile = document.getElementById('file');
        // 添加监听事件
        oFile.addEventListener('change', function (event) {
            // FileReader图片预览
            var reader = new FileReader();
            reader.readAsDataURL(event.target.files[0]);
            // 读文件成功的回调
            reader.onload = function(e) {
                var img = new Image();
                // e.target.result就是图片的base64地址信息
                img.src = e.target.result;
                img.onload = function(){
                    // 核心JS就这个
                    ctx.drawImage(img,0,0,400,300);
                    // canvas 上树
                    document.documentElement.appendChild(canvas);
                }
            };
        });
    </script>
</body>
</html>

实现效果：

三、图片保存

现在只需要把canvas 上的图片，直接保存输出。

canvas.toDataURL()方法
canvas.toDataURL() 方法
语法如下：

canvas.toDataURL(mimeType, qualityArgument)

可以把图片转换成base64格式信息，纯字符的图片表示法。

其中：
mimeType 表示 canvas 导出来的 base64 图片的类型，默认是 png 格式，也即是默认值是 'image/png'，我们也可以指定为 jpg 格式 'image/jpeg' 或者 webp 等格式。file 对象中的 file.type 就是文件的mimeType 类型，在转换时候正好可以直接拿来用（如果有 file 对象）。
qualityArgument 表示导出的图片质量，只要导出为 jpg 和 webp 格式的时候此参数才有效果，默认值是0.92，是一个比较合理的图片质量输出参数，通常情况下，我们无需再设定。

输出图片代码：

img.onload = function(){
    // 核心JS就这个
    ctx.drawImage(img,0,0,400,300);
    // 在创建一个图片DOM待会下载比较和原图的大小
    var compressedimage = new Image();
    compressedimage.src = canvas.toDataURL();
    compressedimage.onload = function(){
        document.documentElement.appendChild(compressedimage);
    }
    // canvas上树
    document.documentElement.appendChild(canvas);
}

图片质量对比：

canvas.toBlob()方法
Blob是计算机界通用术语之一，全称写作：BLOB (binary large object)，表示二进制大对象。
语法如下：

canvas.toBlob(callback, mimeType, qualityArgument)

可以把canvas转换成Blob文件，通常用在文件上传中，因为是二进制的，对后端更加友好。
和 toDataURL() 方法相比，toBlob() 方法是异步的，因此多了个 callback 参数，这个callback 回调方法默认的第一个参数就是转换好的 blob 文件信息。

img.onload = function(){
    // 核心JS就这个
    ctx.drawImage(img,0,0,400,300);
    // 在创建一个图片DOM待会下载比较和原图的大小
    var compressedimage = new Image();
    canvas.toBlob(function(blob){
        // blob必须通过window.URL.createObjectURL转化才能使用
        compressedimage.src = window.URL.createObjectURL(blob);
        // blob:null/a4a1de76-5e05-42f2-a7a9-0a9b6f1c7db0
        console.log(window.URL.createObjectURL(blob))
        compressedimage.onload = function(){
            document.documentElement.appendChild(compressedimage);
        }
        // Blob对象中所包含数据的大小。字节为单位。 只读。
        console.log(blob.size);
        // 一个字符串，表明该Blob对象所包含数据的MIME类型。
        console.log(blob.type);
    });
    // canvas上树
    document.documentElement.appendChild(canvas);
}