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

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

图片上传压缩的意义：

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

一、canvas 的 drawImage() 方法。

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

二、上传的图片放到canvas上

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

实现效果：

三、图片保存

现在只需要把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);
}

写到这如果使用 canvas 在前端实现图片水印合成，是不是就更简单了。
几个数据格式可能要在这理解：

理解 DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型 « 张鑫旭-鑫空间-鑫生活

HTML5 file API加canvas实现图片前端JS压缩并上传 « 张鑫旭-鑫空间-鑫生活