功能：微信小程序图片压缩功能的实现方法

微信小程序图片紧缩功能的实现方法

微信小程序图片紧缩功能的实现方法 :1、在 wx.chooseImage 接口选择相机图片。2、在 wx.getImageInfo 接口获得图片信息。3、计算紧缩比例和终究图片的长宽。4、创建 canvas 绘制终究图片。5、在 wx.canvasToTempFilePath 接口将画布内容导出为图片并获得图片路径。

具体操作步骤：

1、通过 wx.chooseImage 接口选择相机图片。

2、通过 wx.getImageInfo 接口获得图片信息（长宽，类型）。

3、 计算紧缩比例和终究图片的长宽。

4、创建 canvas 绘图上下文，绘制终究图片。

5. 通过 wx.canvasToTempFilePath 接口将画布内容导出为图片并获得图片路径。

代码实现以下所示：

wxml 文件

<canvascanvas-id="canvas"style="width:{{cWidth}}px;height:{{cHeight}}px;position:absolute;left:⑴000px;top:⑴000px;"></canvas>

js 文件

data:{ cWidth: 0; cHeight : 0;}

data:{cWidth:0;cHeight:0;}
</pre>
<pre>
wx.chooseImage({
count:1,//默许9
sizeType:['compressed'],//指定只能为紧缩图，首先进行一次默许紧缩
sourceType:['album','camera'],//可以指定来源是相册或相机，默许两者都有
success:function(photo){
//-----返回选定照片的本地文件路径列表，获得照片信息-----------
wx.getImageInfo({
src:photo.tempFilePaths[0],
success:function(res){
//---------利用canvas紧缩图片--------------
varratio=2;
varcanvasWidth=res.width//图片原始长宽
varcanvasHeight=res.height
while(canvasWidth>400||canvasHeight>400){//保证宽高在400之内
canvasWidth=Math.trunc(res.width/ratio)
canvasHeight=Math.trunc(res.height/ratio)
ratio++;
}
that.setData({
cWidth:canvasWidth,
cHeight:canvasHeight
})
//----------绘制图形并取出图片路径--------------
varctx=wx.createCanvasContext('canvas')
ctx.drawImage(res.path,0,0,canvasWidth,canvasHeight)
ctx.draw(false,setTimeout(function(){
wx.canvasToTempFilePath({
canvasId:'canvas',
destWidth:canvasWidth,
destHeight:canvasHeight,
success:function(res){
console.log(res.tempFilePath)//终究图片路径
},
fail:function(res){
console.log(res.errMsg)
}
})
},100))//留一定的时间绘制canvas
fail:function(res){
console.log(res.errMsg)
},
})
}
})

本文来源：https://www.yuntue.com/post/66758.html | 云服务器网，转载请注明出处！