前端canvas图片压缩原理解析

前提概要：

最近公司项目中，有个用户手机自己拍照上传的的需求，需要用户在wap页面中调起相机拍照上传。前端通过input[file]  capture="camera" 成功的调起了摄像机，看起来好像一切都ok了，可是后来实际测试中发现，iphone X + 像素比较高,排出来的照片有的高达十几M，而接口控制最多上传5M,造成上传失败。很显然让用户自己去压缩是很不现实的，用户体验非常差。这个场景下前端图片压缩就不得不摆到了桌面。后来github上找到一个插件compressorjs  ，经过试验后发现可以完美实现。由于当时急着完成功能，并没有对其原理做过多的研究，今天在项目上完线后的空余时间对前端的图片压缩做些研究。大致弄清楚了该插件的压缩原理。

图片压缩上传流程：

 

通过上图我们可以看到，实际压缩是通过canvas的api toBlob 来进项压缩的，这里有几个关键词：createObjectURL，canvas.toBlob,Blob , FormData ,，toDataURl我们来依次解释下。

URL.createObjectURL

改接口将文件转换成一个页面上可以显示的图片地址，利用这个地址我们可以将改图片文件画到canvas中。

 

canvas.toBlob （重点）

调用这个api 可以将canvas画布中的图片进行指定质量的压缩，并转化成Blob对象返回给回调函数，我们来看一下它的用法

/*
* callback 回调函数，返回处理后的Blob
* type   图片类型,默认格式为'image/png'
* quality 图片压缩的质量（0-1）
*/
canvas.toBlob(callback, type, quality);

/* * callback 回调函数，返回处理后的Blob * type   图片类型,默认格式为'image/png' * quality 图片压缩的质量（0-1） */ canvas.toBlob(callback, type, quality);

通过设置quality参数我们可以设置图片压缩的程度。通过callback我们可以得到处理后的文件。然后在callback中处理上传操作

拓展问题：这个图片压缩的原理是啥？这个压缩影响图片质量么

图片压缩原理，简单来说，通过算法减少一张图片上的颜色差异，牺牲图片画质。比如紧挨着的颜色相近的四个像素的颜色信息压缩前大概占16个字节，压缩后变成一个颜色就能减少近4倍。quality用来控制色差的力度，值越小力度越大，颜色相差较大的两个像素也会被处理，自然被压缩后文件就越小，画质就越烂，所以是会影响图片质量的，官方文档中也有说到。

传送门： 官方文档

 

canvase.toDataURL

canvase.toDataURL 和 canvas.toBlob 不同的是toBlob会创建一个Blob对象，而toDataURL返回一个包含图片展示的dataURI ，可以将图片压缩成 base64格式，具体用法可看官方文档

传送门： 官方文档 

 

Blob  

那么Blob是什么呢？blob是一个二进制大对象，是一个可以储存二进制文件的容器。在Web领域，Blob被定义为包含只读数据的类文件对象。Blob中的数据不一定是js原生数据形式。常见的File接口就继承自Blob，并扩展它用于支持用户系统的本地文件。简单来说 Blob是个二进制，所以再服务端是通用的，所有可以无阻隔接受。

拓展问题：base64 格式的文件可以上传么?  

可以上传，需要后台支持  https://cnodejs.org/topic/4f939c84407edba2143c12f7?spm=a2c6h.13066369.0.0.61567ec0NqhHYH

传送门：官方文档

 

FormData

在实际操作中发现使用json格式上传并没有成功，使用formdata才可用上传

var formData = new FormData();        
    formData.append('file', newFile, newFile.name);                
    $.ajax({                
        url: 'url',//后台文件上传接type: 'POST',                
        data: formData,                
        processData: false,                
        contentType: false,                
        success: function (result) {                    
            console.log('上传成功',result)                
        }            
})

 

拓展问题：是否只能使用formdata上传文件？是接口限制了还是html规范就是这样？

可以使用 input ,FormData.,和base64等方式上传

https://www.cnblogs.com/soraly/p/8441589.html

 

代码展示

下面写一个最简单的示例来说明是如何压缩的

以上就是今天调研的结果

 

参考资料：

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob

https://segmentfault.com/q/1010000009851120

https://blog.csdn.net/weixin_34114823/article/details/91393062

https://blog.csdn.net/longlc123/article/details/81135616