我有 N 多图需要与另一张图合成一张 所以我把图片存在一个数组里
var img = []; for(var i = 0; i < $('.pic').length; i++){ img.push($('.pic').eq(i).attr('src')); canvasit(i,img); //为了方便使用,我把合成放在函数中进行... } //开始绘制 function canvasit(i,img){ var pic = new Image(); var code = new Image(); var canvas = document.createElement('canvas'); var ctx = canvas.getContext("2d"); pic.src = img[i]; pic.Onload= function(){ ctx.drawImage(pic,0,0); code.src = '另一张需要合成的图片地址'; code.Onload= function(){ ctx.drawImage(code,0,0); var imgs = document.createElement('img'); imgs.src = canvas.toDataURL("image/png"); document.body.appendChild(imgs); } } }
代码如上所示,图片若干张,很多。每张都需要与另一张图片合成绘制,通过以上代码可以实现,但问题是,有的能够显示,有的显示不出来,查看代码,不显示的 img 里的 src 地址为 data:,显示正常的是 base64 的地址。已经研究好长时间啦,不知道啥问题。请问该如何解决呢?如果您知道还望能够给予帮助,非常感谢!~
1 userdhf 2019-11-07 10:43:48 +08:00 等全都 onload 再绘制试试? 难道不会出现 onload 顺序不一致的问题么? |
2 xdaoo 2019-11-07 10:54:32 +08:00 via iPhone base64 的地址不也是 data:吗 |
3 rodjl 2019-11-07 12:25:12 +08:00 via iPhone base64 不也是 data 开头的吗+1 |