小程序drawImage剪切图片
1、var imgsW = [];
var imgsH = [];
Page({
..........
})
2、需要下载图片的地方调用，获取用户宽高，并赋值，数组添加使用push
var _this = this;
wx.downloadFile({
url: 图片地址,
success: function (res) {
if (res.statusCode === 200) {
//获取图片信息，主要获取宽高
wx.getImageInfo({
src: res.tempFilePath,
success: function (rest) {
imgsW.push(rest.width);//赋值
imgsH.push(rest.height);
let url = _this.data.downloadImg;
url.push(res.tempFilePath)
_this.setData({
downloadImg: url,
})
_this.drawView(); // 所需图片的下载完成后，才可开始draw界面
return;
}
}
})
}
}
})
3、图片下载完成，开始画图，
drawView() {
var context = wx.createCanvasContext('shareHomePage', this);
context.setFillStyle('#ffffff');
context.fillRect(0, 0, 500, 600);
var img_top = 10;
var img_left = 10;
var spaceX = 6;
var img_w_h = (500 - (spaceX + img_left) * 2 ) / 3.0;
for (var i in this.data.downloadImg) {
if (i >= 3) {
break;
}
var url = this.data.downloadImg[i];
var minx = (imgsW[i] - imgsH[i]) / 2.0;
var miny = (imgsH[i] - imgsW[i]) / 2.0;
if(imgsW[i] > imgsH[i]) {
context.drawImage(url, minx, 0, imgsH[i], imgsH[i], img_left, img_top, img_w_h, img_w_h);
} else {
context.drawImage(url, 0, miny, imgsW[i], imgsW[i], img_left, img_top, img_w_h, img_w_h);
}
img_left += spaceX + img_w_h
}
}
/**
context.drawImage(url, 0, miny, imgsW[i], imgsW[i], img_left, img_top, img_w_h, img_w_h);
括号内对应参数内容：
（图片地址, 起始x, 起始y, 截取宽度, 截取长度, 图片放置位置x, 图片放置位置y, 图片放置宽，图片放置高)
**/
完结
ps：
调用wx.switchTab时候，发觉没有调用对应tab界面的onLoad: function () / onShow: function ()，需要自己手动调用，调用方法如下：
wx.switchTab({
url: '../news/news',
success: function (e) {
var page = getCurrentPages().pop();
if (page == undefined || page == null) return;
page.onLoad(); // page.onShow();
}
});
真的完结了，开心😄......🎉🎉🎉🎉🎉
