14

我想知道是否有一种方法可以仅使用 JavaScript 将多个图像组合成一个图像。这是Canvas能够做到的事情吗？效果可以通过定位来完成，但是您可以将它们组合成一个图像以供下载吗？

2008 年 10 月 1 日更新：

感谢您的建议，我正在帮助某人使用 jQuery 在仅 js/css 的网站上工作，他们希望拥有一些类似 MacOS 码头的图像效果，其中多个图像相互叠加。我们提出的解决方案只是绝对定位，并使用<div>相对定位的父级效果。组合图像并在单个图像上创建效果会容易得多。

然后它让我想到了像Picnik这样的在线图像编辑器，并想知道是否可以有一个基于浏览器的图像编辑器，它具有仅用 javascript 编写的 Photoshop 功能。我想这是不可能的，也许在将来？

4

3 回答 3

20

我知道这是一个老问题，并且 OP 找到了一个解决方法，但是如果图像和画布已经是 HTML 页面的一部分，这将起作用。

<img id="img1" src="imgfile1.png">
<img id="img2" src="imgfile2.png">
<canvas id="canvas"></canvas>

<script type="text/javascript">
var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

canvas.width = img1.width;
canvas.height = img1.height;

context.globalAlpha = 1.0;
context.drawImage(img1, 0, 0);
context.globalAlpha = 0.5; //Remove if pngs have alpha
context.drawImage(img2, 0, 0);
</script>

或者，如果您想即时加载图像：

<canvas id="canvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var img1 = new Image();
var img2 = new Image();

img1.onload = function() {
    canvas.width = img1.width;
    canvas.height = img1.height;
    img2.src = 'imgfile2.png';
};
img2.onload = function() {
    context.globalAlpha = 1.0;
    context.drawImage(img1, 0, 0);
    context.globalAlpha = 0.5; //Remove if pngs have alpha
    context.drawImage(img2, 0, 0);
};        

img1.src = 'imgfile1.png';
</script>
于 2013-04-16T02:54:23.573 回答
5

MarvinJ提供了combineByAlpha()方法，其中使用其 alpha 通道组合多个图像。因此，您只需要将图像采用支持透明度的格式，例如 PNG，并使用该方法，如下所示：

Marvin.combineByAlpha(image, imageOver, imageOutput, x, y);

图1：

在此处输入图像描述

图2：

在此处输入图像描述

图3：

在此处输入图像描述

结果：

在此处输入图像描述

可运行示例：

var canvas = document.getElementById("canvas");
image1 = new MarvinImage();
image1.load("https://i.imgur.com/ChdMiH7.jpg", imageLoaded);
image2 = new MarvinImage();
image2.load("https://i.imgur.com/h3HBUBt.png", imageLoaded);
image3 = new MarvinImage();
image3.load("https://i.imgur.com/UoISVdT.png", imageLoaded);

var loaded=0;

function imageLoaded(){
  if(++loaded == 3){
    var image = new MarvinImage(image1.getWidth(), image1.getHeight());
    Marvin.combineByAlpha(image1, image2, image, 0, 0);
    Marvin.combineByAlpha(image, image3, image, 190, 120);
    image.draw(canvas);
  }
}
<script src="https://www.marvinj.org/releases/marvinj-0.8.js"></script>
<canvas id="canvas" width="450" height="297"></canvas>

于 2018-04-03T14:15:37.990 回答
1

我认为您不能或不想使用客户端 javascript 执行此操作（“将它们组合成单个图像以供下载”），因为它在客户端上运行：即使您可以将它们组合成单个图像文件客户端，此时您已经下载了所有单独的图像，因此合并毫无意义。

于 2008-10-01T17:38:44.060 回答