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

Question

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

Answer 1

图片地址有跨域的吗？canvas中一但绘制了跨域的图片，就无法用toDataURL()获取图片数据了。

Answer 2

好像有，但是我加了 `image.crossOrigin = 'Anonymous'`好像不起作用，有啥办法解决吗？

Answer 3

好像有，但是我加了 `image.crossOrigin = 'Anonymous'`好像不起作用，有啥办法解决吗？
你只是自己（请求方）单方面的设置image.crossOrigin没用。图片所在的服务器（被请求方）也要设置图片的http响应头（Access-Control-Allow-Origin:）才行。

Answer 4

            _convertImageToSprite: function (img_arr, func) {
                var base64 = [];
                var c = document.createElement('canvas'),
                    ctx = c.getContext('2d');
                c.width = 133;
                c.height = 483;
                ctx.rect(0, 0, c.width, c.height);
                ctx.fillStyle = '#fff';
                ctx.fill();                function drawing(arr, n) {
                    if (n < arr.length) {
                        var _src = arr[n];
                        var img = new Image();
                        img.crossOrigin = 'anonymous';
                        img.src = _src;
                        img.onload = function () {
                            0 == n && ctx.drawImage(img, 3, 18, 123, 123);
                            1 == n && ctx.drawImage(img, 3, 178, 123, 123);
                            2 == n && ctx.drawImage(img, 3, 340, 123, 123);
                            drawing(arr, n + 1); // 递归
                        };
                        img.onerror = function (res) {
                            console.log(res);
                        }
                    } else {
                        base64.push(c.toDataURL("image/png"));
                        func(base64);
                    }
                }                drawing(img_arr, 0);
            },
给你一段我的代码做参考,  你这里面的load图片处理有问题.