使用Javascript合并图像
image-manipulation
image-processing
javascript
5
0

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

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

参考资料:
Stack Overflow
收藏
评论
共 5 个回答
高赞 时间 活跃

您可以使用Pixastic JavaScript库来组合,过滤和混合多个图像。 http://www.pixastic.com/lib/docs/actions/blend/

但这仅在支持Canvas元素的现代浏览器中有效。不幸的是IE8不支持此功能。

收藏
评论

HuỳnhQuốcPhong部分正确:

您可以使用“画布”合并图像。但是它们可以源自其他域。只需将图片加载到您的dom中即可。图片载入后(可以使用javascript进行检查,请参见下文),您可以在画布中使用它们。

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

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

收藏
评论

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正常工作,然后找到了这个救星!)

收藏
评论

我知道这是一篇旧文章,但是我自己碰到了这个问题,寻找解决方案。更重要的是,我希望能够上传应使用的图像(无需依赖服务器端逻辑)。

我在此基础上创建了一个小提琴( http://jsfiddle.net/davidwalton/4pjreyfb/6/ ):

如何使用Javascript / HTML上传简单的图片

然后,我在上面添加了HunnhQuốcPhong的逻辑( 使用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()函数进行管理的。该演示将很丑陋,但是它可以证明这个概念。 :)

希望这会有所帮助!

收藏
评论

您可以使用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.pnghttp://123.com/2.pnghttp://123.com/script.js ),否则函数toDataURL()会引发错误。

收藏
评论
新手导航
  • 社区规范
  • 提出问题
  • 进行投票
  • 个人资料
  • 优化问题
  • 回答问题

关于我们

常见问题

内容许可

联系我们

@2020 AskGo
京ICP备20001863号