Javascript结合图像 [英] Javascript combine Images

问题描述

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

I tried everything to get this work but didn't happen. Want a method to combine two images (that they are overlayed somehow).

我尝试了如下所述：使用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从本地存储中获取第一张图像（，如此处所述）像这样：

I get the first image by Base64 from Local Storage (as described here) like this:

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

并且base64字符串如下所示： data：image / png; base64 ，iVBORw0KGgoAAAANS ....

And the base64 String looks like this: data:image/png;base64,iVBORw0KGgoAAAANS....

这会以某种方式破坏这种方法吗？
任何帮助表示赞赏:)我已经花了几个小时而无法弄明白....

Does this somehow break this approach with canvas? Any help is appreciated :) took me already hours and can't figure it out....

推荐答案

修正如下：

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结合图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！