您可以使用JavaScript将多个图像组合成一个图像吗?

时间:2008-10-01 17:30:35

标签: javascript image-processing image-manipulation

我想知道是否有办法仅使用JavaScript将多个图像合并为一个图像。这是Canvas能够做到的吗?可以通过定位来完成效果,但是您可以将它们组合成单个图像以供下载吗?

2008年10月1日更新:

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

然后让我想到了像Picnik这样的在线图像编辑器,并想知道是否有一个基于浏览器的图像编辑器,其中只有用javascript编写的photoshop功能。我想这可能不是一种可能,也许是将来?

6 个答案:

答案 0 :(得分:17)

我知道这是一个老问题,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>

答案 1 :(得分:3)

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

答案 2 :(得分:3)

你可以使用Pixastic。混合示例如下: http://www.pixastic.com/lib/docs/actions/blend/

答案 3 :(得分:2)

MarvinJ提供方法 combineByAlpha(),其中使用Alpha通道组合多个图像。因此,您只需要以支持透明度的格式(如PNG)生成图像,并使用该方法,如下所示:

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

<强> image1的:

enter image description here

<强> IMAGE2:

enter image description here

<强>图像3:

enter image description here

<强>结果:

enter image description here

可运行的示例:

&#13;
&#13;
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);
  }
}
&#13;
<script src="https://www.marvinj.org/releases/marvinj-0.8.js"></script>
<canvas id="canvas" width="450" height="297"></canvas>
&#13;
&#13;
&#13;

答案 4 :(得分:0)

如果它们是一对JPG,在你的控制下,大小是两个方向的8的倍数,可能。这不需要重新编码,只需重新调整像素块。

答案 5 :(得分:0)

嗯,问题是你无法从JavaScript“下载”,它没有多大意义,因为JavaScript在客户端运行,只有从服务器下载才有意义。你能告诉我们你想要实现的目标,你的最终目标吗?我们或许可以提出更好的建议。