我有两个具有不同 src url 的 html img 对象。我想合并这两张图片(使用画布),并创建一个合并的 img 对象。
这可能吗?如何?
原文由 Pauly Dee 发布,翻译遵循 CC BY-SA 4.0 许可协议
我有两个具有不同 src url 的 html img 对象。我想合并这两张图片(使用画布),并创建一个合并的 img 对象。
这可能吗?如何?
原文由 Pauly Dee 发布,翻译遵循 CC BY-SA 4.0 许可协议
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img1 = loadImage('http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png', main);
var img2 = loadImage('http://introcs.cs.princeton.edu/java/31datatype/peppers.jpg', main);
var imagesLoaded = 0;
function main() {
imagesLoaded += 1;
if(imagesLoaded == 2) {
// composite now
ctx.drawImage(img1, 0, 0);
ctx.globalAlpha = 0.5;
ctx.drawImage(img2, 0, 0);
}
}
function loadImage(src, onload) {
// http://www.thefutureoftheweb.com/blog/image-onload-isnt-being-called
var img = new Image();
img.onload = onload;
img.src = src;
return img;
}
根据需要进行调整。 :)
原文由 Juho Vepsäläinen 发布,翻译遵循 CC BY-SA 4.0 许可协议
2 回答1.5k 阅读✓ 已解决
2 回答909 阅读✓ 已解决
4 回答1.6k 阅读
1 回答1.1k 阅读✓ 已解决
1 回答918 阅读✓ 已解决
2 回答795 阅读
1 回答793 阅读✓ 已解决
您可以在画布上绘制这两个图像,并将它们与您喜欢的任何叠加模式组合起来。要从画布中获取位图数据,您可以使用“toDataURL”。请注意,两张图片都应来自与页面相同的域,否则出于安全原因,您对像素数据的访问将被阻止。