最后还是用笨办法写了若干个Canvas解决问题,生成的图片写在不同的Canvas上
canvasToTempFilePath是否有问题?为什么不能循环调用?挺奇怪的问题?本人前台写个根据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
2020-02-19