多张图片使用canvas合成时，有的不显示？

我有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的地址。已经研究好长时间啦，不知道啥问题。请问该如何解决呢？如果您知道还望能够给予帮助，非常感谢！~

阅读 2.6k

<!DOCTYPE html> <html> <body> <script> const imgList = ['./1.png', './2.jpg']; for (let i = 0; i < imgList.length; i++) { canvasit(imgList[i]); } //开始绘制 function canvasit(img) { const pic = new Image(); const code = new Image(); const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); pic.src = img; pic.onload = function() { ctx.drawImage(pic, 0, 0); code.src = './qr.png'; code.onload = function() { ctx.drawImage(code, 0, 0); const imgNew = document.createElement('img'); imgNew.src = canvas.toDataURL('image/png'); document.body.appendChild(imgNew); }; }; } </script> </body> </html>

多张图片使用canvas合成时，有的不显示？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？