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

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

  •  
  •   xiaozy · 39 天前 · 572 次点击
    这是一个创建于 39 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我有 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
        1
    userdhf   39 天前
    等全都 onload 再绘制试试?
    难道不会出现 onload 顺序不一致的问题么?
        2
    xdaoo   39 天前 via iPhone
    base64 的地址不也是 data:吗
        3
    rodjl   39 天前 via iPhone
    base64 不也是 data 开头的吗+1
        4
    xiaozy   38 天前
    @rodjl 但除了 data 外啥也没有了,
        5
    xiaozy   38 天前
    @userdhf 在 onload 里是可以打印出所有图片地址的。没有跨域图片
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2654 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 34ms · UTC 14:32 · PVG 22:32 · LAX 06:32 · JFK 09:32
    ♥ Do have faith in what you're doing.