Fork me on GitHub

[微信小程序]-图片上传压缩尺寸,canvas方法

这几天公司一个小程序项目遇到图片上传图片太大,导致用户上传体验不流畅的问题。首先想到的就是需要把上传的照片压缩小,这里使用canvas的方法把图片重绘在一个固定尺寸上上传,分享出来,希望可以帮到遇到同样问题的同学们

wxml

1
2
3
<button bindtap='selectImage'>select image</button>
<button bindtap='saveImage'>save image</button>
<canvas style="width: 300px; height: 200px;" canvas-id="myCanvas"></canvas>

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 绘制图片到canvas上
selectImage:function(){
const ctx = wx.createCanvasContext('myCanvas')

wx.chooseImage({
success: function(res){
ctx.drawImage(res.tempFilePaths[0], 0, 0, 300, 200)
ctx.draw()
}
})
},
//保存图片
saveImage:function(){
const ctx = wx.createCanvasContext('myCanvas')
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 300,
height: 200,
destWidth: 300,
destHeight: 200,
canvasId: 'myCanvas',
success: function(res) {
console.log(res.tempFilePath)
wx.previewImage({
urls: [res.tempFilePath],
})
}
})
}

支持作者