合并图像使用Javascript

是否有可能使用JavaScript合并的图片?

例如,如果你有2个长方形.jpg或相同尺寸的图像。PNG文件,是有可能,你可以边对齐一边,在一个新的.jpg或.png图像文件产生两者的合并副本?

--------------解决方案-------------

您可以使用JavaScript来“合并”他们为一个画布,画布即转换为图像。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imageObj1 = new Image();
var imageObj2 = new Image();
imageObj1.src = "1.png"
imageObj2.src = "2.png";
imageObj1.onload = function() {
ctx.drawImage(imageObj1, 0, 0, 328, 526);
imageObj2.onload = function() {
ctx.drawImage(imageObj2, 15, 85, 300, 300);
var img = c.toDataURL("image/png");
document.write('<img src="' + img + '" width="328" height="526"/>');
}
};

由于安全原因,你的两个图像必须是与你的JavaScript文件相同的域(即

和http://123.com/script.js)否则函数toDataURL()将上升一个错误。

编辑:更正缺少的败者组。

不,你不能这样做。

随着一些CSS / HTML魔法可以使再出现合并。



如果你希望他们居然合并了,我建议的Photoshop。

或者,你可以有一些服务器代码为你创建和合并图像。

您可以使用Pixastic JavaScript库结合起来,过滤和混合多个图像。 http://www.pixastic.com/lib/docs/actions/blend/

但这只是在那些支持画布元素的现代浏览器的工作。 不幸的是IE8不支持这一点。

黄长发富国海防是部分正确的:

您可以使用画布合并图像。 但他们可以从其他领域的起源。 只加载DOM中的图片。 一旦照片将被加载(可以用JavaScript来检查,见下文),你可以在你的画布使用它们。

var canvas = canvasBuild.getContext('canvasObj');
var img = document.getElementById('mergePic1');
canvas.drawImage(img, 0, 0);

要检查图像加载,我会建议使用jQuery插件http://desandro.github.io/imagesloaded/ - 但它也可以不完成。

分类:JavaScript的 时间:2015-03-15 人气:0
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 1.097 (s). 10 q(s)