Question

我的cordova / Ionic应用程序中有两个相同宽度和高度的透明png文件。我希望将两个png文件组合成一个宽度和高度相同的新png文件，其中一个文件覆盖在另一个文件的顶部。即，一个图像是另一个图像顶部的层。结果必须是透明的png。我怎么能在我的javascript cordova app中做到这一点？

Answer 1

您可以通过将两个图像添加到动态创建的画布中，或者在DOM中但不显示，然后使用画布回读画布来完成此操作。 toDataURL（＆＃34;图像/ PNG＆＃34）。使用画布上的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，您可以使用它来执行任何操作。

如何在Cordova中合并两个透明的png文件

1 个答案: