Question

我正在合并两张图片，但结果是空的，我有以下功能：

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));

什么都没有添加。

我在这里找不到任何明显的东西？

Answer 1

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

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

$("#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());
});

演示：http://jsfiddle.net/m1erickson/m2DWP/

enter image description here

代码示例：

<!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>

无法看到canvas与js合并的最终结果

1 个答案: