JS 用画布讲多张图、有规律的拼接成一张图

<view class="canvasBox">
<canvas canvas-id="shareCanvas" style="width:610px;height:610px"></canvas>
</view>

//生成封面
createPic(){
let imgArr = [
'http://cook.file.chuyitech.com/jpg/20200504/e1845a945683d8368c0f04c53fef0b61.jpg',
'http://cook.file.chuyitech.com/jpg/20200305/cdf5393cae52c19b02ae8c61017576f8.jpg',
'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1341118893,346019396&fm=26&gp=0.jpg',
'http://cook.file.chuyitech.com/jpg/20200504/e1845a945683d8368c0f04c53fef0b61.jpg',
'http://cook.file.chuyitech.com/jpg/20200305/cdf5393cae52c19b02ae8c61017576f8.jpg',
'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1341118893,346019396&fm=26&gp=0.jpg',
'http://cook.file.chuyitech.com/jpg/20200504/e1845a945683d8368c0f04c53fef0b61.jpg',
'http://cook.file.chuyitech.com/jpg/20200305/cdf5393cae52c19b02ae8c61017576f8.jpg',
'http://cook.file.chuyitech.com/jpg/20200305/cdf5393cae52c19b02ae8c61017576f8.jpg',
];
const ctx = wx.createCanvasContext('shareCanvas');
let _this = this;
this.picture(0,imgArr,ctx,_this);
},
//递归画图
picture: function (i,imgArr,ctx,_this) {
//获取url图信息
wx.getImageInfo({
src: imgArr[i],
success(res) {
let globalWidth; //图片目标宽
let globalHeight; //图片目标高
let offX ;
let offY;
if(imgArr.length >= 9){
globalWidth = 200;
globalHeight = 200;
offX = _this.getX(globalWidth,5,3,i);
offY = _this.getY(globalHeight,5,3,i);
}else if(imgArr.length >= 4){
globalWidth = 305;
globalHeight = 305;
offX = _this.getX(globalWidth,5,2,i);
offY = _this.getY(globalHeight,5,2,i);
}else{
globalWidth = 610;
globalHeight = 610;
offX = _this.getX(globalWidth,0,1,i);
offY = _this.getY(globalHeight,0,1,i);
}
let obj = _this.getXYWH(parseInt(res.width), parseInt(res.height), parseInt(globalWidth), parseInt(globalHeight));
//绘制图
ctx.drawImage(res.path, obj.x, obj.y, obj.w, obj.h, offX, offY, globalWidth, globalHeight);
if(i<imgArr.length-1){
_this.picture(i+1,imgArr,ctx,_this);
}else{
ctx.stroke();
ctx.draw(false, _this.drawPicture());
}
},error(){
if(i<imgArr.length-1){
_this.picture(i+1,imgArr,ctx,_this)
}else{
ctx.stroke();
ctx.draw(false, _this.drawPicture());
}
}
})
},
//生成图片
drawPicture: function () {
//延时解决 ctx.draw异步不了的坑
setTimeout(()=>{
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 610,
height: 610,
destWidth: 610,
destHeight: 610,
fileType:'jpg',
canvasId: 'shareCanvas',
success: function (res) {
utils.uploadFile(api.FileUpload, res.tempFilePath, {}).then(function (data) {
let newRes = JSON.parse(data);
if (newRes.code === 200) {

}
});
},
})
},300)
},

//获取原图新宽高偏移量
getXYWH(width, height, globalWidth, globalHeight){
let sourceWidth=0;
let sourceHeight=0;
//宽大于高
if(width*globalHeight/globalWidth>height){
sourceHeight=height;
sourceWidth=height*globalWidth/globalHeight;
}else{
//高大于宽
sourceHeight=width*globalHeight/globalWidth;
sourceWidth=width;
}
let sourceX=(width-sourceWidth)/2;
let sourceY=(height-sourceHeight)/2;
let obj={};
obj["x"]=sourceX;
obj["y"]=sourceY;
obj["w"]=sourceWidth;
obj["h"]=sourceHeight;
return obj;
},

//获取新图X偏移量
getX(globalWidth,link,rowSize,index){
let x = 0.0;
x = (globalWidth+link) * (index%rowSize);
return x;
},
//获取新图Y偏移量
getY(globalHeight,link, rowSize, index){
let y = 0.0;
y = (globalHeight+link) * parseInt((index/rowSize));
return y;
}