这段代码主要展示了如何在微信小程序中实现图片压缩。通过创建canvas，按比例压缩图片到指定宽度，然后将压缩后的图片保存为临时文件，并上传到服务器。过程中使用了wx.getImageInfo、wx.createCanvasContext、wx.canvasToTempFilePath和wx.uploadFile等API。
/**压缩图片*/compressionImage(tempFilePaths, params) {
let that= thiswx.getImageInfo({
src: tempFilePaths[0],
success:function(res) {var ctx = wx.createCanvasContext('photo_canvas');//设置canvas尺寸
var towidth = 500; //按宽度500px的比例压缩
var toheight = Math.trunc(500 * res.height /res.width);
that.setData({
canvas_h: toheight
})
ctx.drawImage(tempFilePaths[0], 0, 0, res.width, res.height, 0, 0, towidth, toheight)
that.createMap(ctx, params);
}
})
},/**创建画布并上传图片*/createMap(ctx, params) {
let that= this;
ctx.draw(true, function() {
wx.showLoading({
title:'压缩中',
})
setTimeout(()=>{
wx.canvasToTempFilePath({
canvasId:'photo_canvas',
fileType:"jpg",
success:function(res) {
wx.hideLoading();
wx.uploadFile({
url: app.globalData.baseUrl+ '/wechat/want/addWant',
filePath: res.tempFilePath,
name:'file',
formData: {'parameters': JSON.stringify(params)
},
success:function(res) {
console.log("state:" +JSON.parse(res.data).state)if (JSON.parse(res.data).state === 1) {
wx.showToast({
title:'发布成功',
duration:2000,
icon:"none",
success() {
setTimeout(function() {
wx.navigateBack({
delta:1,
})
},1000);
}
})
}
},
fail(res) {
console.log("fail" +res)
}
})
},
fail(res) {if (res.errMsg === "canvasToTempFilePath:fail:create bitmap failed") {
console.log("导出map失败")
}
}
},this)
},200);
})
},
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
