V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
xiaozy
V2EX  ›  JavaScript

多张图片使用 canvas 合成时,有的不显示?

  •  
  •   xiaozy · 2019-11-07 10:38:55 +08:00 · 2430 次点击
    这是一个创建于 1603 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    5 条回复    2019-11-08 15:32:37 +08:00
    userdhf
        1
    userdhf  
       2019-11-07 10:43:48 +08:00
    等全都 onload 再绘制试试?
    难道不会出现 onload 顺序不一致的问题么?
    xdaoo
        2
    xdaoo  
       2019-11-07 10:54:32 +08:00 via iPhone
    base64 的地址不也是 data:吗
    rodjl
        3
    rodjl  
       2019-11-07 12:25:12 +08:00 via iPhone
    base64 不也是 data 开头的吗+1
    xiaozy
        4
    xiaozy  
    OP
       2019-11-08 15:32:07 +08:00
    @rodjl 但除了 data 外啥也没有了,
    xiaozy
        5
    xiaozy  
    OP
       2019-11-08 15:32:37 +08:00
    @userdhf 在 onload 里是可以打印出所有图片地址的。没有跨域图片
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3234 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 14:21 · PVG 22:21 · LAX 07:21 · JFK 10:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.