使用Javascript合并图像

Merge Image using Javascript

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

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

例如，如果你有两个相同大小的矩形。jpg或。png图像文件，你是否可以将它们并排对齐，并在一个新的。jpg或。png图像文件中生成两个图像的合并副本?

你可以使用JavaScript将它们"合并"到一个画布中，并将该画布转换为图像。

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.com/2.png和http://123.com/script.js)在同一域上，否则函数toDataURL()将引发错误。

更新2019/2020+:有一个很棒的npm包merge-images

它的用法非常简单!

import mergeImages from 'merge-images';
 
mergeImages(['/body.png', '/eyes.png', '/mouth.png'])
  .then(b64 => document.querySelector('img').src = b64);
  // data:image/png;base64,iVBORw0KGgoAA...

你可以进一步定制它的定位，不透明度(每个图像)和输出的尺寸!

(我与这个包没有任何关系，我只是浪费了3天让html2canvas工作，然后发现了这个救星!)

Huỳnh Quốc Phong部分正确:

你可以使用画布来合并图像。但它们也可能来自其他领域。只要把图片加载到你的dom。一旦图片被加载(可以用javascript检查，见下文)，你可以在你的画布中使用它们。

var canvas = canvasBuild.getContext('canvasObj');
var img = document.getElementById('mergePic1');
canvas.drawImage(img, 0, 0);

要检查图像是否加载，我建议使用jQuery插件http://desandro.github.io/imagesloaded/-但也可以不使用

我知道这是一个老帖子，但我自己在寻找这个问题的解决方案时偶然发现了它。更重要的是，我希望能够上传应该使用的图像(不需要依赖服务器端逻辑)。

我已经创建了一个小提琴(http://jsfiddle.net/davidwalton/4pjreyfb/6/

如何使用Javascript/HTML制作一个简单的图片上传

然后我在上面添加Huỳnh Quốc Phong的逻辑(使用Javascript合并图像):

HTML: 

<input class="file1" type="file" data-image-selector=".image1" />
<input class="file2" type="file" data-image-selector=".image2" />
<br />
<img class="image1 hidden" alt="medium image 1" />
<img class="image2 hidden" alt="medium image 2" />
<br />
<input class="btn-merge" type="button" value="Merge!" />
<br />
<img class="merged-image hidden" alt="merged image" />
<canvas id="canvas" class="hidden"></canvas>

JS: 

$('.file1, .file2').on('change', function() {
  var reader = new FileReader(),
    imageSelector = $(this).data('image-selector');
  if (this.files && this.files[0]) {
    reader.onload = function(e) {
      imageIsLoaded(e, imageSelector)
    };
    reader.readAsDataURL(this.files[0]);
  }
});
$('.btn-merge').on('click', merge);
function imageIsLoaded(e, imageSelector) {
  $(imageSelector).attr('src', e.target.result);
  $(imageSelector).removeClass('hidden');
};
function merge() {
  var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    imageObj1 = new Image(),
    imageObj2 = new Image();
  imageObj1.src = $('.image1').attr('src');
  imageObj1.onload = function() {
    ctx.globalAlpha = 1;
    ctx.drawImage(imageObj1, 0, 0, 328, 526);
    imageObj2.src = $('.image2').attr('src');;
    imageObj2.onload = function() {
      ctx.globalAlpha = 0.5;
      ctx.drawImage(imageObj2, 15, 85, 300, 300);
      var img = canvas.toDataURL('image/jpeg');
      $('.merged-image').attr('src', img);
      $('.merged-image').removeClass('hidden');
    }
  };
}

此外，它包含了一点透明度，只是为了允许使用两个jpeg。

注意所有图像定位&大小是通过ctx.drawImage()函数管理的。演示将是丑陋的，但它应该证明的概念。:)

希望这是有帮助的!

相关文章：