3种常用的图片压缩方法

3种常用的图片压缩方法：

把图片上传到阿里云或七牛云，借用云端的图片缩放技术进行压缩。阿里云文档
后端对图片尺寸大小进行压缩。

3. 前端用 Canvas 作为媒介压缩图片。

作为一名前端攻城狮，主要介绍用 Canvas 作为媒介压缩图片。

用 Canvas 作为媒介压缩图片

思路：

<input type="file"/>获取二进制图片
FileReader 把二进制图片转换成base64格式
base64格式可用于生成 Image 对象
把图片绘制成 Canvas（这一步可以对图片尺寸进行压缩，这一步压缩效率最高，图片尺寸是最影响图片大小的）
Canvas 再转成 base64 图片（这一步可以对图片质量进行压缩）
Canvas 转成 Blob 格式（可用于上传）

js压缩图片并上传（react版）

export default class Home extends React.Component {constructor(props) {super(props);this.state = {url: ''}}changeFile (event) {var _this = this;// 选择的文件对象(file里只包含图片的体积，不包含图片的尺寸)var file = event.target.files[0];console.log(file)// 选择的文件是图片if(file.type.indexOf("image") === 0) {// 压缩图片需要的一些元素和对象var reader = new FileReader(),//创建一个img对象img = new Image();reader.readAsDataURL(file);// 文件base64化，以便获知图片原始尺寸reader.onload = function(e) {img.src = e.target.result;};// base64地址图片加载完毕后执行img.onload = function () {// 缩放图片需要的canvas（也可以在DOM中直接定义canvas标签，这样就能把压缩完的图片不转base64也能直接显示出来）var canvas = document.createElement('canvas');var context = canvas.getContext('2d');// 图片原始尺寸var originWidth = this.width;var originHeight = this.height;// 最大尺寸限制，可通过设置宽高来实现图片压缩程度var maxWidth = 300,maxHeight = 300;// 目标尺寸var targetWidth = originWidth,targetHeight = originHeight;// 图片尺寸超过300x300的限制if(originWidth > maxWidth || originHeight > maxHeight) {if(originWidth / originHeight > maxWidth / maxHeight) {// 更宽，按照宽度限定尺寸targetWidth = maxWidth;targetHeight = Math.round(maxWidth * (originHeight / originWidth));} else {targetHeight = maxHeight;targetWidth = Math.round(maxHeight * (originWidth / originHeight));}}// canvas对图片进行缩放canvas.width = targetWidth;canvas.height = targetHeight;// 清除画布context.clearRect(0, 0, targetWidth, targetHeight);// 图片压缩context.drawImage(img, 0, 0, targetWidth, targetHeight);/*第一个参数是创建的img对象；第二三个参数是左上角坐标，后面两个是画布区域宽高*///压缩后的图片转base64 url/*canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/png';* qualityArgument表示导出的图片质量，只有导出为jpeg和webp格式的时候此参数才有效，默认值是0.92*/var newUrl = canvas.toDataURL('image/jpeg', 0.92);//base64 格式_this.setState({url: newUrl})//也可以把压缩后的图片转blob格式用于上传// 语法：canvas.toBlob(callback, mimeType, qualityArgument)canvas.toBlob((blob)=>{console.log(blob)// 图片ajax上传var xhr = new XMLHttpRequest();xhr.open("POST", 'upload.php', true);xhr.send(blob);  }, 'image/jpeg', 0.92)};} else {alert('请上传图片格式');}}render() {let { url } = this.state;return (<div><input id="file" type="file" onChange={this.changeFile.bind(this)}/><img id="preview" src={ url } alt="" /></div>)}
}

总结：图片 -> Canvas -> 图片

微信小程序压缩图片并上传

<!--wxml-->
<button bindtap="chooseImg">选择图片</button>
<canvas canvas-id="firstCanvas" style="width:{{ imgWidth }}px; height:{{ imgHeight }}px;"></canvas>

Page({data: {imgWidth: 0,imgHeight: 0},chooseImg () {let _this = this;// 从本地相册选择图片或使用相机拍照wx.chooseImage({count: 1, // 最多可以选择的图片张数success (res) {const ctx = wx.createCanvasContext('firstCanvas');let path = res.tempFilePaths[0];wx.getImageInfo({src: path,success (res) {console.log(res)// 图片原始尺寸let originWidth = res.width;let originHeight = res.height;// 最大尺寸限制，可通过设置宽高来实现图片压缩程度let maxWidth = 200,maxHeight = 150;// 目标尺寸let targetWidth = originWidth,targetHeight = originHeight;// 图片尺寸超过200x150的限制if(originWidth > maxWidth || originHeight > maxHeight) {if(originWidth / originHeight > maxWidth / maxHeight) {// 更宽，按照宽度限定尺寸targetWidth = maxWidth;targetHeight = Math.round(maxWidth * (originHeight / originWidth));} else {targetHeight = maxHeight;targetWidth = Math.round(maxHeight * (originWidth / originHeight));}}// canvas对图片进行缩放_this.setData({imgWidth: targetWidth,imgHeight: targetHeight})// 压缩图片（绘制图像到画布）ctx.drawImage(path,0,0,targetWidth,targetHeight);ctx.draw(false, ()=>{// canvas导出为图片路径wx.canvasToTempFilePath({canvasId: 'firstCanvas',fileType: 'jpg', //支持jpg或pngquality: 0.92, //图片质量success(res) {let path = res.tempFilePath;// 保存图片到系统相册wx.saveImageToPhotosAlbum({filePath: path,success () {console.log('保存到本地相册成功！')},fail () {console.log('保存到本地相册失败！')}})// 上传压缩过的图片http.upload_file('/pic/uploadPic', path, 'file', (res)=>{})},fail(err) {console.log(err);}})});}})}})}
})

四、结束语

"图片水印合成"，实际上所使用的技术和套路和本文是如出一辙的，也是“图片→canvas水印→图片”三步曲，区别在于水印合成是连续执行两次context.drawImage()方法，一次是原图一次水印图片，其他代码逻辑和原理都是一样的。

由此及彼，利用同样的原理和代码逻辑，我们还可以实现其它很多以前前端不太好实现的功能，比方说图片的真剪裁效果，所谓“真剪裁”指不是使用个overflow:hidden或者clip这些CSS属性的“伪剪裁”，而是真正意义上就这么大区域图片信息。甚至配合一些前端算法，我们可以直接在前端进行人脸识别，图片自动美化等一系列功能再上传等等。

原理都是一样的，都是利用canvas作为中间媒介进行处理。

3种常用的图片压缩方法相关推荐

图片压缩怎么做？这几种图片压缩方法很方便
怎么把图片给压缩一下呢?图片的内存如果太大,那我们不管是在发送还是保存都会不方便.发送时会非常缓慢,保存时也占据很多内存,对本来空间就不太够的电脑或手机来说是一个致命问题.缓解这方面问题我们可以将图片 ...
五种常用的图片格式及其是否有数据压缩的总结
五种常用的图片格式及其是否有数据压缩的总结声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 说明:本文主要介绍五种最常见和最常用的图像格式:BMP,PNG,J ...
iOS 图片压缩方法
两种图片压缩方法两种压缩图片的方法:压缩图片质量(Quality),压缩图片尺寸(Size). 压缩图片质量 NSData *data = UIImageJPEGRepresentation(ima ...
java视频压缩 lz4_一种视频序列帧的压缩方法、解压方法及装置与流程
技术特征: 1.一种视频序列帧的压缩方法,其特征在于,包括: 在视频帧数据压缩时,对解析到的第一帧视频帧数据使用lz4算法进行压缩并保存至视频文件中: 对之后解析到的每一帧视频帧数据都与之前一帧视频帧 ...
Android应用开发中三种常见的图片压缩方法
Android应用开发中三种常见的图片压缩方法,分别是:质量压缩法.比例压缩法(根据路径获取图片并压缩)和比例压缩法(根据Bitmap图片压缩). 一.质量压缩法private Bitmap comp ...
几种常用的像素混合方法
前两天为大家介绍了处理透明光影效果的 Alpha-Blending 技术,今次我将再为大家介绍其它几种常用的像素混合方法,这些方法一般在游戏中被用来处理光影效果. 『Alpha-Blending』前 ...
10种常用的网络营销方法
网络营销产生于20世纪90年代,发展至今已演变出越来越多的营销方法,在国内随着互联网影响的进一步扩大,人们对网络营销认知的进一步加深,网络营销方法手段也是各种推陈出新,下面就介绍如今网络营销最常用的1 ...
**10种常用的网络营销方法**
**10种常用的网络营销方法** 网络营销产生于20世纪90年代,发展至今已演变出越来越多的营销方法,在国内随着互联网影响的进一步扩大,人们对网络营销认知的进一步加深,网络营销方法手段也是各种推陈出新 ...
怎么压缩图片大小，图片压缩方法
怎么压缩图片大小?工作中如果遇到一些体积较大的图片,尤其一些清晰度很高的图片,可能一张小尺寸的图片就有2-3M的大小,这个我们的使用打开造成很多的麻烦,例如因为超过限制大小而不能上传,打开的时候很大, ...
计算机中十二种常用密码的破解方法(转)
计算机中十二种常用密码的破解方法(转)[@more@] 在日常操作中,我们经常要输入各种各样的密码,例如开机时要输入密码,QQ时也要先输入密码,假如你忘记了这些密码,就有可能用不了机器.打不开文件.不 ...