共计 1812 个字符，预计需要花费 5 分钟才能阅读完成。
前言
好像没啥好说的~
大概做法
先由 filereader 获取图片的 base64，控制图片生成，但不显示。
然后将图片按比例设置好压缩后的宽高绘制在 canvas 画布上。
之后利用 canvas 的自带方法再次转换成 base64，再对 base64 进行解码存储到数组缓存区，生成 blob，然后创建下载链接就完了。
上代码，看注释就完了
//html
<input type=”file” id=”file”> // 这里选择图片
<canvas id=”canvas”></canvas> //canvas 画布
//js
document.getElementById(‘file’).onchange = function () {
console.log(this.files[0]);
// 注意这个 files 是数组
reader.readAsDataURL(this.files[0]);
var reader = new FileReader();
reader.onload = function (e) {
// 下面这三行就可以实现文件选择了图片以后，预览的功能，但是有些图片可能太大了影响页面观感，得统一缩小下。
//var img = new Image();
// img.src = e.target.result;
// document.body.appendChild(img);
render(e.target.result) // 这个方法实现图片的压缩下载
}
}
var MAX_H = 100;
function render(src){
// 创建一个 Image 对象
var image = new Image();
// 设置 src 属性，加载图片内容，此时还未压缩
image.src = src;
// 绑定 load 事件处理器，加载完成后执行
image.onload = function(){
// 获取 canvas DOM 对象
var canvas = document.getElementById(“canvas”);
// 如果高度超标
if(image.height > MAX_H) {
// 宽度等比例缩放 *=
image.width *= MAX_H / image.height;
image.height = MAX_H;
}
// 获取 canvas 的 2d 环境对象, 有些上古浏览器不支持 canvas
var ctx = canvas.getContext(“2d”);
// canvas 清屏
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 把 canvas 宽高设置为图片宽高
canvas.width = image.width;
canvas.height = image.height;
// 将图像绘制到 canvas 上
//drawImage(img,startX,startY,endX,endY)
ctx.drawImage(image, 0, 0, image.width, image.height);
// 将绘制好的 canvas 图像转为 DataURL
//toDataURL(图片类型, 图片质量)，这个图片质量越高就越清晰（相同宽高）
//canvas.toDataURL 返回的默认格式就是 image/png
var data = canvas.toDataURL(‘image/jpeg’,0.5);
// 获取图片的 dataUrl 转成 blob
// 这下面转 blob 的代码我也没搞懂，无百度了 DataURL 转 blob 就是这些代码了
data = data.split(‘,’)[1];
data = window.atob(data);
var ia = new Uint8Array(data.length);
for (var i = 0; i < data.length; i++) {
ia[i] = data.charCodeAt(i);
};
var blob = new Blob([ia], {
type: “image/jpeg”
});
// 生成 blob 文件的下载链接，把链接附在 a 便签上，把 a 便签加入 dom 中，点击就可以下载啦
var url3 = URL.createObjectURL(blob);
var a = document.createElement(‘a’);
a.href = url3;
a.text = ‘ 测试图片 ’;
a.download = ‘mytest.jpg’;
document.body.appendChild(a);
};
};
效果预览
后语
压缩后上传的操作，这里就不写了，百度下 blob 如何生成 file 上传即可。
