微信小程序图片压缩
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序图片压缩相关的知识，希望对你有一定的参考价值。
参考技术A微信小程序图片压缩有三种方法，一种是使用官方提供的接口 wx.compressImage(Object object) ；一种是通过压缩图片的大小，利用canvas重绘来得到压缩图片；最后一种安装第三方图片压缩包。
由于第一种方法网上很多人说压缩不明显或者失效，所以选择使用canvas重绘来实现图片压缩。同时，该种方法可以控制图片的最大尺寸，保持上传图片大小尺寸相差不多。在我们的学生节晚会小程序中，屏幕显示图片会比较美观一致。
1. 通过 wx.chooseImage 接口选择相机图片
2. 通过 wx.getImageInfo 接口获取图片信息（长宽，类型）
3. 计算压缩比例和最终图片的长宽
5. 通过 wx.canvasToTempFilePath 接口将画布内容导出为图片并获取图片路径
wxml 文件
在文件末尾插入 canvas 组件，通过设置left和top值确保图片不会显示在可视范围内。
一定要设置 canvas-id，这是canvas绘图和导出图片必备的属性。
js 文件
设置与页面绑定的数据：canvas的大小，也是压缩后图片的大小
1. 将画布内容导出为图片时，指定destWidth和destHeight为压缩后图片的大小。这里遇到过玄学bug，不指定的话，有时候图片不会压缩到规定的大小。
微信小程序用canvasToTempFilePath压缩图片，开发工具压缩正常而真机上比例失调
一.序言：
上传图片时有些图片太大了，需要压缩质量大小再上传。下面展示压缩质量大小上传，也是我踩过得坑：开发工具上压缩正常而在真机上比例失调。主要是用 wx.canvasToTempFilePath 方法。
我是要实现一个上传4张图片的功能：
二.实现：
- 用于处理压缩图片的canvas
<!-- 用于处理压缩图片的canvas -->
<canvas canvas-id="attendCanvasId1" style="width:canvasWidth1px;height:canvasHeight1px;position: absolute;left:-8000px;top:-8000px;" />
<canvas canvas-id="attendCanvasId2" style="width:canvasWidth2px;height:canvasHeight2px;position: absolute;left:-8000px;top:-8000px;" />
<canvas canvas-id="attendCanvasId3" style="width:canvasWidth3px;height:canvasHeight3px;position: absolute;left:-8000px;top:-8000px;" />
<canvas canvas-id="attendCanvasId4" style="width:canvasWidth4px;height:canvasHeight4px;position: absolute;left:-8000px;top:-8000px;" />
<!-- <canvas canvas-id="attendCanvasId" style="width:canvasWidthpx;height:canvasHeightpx;" /> -->
data里定义变量：
// canvas 相关（为了支持多选需要四个canvas）
canvasWidth1: '579',
canvasWidth2: '579',
canvasWidth3: '579',
canvasWidth4: '579',
canvasHeight1: '807',
canvasHeight2: '807',
canvasHeight3: '807',
canvasHeight4: '807',
- 省略…上面这些都不是重点，跳过，下面是封装的压缩质量方法：
踩坑：开发工具上压缩上传没问题，但是真机上图片会出现只截取了一部分，比例失常现象。
原因：wx.canvasToTempFilePath的时候忘记用定时器，在开发工具正常是因为canvas绘制速度快所以没问题，而真机上绘制慢导致获取到的图片不正常。
/**图片压缩
* 压缩图片的尺寸、大小
* @param * img 选择图片 图片对象 ； index：因为我4张图片，所以用index区分
* @param * width 默认600px 最小压缩宽度，当图片小于这个宽度的时候不压缩尺寸，只压缩质量 质量0.5倍
* @param * size 单位kb 最小压缩大小，当图片小于这个大小的时候不压缩质量
* 当某张图片，小于size不做操作
*/
picCompress(img, index, width = 600, size = 1024)
const canvasId = 'attendCanvasId' + index
// canvas长度高度属性名
const widthName = 'canvasWidth' + index
const heightName = 'canvasHeight' + index
let that = this
let imgSize = img.size / 1024
console.log('img', img)
let path = img.url
console.log('图片大小(kb)', imgSize);
return new Promise((resolve, reject) =>
wx.getSystemInfo(
success: function (data)
var pixelRatio = data.pixelRatio;
wx.getImageInfo(
src: path,
success: function (res)
// 这里除于设备像素比
var canvasWidth = res.width / pixelRatio ;
var canvasHeight = res.height / pixelRatio ;
//设置canvas尺寸
that.setData(
[widthName]: canvasWidth,
[heightName]: canvasHeight
);
var ctx = wx.createCanvasContext(canvasId);
ctx.drawImage(path, 0, 0, canvasWidth, canvasHeight);
ctx.draw(true, function ()
if (imgSize > size)
//保存临时文件
setTimeout(() =>
wx.canvasToTempFilePath(
canvasId,
fileType: 'jpg',
quality: 0.5,
width: 0,
height: 0,
destWidth: canvasWidth,
destHeight: canvasHeight,
success: function (res)
console.log(res.tempFilePath)
wx.getImageInfo(
src: res.tempFilePath,
success: function (res)
//压缩成功,res.path是临时路径 我转成base64后上传
console.log(res)
let sourcePhoto = wx.getFileSystemManager().readFileSync(res.path, 'base64')
console.log('------------url:',res.path)
resolve(sourcePhoto)
);
,
fail: function (error)
console.log(error)
)
, 500)
else
let sourcePhoto = wx.getFileSystemManager().readFileSync(res.path, 'base64')
console.log('------------url:',res.path)
resolve(sourcePhoto)
)
)
);
)
,
wx.canvasToTempFilePath属性：
三.总结：
😆😆😆
那么，下次见了，溜了溜了~
我的哔哩哔哩空间
Gitee仓库地址：全部特效源码
其它文章：
~关注我看更多简单创意特效：
文字烟雾效果 html+css+js
环绕倒影加载特效 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结（一）
Sass总结笔记
…等等
进我主页看更多~
以上是关于微信小程序图片压缩的主要内容，如果未能解决你的问题，请参考以下文章