Javascript组合图像

Javascript combine Images

本文关键字：图像 组合图 组合 Javascript      更新时间：2023-09-26

我尝试了所有方法来获得这项工作，但没有发生。想要一个方法来组合两个图像(它们以某种方式叠加)。

我尝试了如下描述:使用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的第一个图像，如下所示:

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

base64字符串看起来像这样:data:image/png;base64,iVBORw0KGgoAAAANS....

这是否在某种程度上打破了canvas的这种方法?任何帮助都是感激的:)花了我已经几个小时，不能弄清楚....

修复如下:

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";
相关文章：