本人前台写个根据canvas生成海报的功能,基本上就是传入网络图片地址下载后循环生成图片,但是却发生生成的图片全是一样的情况,代码如下:
createCanvasImage:function(imageUrl,goodsInfo,rx){
let that = this;
// console.log(goodsInfo);
const ctxx = wx.createCanvasContext('mycanvas'); //绘图上下文
ctxx.draw();
ctxx.setFillStyle("#ffffff");
ctxx.fillRect(0, 0, 375, 667);
// ctxx.clearRect(0, 0, 375, 667);
// ctxx.draw(true);
let imgpath ="";
let timgwidth =0;
let timgheight =0;
var ration = 0;
var realhight =375;
wx.getImageInfo({
src: imageUrl,
success: function (titleimgInfo) {
timgwidth= titleimgInfo.width;
timgheight = titleimgInfo.height;
ration = titleimgInfo.width/titleimgInfo.height; //图片的真实宽高比例
// imgpath = titleimgInfo.path;
// console.log(timgwidth);
// console.log(timgheight);
realhight = parseInt(Math.round(375*ration));
// console.log(ration)
// console.log(realhight)
console.log(imageUrl);
console.log(titleimgInfo.path);
}
});
if(realhight>0){
const promise =new Promise((resolve,reject)=>{
wx.downloadFile({
url: imageUrl,
success:function(resule){
if(resule.statusCode===200){
console.log(imageUrl);
console.log('图片已下载成功!'+rx);
ctxx.drawImage(resule.tempFilePath,0+rx,0,375,realhight);
console.log(resule.tempFilePath);
ctxx.draw(true, setTimeout(function () {
wx.canvasToTempFilePath({
canvasId: 'mycanvas',
success: function (res) {
console.log(res);
// console.log(res.tempFilePath);
var tempFilePath = res.tempFilePath;
// that.setData({
// imagePath: tempFilePath
// });
that.saveBill(tempFilePath);
},
fail: function (res) {
// console.log(res);
}
})
}, 3000));
}
}
})
})
promise.then(res=>{
console.log(res)
},err=>{
cosole.log(err)
})
}
// }else{
// ctxx.drawImage(titleimgInfo.path,0,0,375,375);
// ctxx.draw(true);
// }
},
运行成功以后后台打印的参数如下:
http://yanxuan.nosdn.127.net/e866882f7bb9acde7c4e1d00171741f9.jpg
goods.js? [sm]:290 图片已下载成功!10
goods.js? [sm]:292 wxfile://tmp_b4f638cafa7cff4c447e9d979126244a9726478e2cde683c.jpg
goods.js? [sm]:289 http://yanxuan.nosdn.127.net/bf80a04940ae1cd3e6c584d26fdee6ed.jpg
goods.js? [sm]:290 图片已下载成功!30
goods.js? [sm]:292 wxfile://tmp_1e2e49185e8404a6e8654c4c6e92aa135adfeffa0199df12.jpg
goods.js? [sm]:289 http://yanxuan.nosdn.127.net/23947cb71c6c2f9635b53da910ac788d.jpg
goods.js? [sm]:290 图片已下载成功!20
goods.js? [sm]:292 wxfile://tmp_d04d80a9f9bc4ace3cfe7234a70648b1f874b4cc349e23de.jpg
goods.js? [sm]:289 http://yanxuan.nosdn.127.net/5a9050413ef325301e5e5b6bfdcc4b58.jpg
goods.js? [sm]:290 图片已下载成功!0
goods.js? [sm]:292 wxfile://tmp_d81efbbb6b6febe235bf5a1e1b6a4b59fb4d37ee11da027e.jpg
goods.js? [sm]:272 http://yanxuan.nosdn.127.net/e866882f7bb9acde7c4e1d00171741f9.jpg
goods.js? [sm]:273 wxfile://tmp_91b4f6116b0ea84f124f7fb265a1e8acc56a621cc80d16b0.jpg
goods.js? [sm]:272 http://yanxuan.nosdn.127.net/bf80a04940ae1cd3e6c584d26fdee6ed.jpg
goods.js? [sm]:273 wxfile://tmp_b131ae5dfac6abfb427521611e2181e2838cb8d8e85b281d.jpg
goods.js? [sm]:272 http://yanxuan.nosdn.127.net/23947cb71c6c2f9635b53da910ac788d.jpg
goods.js? [sm]:273 wxfile://tmp_fd35884eebde0eb4f7a4893f6a9fec28272b4f01b8b3a5d9.jpg
goods.js? [sm]:272 http://yanxuan.nosdn.127.net/5a9050413ef325301e5e5b6bfdcc4b58.jpg
goods.js? [sm]:273 wxfile://tmp_731528cfa5274a910e509f5b3d276422da580577b7698eb7.jpg
用这个https://developers.weixin.qq.com/community/develop/article/doc/000ac686c5c5506f18b87ee825b013