您可以使用JavaScript将多张图片合并为一张吗?
image-manipulation
image-processing
javascript
6
0

我想知道是否有一种方法可以仅使用JavaScript将多个图像组合成一个图像。这是Canvas能够做到的吗?效果可以通过放置来完成,但是您可以将它们组合成一个图像进行下载吗?

2008年10月1日更新:

感谢您的建议,我正在使用jQuery帮助某人在仅js / css的网站上工作,他们希望具有一些MacOS Dock般的图像效果,并且具有彼此重叠的多个图像。我们想出的解决方案只是绝对定位,并在相对定位的父<div>上使用效果。合并图像并在单个图像上产生效果会容易得多。

然后,我想到了像Picnik这样的在线图像编辑器,想知道是否可能有一个基于浏览器的图像编辑器,它具有仅用JavaScript编写的photoshop功能。我想这可能在将来吗?

参考资料:
Stack Overflow
收藏
评论
共 3 个回答
高赞 时间 活跃

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>
收藏
评论

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

收藏
评论

我知道这是一个老问题,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>
收藏
评论
新手导航
  • 社区规范
  • 提出问题
  • 进行投票
  • 个人资料
  • 优化问题
  • 回答问题

关于我们

常见问题

内容许可

联系我们

@2020 AskGo
京ICP备20001863号