Javascript 无法查看画布与js合并的最终结果_Javascript_Canvas

Javascript 无法查看画布与js合并的最终结果

javascript canvas

Javascript 无法查看画布与js合并的最终结果,javascript,canvas,Javascript,Canvas,我正在合并两个图像，但结果为空，我有以下函数： function merge_avatar_flag(avatar_url,country) { var flag = new Image('allflags/'+ country.toLowerCase().split(' ').join('_') +'.png'); var avatar = new Image(avatar_url); var img = new Image();

我正在合并两个图像，但结果为空，我有以下函数：

function merge_avatar_flag(avatar_url,country) {
          var flag = new Image('allflags/'+ country.toLowerCase().split(' ').join('_') +'.png');
          var avatar = new Image(avatar_url);
          var img = new Image();
          avatar.onload = function() {
            flag.onload = function() {
              var canvas = document.createElement("canvas");
              var ctx = canvas.getContext("2d");
              ctx.drawImage(flag, 0, 0);
              ctx.drawImage(avatar, 0, 0);
              img.src = canvas.toDataURL();
              return img;
            }
          }
        }

结果是这样合并的：

$("#changeAvatar").append(merge_avatar_flag(random_avatar,country));

$("#combine").click(function(){
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");        
    canvas.width=imgs[0].width;
    canvas.height=imgs[0].height;
    ctx.drawImage(imgs[0],0,0);     // imgs[0] is the flag
    ctx.drawImage(imgs[1],0,0);     // imgs[1] is the avatar
    $("#changeAvatar").attr("src",canvas.toDataURL());
});

没有添加任何内容

有什么明显的遗漏吗？

在尝试绘制图像之前，必须完全加载所有图像：

图像全部加载完毕后，您可以将图像组合成一个img元素，如下所示：

$("#changeAvatar").append(merge_avatar_flag(random_avatar,country));

$("#combine").click(function(){
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");        
    canvas.width=imgs[0].width;
    canvas.height=imgs[0].height;
    ctx.drawImage(imgs[0],0,0);     // imgs[0] is the flag
    ctx.drawImage(imgs[1],0,0);     // imgs[1] is the avatar
    $("#changeAvatar").attr("src",canvas.toDataURL());
});

演示：

代码示例：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    #combine{display:none;}
</style>
<script>
$(function(){

    var imageURLs=[];  // put the paths to your images here
    var imagesOK=0;
    var imgs=[];
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stack1/norwayFlag.jpg");
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stack1/avatar.png");
    loadAllImages(start);

    function loadAllImages(callback){
        for (var i=0; i<imageURLs.length; i++) {
            var img = new Image();
            imgs.push(img);
            img.onload = function(){ 
                imagesOK++; 
                if (imagesOK>=imageURLs.length ) {
                    callback();
                }
            };
            img.onerror=function(){alert("image load failed");} 
            img.crossOrigin="anonymous";
            img.src = imageURLs[i];
        }      
    }

    function start(){
        $("#combine").show();
    }

    $("#combine").click(function(){
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");        
        canvas.width=imgs[0].width;
        canvas.height=imgs[0].height;
        ctx.drawImage(imgs[0],0,0);
        ctx.drawImage(imgs[1],0,0);
        $("#changeAvatar").attr("src",canvas.toDataURL());
    });

}); // end $(function(){});
</script>

</head>
<body>
    <button id="combine">Combine</button><br>
    <img id="changeAvatar">
</body>
</html>

我猜一定有一些alpha配置用于合并图像…在上面的代码中，如果在头像之前加载标志，您的代码将不会被命中；在虚拟形象加载之前，您不会定义flag.onload。可能的快速修复方法是在完成化身之前不启动标志加载，或者取消嵌套onload函数，并检查两个函数是否都加载，如果都加载，则运行合并。@Hylianpuffball等等，两个图像都需要在某个点加载，对吗？那么，这有什么关系呢？onload不是简单地检查图像是否被加载吗？@Hylianpuffball我两次都试过了，我发现在这两种情况下onload都没有被触发。奇怪。。。直到现在我才看到你的答案，我在试图编辑我的答案时出错了，尽管有一些小问题。。或者可能网络是..是的..我被重新路由到一个SO页面，表明它正在进行维护。看来你现在又回来了。摇滚乐！！！顺便说一句，这不是一个真正的问题。我重新安排了加载，但还是没用。问题是，当我使用jquery函数进行追加时，还并没有结果。所以append接收的是未定义的。从函数内部执行append有帮助，但显然没有达到可重用函数的目的。