您可以使用JavaScript将多个图像组合成一个图像吗？ [英] Can you combine multiple images into a single one using JavaScript?

问题描述

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

I am wondering if there is a way to combine multiple images into a single image using only JavaScript. Is this something that Canvas will be able to do. The effect can be done with positing, but can you combine them into a single image for download?

2008年10月1日更新

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

Thanks for the advice, I was helping someone work on a js/css only site, with jQuery and they were looking to have some MacOS dock-like image effects with multiple images that overlay each other. The solution we came up with was just absolute positioning, and using the effect on a parent <div> relatively positioned. It would have been much easier to combine the images and create the effect on that single image.

然后我想到了像 Picnik ，想知道是否有基于浏览器的图像编辑器，其中只有javascript编写的photoshop功能。我想这可能是未来的可能吗？

It then got me thinking about online image editors like Picnik and wondering if there could be a browser based image editor with photoshop capabilities written only in javascript. I guess that is not a possibility, maybe in the future?

推荐答案

我知道这是一个老问题，OP发现了解决方法，但如果图像和画布已经是HTML页面的一部分，这将有效。

I know this is an old question and the OP found a workaround solution, but this will work if the images and canvas are already part of the HTML page.

<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>

或者，如果你想动态加载图片：

Or, if you want to load the images on the fly:

<canvas id="canvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
Image img1 = new Image();
Image 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>

这篇关于您可以使用JavaScript将多个图像组合成一个图像吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！