javascript - 使用 Javascript 合并图像

Question

是否可以使用javascript合并图片？

例如，如果您有 2 个大小相同的矩形 .jpg 或 .png 图像文件，是否可以将其并排对齐并在新的 .jpg 或 .png 中生成两个合并副本图像文件？

Answer 1

您可以使用 JavaScript 将它们“合并”到一个 Canvas 中，并将该 Canvas 转换为图像。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imageObj1 = new Image();
var imageObj2 = new Image();
imageObj1.src = "1.png"
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");
      document.write('<img src="' + img + '" width="328" height="526"/>');
   }
};

出于安全考虑，您的两个图像必须与您的 JavaScript 文件位于同一域中(即 http://123.com/1.png、http://123.png)。 com/2.png 和 http://123.com/script.js)，否则函数 toDataURL() 将引发错误。