我如何合并两个透明的png文件在科尔多瓦

How do I merge two transparent png files in Cordova

本文关键字：文件 png 两个 何合并 合并 透明      更新时间：2023-09-26

我有两个透明的png文件具有相同的宽度和高度在我的cordova/Ionic应用程序。我希望将这两个png文件合并成一个新的png文件相同的宽度和高度与一个文件叠加在另一个文件的顶部。也就是说，一个图像是另一个图像之上的图层。结果必须是透明的png。我怎么能做到这一点在我的javascript cordova应用程序?

可以将这两个图像添加到动态创建的画布中，或者在DOM中添加但未显示的画布，然后使用canvas' toDataURL("image/png")回读画布。使用画布上的2d上下文来加载图像。

类似:

var canvas = document.getElementById('myCanvas'); // or create one just don't display it
var ctx = canvas.getContext('2d');
var image1 = '<image url>';
var image2 = '<image url>';
var image = new Image();
var compositeImage;
image.src = image1;
ctx.drawImage(image, 0, 0);
image = new Image();
image.src = image2;
ctx.drawImage(image, 0, 0);
compositeImage = canvas.toDataURL("image/png");

compositeImage然后有一个你的合成图像的数据URL，你可以用它来做任何事情。

相关文章：