利用的技术 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);
}
写到这如果使用 canvas 在前端实现图片水印合成，是不是就更简单了。
几个数据格式可能要在这理解：
理解 DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型 « 张鑫旭-鑫空间-鑫生活
