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

【问题标题】：How do I merge two transparent png files in Cordova如何在 Cordova 中合并两个透明的 png 文件
【发布时间】：2015-12-27 12:35:31
【问题描述】：

我的 cordova/Ionic 应用中有两个宽度和高度相同的透明 png 文件。我希望将这两个 png 文件组合成一个具有相同宽度和高度的新 png 文件，其中一个文件覆盖在另一个文件的顶部。即，一个图像是另一个图像之上的一层。结果必须是透明的 png。如何在我的 javascript cordova 应用程序中执行此操作？

【问题讨论】：

这听起来与stackoverflow.com/questions/17859993/… 非常相似，不用担心cordova，只需使用html、css 和javascript
不，实际上我想将结果输出为透明的 png 文件，我将保存在 cordova 应用程序的文档文件夹中。您引用的问题更多是关于显示合并结果。我不太关心显示。

标签： javascript cordova image-processing imagemagick ionic

【解决方案1】：

您可以通过将这两个图像添加到您动态创建的画布中，或者在您的 DOM 中但未显示，然后使用画布的 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，你可以用它来做任何事情。

【讨论】：