Javascript 合并图像答案

【问题标题】：Javascript combine ImagesJavascript 合并图像
【发布时间】：2015-11-11 04:11:19
【问题描述】：

我尝试了一切来完成这项工作，但没有成功。想要一种方法来组合两个图像（它们以某种方式重叠）。

我按照这里的描述尝试过：Merge Image using Javascript

使用此代码：

var c=document.createElement("canvas");
c.width = 100;
c.height = 100;
var ctx=c.getContext("2d");
var imageObj1 = new Image();
imageObj1.src = base64String;
var imageObj2 = new Image();
imageObj1.onload = function() {
   ctx.drawImage(imageObj1, 0, 0, 328, 526);
   imageObj2.src = "2.png";
   imageObj2.onload = function() {
      ctx.drawImage(imageObj2, 15, 85, 300, 300);
      var img = c.toDataURL("image/png");
   }
};

但它不起作用。

我从本地存储 (as described here) 获得了 Base64 的第一张图片，如下所示：

var img = new Image();
img.src = base64String;

base64 字符串如下所示：data:image/png;base64,iVBORw0KGgoAAAANS....

这是否会以某种方式打破画布的这种方法？任何帮助表示赞赏:) 花了我几个小时，无法弄清楚....

【问题讨论】：

什么不起作用？您还确定100x100 画布大小吗？因为您正在尝试绘制 328x526 大小的图像。
我认为imageObj2.src = "2.png";可能不是一个有效的src，检查dev-tool看imageObj2是否加载成功。
也试过更大的尺寸。这只是一个例子。它不会生成“img”。因此，如果我想将 img 添加到 HTML 中的 img-Tag 中，您将什么也看不到。如果我只添加 imageObj1（由本地存储中的 base64 创建），则显示此图像以及仅显示 imageObj2。但是将它们组合并写回“img”是行不通的
@fuyushimoya 是。如上面我的回答并在我的应用程序中给出正确的路径是：imageObj2.src = "www/img/dummy-pic.png";
然后在设置src之前尝试移动onload。您使用 dataUrl，它可能在 onload 处理程序注册时已经加载，因此不会触发。或者你可以使用if(image.complete) {call the hander yourself} else {image.onload = handler}。

标签： javascript image merge

【解决方案1】：

这样修复它：

var c = document.createElement('canvas');
c.width = 82;
c.height = 75;
var ctx = c.getContext("2d");
var imageObj2 = new Image();
imageObj2.onload = function (){
    ctx.drawImage(imageObj2, 0, 0, 82, 75);
    var imageObj1 = new Image();
    imageObj1.onload = function (){
        imageObj1.style.objectFit = "cover";
        ctx.drawImage(imageObj1, 14, 4, 53, 53);
    };
    imageObj1.src = data.elephant;
};
imageObj2.src = "2.png";

【讨论】：