3种常用的图片压缩方法：
-
把图片上传到阿里云或七牛云，借用云端的图片缩放技术进行压缩。阿里云文档
-
后端对图片尺寸大小进行压缩。
3. 前端用 Canvas 作为媒介压缩图片。
作为一名前端攻城狮，主要介绍用 Canvas 作为媒介压缩图片。
用 Canvas 作为媒介压缩图片
思路：
- <input type="file"/>获取二进制图片
- FileReader 把二进制图片转换成base64格式
- base64格式可用于生成 Image 对象
- 把图片绘制成 Canvas（这一步可以对图片尺寸进行压缩，这一步压缩效率最高，图片尺寸是最影响图片大小的）
- Canvas 再转成 base64 图片（这一步可以对图片质量进行压缩）
- Canvas 转成 Blob 格式（可用于上传）
js压缩图片并上传（react版）
export default class Home extends {
constructor(props) {
super(props);
= {
url: ''
}
}
changeFile (event) {
var _this = this;
// 选择的文件对象(file里只包含图片的体积，不包含图片的尺寸)
var file = [0];
(file)
// 选择的文件是图片
if(("image") === 0) {
// 压缩图片需要的一些元素和对象
var reader = new FileReader(),
//创建一个img对象
img = new Image();
(file);
// 文件base64化，以便获知图片原始尺寸
= function(e) {
= ;
};
// base64地址图片加载完毕后执行
= function () {
// 缩放图片需要的canvas（也可以在DOM中直接定义canvas标签，这样就能把压缩完的图片不转base64也能直接显示出来）
var canvas = ('canvas');
var context = ('2d');
// 图片原始尺寸
var originWidth = ;
var originHeight = ;
// 最大尺寸限制，可通过设置宽高来实现图片压缩程度
var maxWidth = 300,
maxHeight = 300;
// 目标尺寸
var targetWidth = originWidth,
targetHeight = originHeight;
// 图片尺寸超过300x300的限制
if(originWidth > maxWidth || originHeight > maxHeight) {
if(originWidth / originHeight > maxWidth / maxHeight) {
// 更宽，按照宽度限定尺寸
targetWidth = maxWidth;
targetHeight = (maxWidth * (originHeight / originWidth));
} else {
targetHeight = maxHeight;
targetWidth = (maxHeight * (originWidth / originHeight));
}
}
// canvas对图片进行缩放
= targetWidth;
= targetHeight;
// 清除画布
(0, 0, targetWidth, targetHeight);
// 图片压缩
(img, 0, 0, targetWidth, targetHeight);
/*第一个参数是创建的img对象；第二三个参数是左上角坐标，后面两个是画布区域宽高*/
//压缩后的图片转base64 url
/*(mimeType, qualityArgument),mimeType 默认值是'image/png';
* qualityArgument表示导出的图片质量，只有导出为jpeg和webp格式的时候此参数才有效，默认值是0.92*/
var newUrl = ('image/jpeg', 0.92);//base64 格式
_this.setState({
url: newUrl
})
//也可以把压缩后的图片转blob格式用于上传
// 语法：(callback, mimeType, qualityArgument)
((blob)=>{
(blob)
// 图片ajax上传
var xhr = new XMLHttpRequest();
("POST", '', true);
(blob);
}, 'image/jpeg', 0.92)
};
} else {
alert('请上传图片格式');
}
}
render() {
let { url } = ;
return (
<div>
<input type="file" onChange={(this)}/>
<img src={ url } alt="" />
</div>
)
}
}总结：图片 -> Canvas -> 图片
微信小程序压缩图片并上传
<!--wxml-->
<button bindtap="chooseImg">选择图片</button>
<canvas canvas- style="width:{{ imgWidth }}px; height:{{ imgHeight }}px;"></canvas>Page({
data: {
imgWidth: 0,
imgHeight: 0
},
chooseImg () {
let _this = this;
// 从本地相册选择图片或使用相机拍照
({
count: 1, // 最多可以选择的图片张数
success (res) {
const ctx = ('firstCanvas');
let path = [0];
({
src: path,
success (res) {
(res)
// 图片原始尺寸
let originWidth = ;
let originHeight = ;
// 最大尺寸限制，可通过设置宽高来实现图片压缩程度
let maxWidth = 200,
maxHeight = 150;
// 目标尺寸
let targetWidth = originWidth,
targetHeight = originHeight;
// 图片尺寸超过200x150的限制
if(originWidth > maxWidth || originHeight > maxHeight) {
if(originWidth / originHeight > maxWidth / maxHeight) {
// 更宽，按照宽度限定尺寸
targetWidth = maxWidth;
targetHeight = (maxWidth * (originHeight / originWidth));
} else {
targetHeight = maxHeight;
targetWidth = (maxHeight * (originWidth / originHeight));
}
}
// canvas对图片进行缩放
_this.setData({
imgWidth: targetWidth,
imgHeight: targetHeight
})
// 压缩图片（绘制图像到画布）
(path,0,0,targetWidth,targetHeight);
(false, ()=>{
// canvas导出为图片路径
({
canvasId: 'firstCanvas',
fileType: 'jpg', //支持jpg或png
quality: 0.92, //图片质量
success(res) {
let path = ;
// 保存图片到系统相册
({
filePath: path,
success () {
('保存到本地相册成功！')
},
fail () {
('保存到本地相册失败！')
}
})
// 上传压缩过的图片
http.upload_file('/pic/uploadPic', path, 'file', (res)=>{})
},
fail(err) {
(err);
}
})
});
}
})
}
})
}
})四、结束语
"图片水印合成"，实际上所使用的技术和套路和本文是如出一辙的，也是“图片→canvas水印→图片”三步曲，区别在于水印合成是连续执行两次()方法，一次是原图一次水印图片，其他代码逻辑和原理都是一样的。
由此及彼，利用同样的原理和代码逻辑，我们还可以实现其它很多以前前端不太好实现的功能，比方说图片的真剪裁效果，所谓“真剪裁”指不是使用个overflow:hidden或者clip这些CSS属性的“伪剪裁”，而是真正意义上就这么大区域图片信息。甚至配合一些前端算法，我们可以直接在前端进行人脸识别，图片自动美化等一系列功能再上传等等。
原理都是一样的，都是利用canvas作为中间媒介进行处理。