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>
0
我想知道是否有一种方法可以仅使用JavaScript将多个图像组合成一个图像。这是Canvas能够做到的吗?效果可以通过放置来完成,但是您可以将它们组合成一个图像进行下载吗?
2008年10月1日更新:
感谢您的建议,我正在使用jQuery帮助某人在仅js / css的网站上工作,他们希望具有一些MacOS Dock般的图像效果,并且具有彼此重叠的多个图像。我们想出的解决方案只是绝对定位,并在相对定位的父
<div>
上使用效果。合并图像并在单个图像上产生效果会容易得多。然后,我想到了像Picnik这样的在线图像编辑器,想知道是否可能有一个基于浏览器的图像编辑器,它具有仅用JavaScript编写的photoshop功能。我想这可能在将来吗?