我想知道是否有一种方法可以仅使用 JavaScript 将多个图像组合成单个图像。这是 Canvas 能够做到的吗?效果可以通过定位来完成,但是可以将它们组合成单个图像进行下载吗?
2008 年 10 月 1 日更新:
感谢您的建议,我正在帮助某人使用 jQuery 在仅 js/css 的网站上工作,他们希望拥有一些类似于 MacOS 码头的图像效果,其中多个图像相互重叠。我们提出的解决方案只是绝对定位,并在父级上使用效果<div>
相对定位。组合图像并在单个图像上创建效果会容易得多。
然后它让我想到了在线图像编辑器,例如Picnik http://www.picnik.com/并想知道是否有一个基于浏览器的图像编辑器,具有仅用 javascript 编写的 Photoshop 功能。我想这不可能,也许将来?
我知道这是一个老问题,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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)