Question

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

我尝试过这里描述的内容：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");
   }
};

但它不起作用。

我通过Base64从本地存储（as described here）获得第一张图像，如下所示：

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

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

这会以某种方式破坏这种方法吗？感谢任何帮助:)已经花了我几个小时，无法弄清楚....

Answer 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";

Javascript结合图像

1 个答案: