前提概要：
最近公司项目中，有个用户手机自己拍照上传的的需求，需要用户在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
代码展示
下面写一个最简单的示例来说明是如何压缩的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片压缩</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<input type="file" onChange="change(this.files)">
<canvas id="canvas" width="100px" height="100px"></canvas>
<script>
function change(files){
console.log('原始大小=',files[0].size) //12M
var that = this;
var img = new Image();
img.src = URL.createObjectURL(files[0]);//将文件转成url
img.onload = function(){ //必须等到图片load之后才能画到canvas中
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = img.width
canvas.height = img.height
ctx.drawImage(img, 0, 0);
canvas.toBlob(function(blob){ //压缩图片
console.log('压缩后的图',blob.size);
var newFile = new File([blob], files[0].name, { type: blob.type });
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)
}
})
}, "image/jpeg", 0.6);
}
}
</script>
</body>
</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
695
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
