有一些 png 图像：其中 1 个不透明，其他 - 是透明的。 所有这些都是 Base64 字符串。
需要相互重叠，将重叠的图像转换为单图并返回结果单图的Base64字符串。 需要通过 iavascript 来完成，并支持主要浏览器：IE、Edge、Opera、Chrome、Firefox、Safary。 没有必要全部显示！！ 只需要转换和返回！！
然后它必须显示在控制台或在其他 JavaScript 函数中使用。
为了实现它，我使用canvas元素 - 以编程方式创建它并使用drawImage：
<html>
<head>
<meta charset="utf-8">
<title>Тест 93 !</title>
</head>
<body onload="init()">
<h1>Test 95 !</h1>
<script type="text/javascript">
function init() {
const layer1Data = "data:image/png;base64,...";
const layer2Data = "data:image/png;base64,...";
const layer3Data = "data:image/png;base64,...";
var single = layers2single(710, 750, layer1Data, layer2Data, layer3Data);
console.log(single);
}
function layers2single(w, h, L11, L12, L13) {
var layers, ctx;
var img1, img2, img3, img4, img5, img6;
var dataURL;
layers = document.createElement("canvas");
layers.class = "canvas";
layers.width = w;
layers.height = h;
ctx = layers.getContext("2d");
img1 = new Image();
img1.onload = function() {
ctx.drawImage(img1, 0, 0);
};
img1.src = L11;
img2 = new Image();
img2.onload = function() {
ctx.drawImage(img2, 0, 0);
};
img2.src = L12;
img3 = new Image();
img3.onload = function() {
ctx.drawImage(img3, 0, 0);
};
img3.src = L13;
dataURL = layers.toDataURL();
return dataURL;
}
</script>
</body>
</html>
但是要么返回空 dataURL，要么在 Chrome、Edge、Opera 中，重新加载页面后返回非空 dataURL，但即使重新加载后，有时也可能为空。
如何使其在 IE、Edge、Opera、Chrome、Firefox 下稳定工作？
正如 CBroe 所指出的，您遇到了时间问题。负责组合图像的主要功能 -
layers2singlelayers.toDataURL() img1 = new Image();
img1.onload = function() {
ctx.drawImage(img1, 0, 0);
};
img1.src = L11;
img2 = new Image();
img2.onload = function() {
ctx.drawImage(img2, 0, 0);
};
img2.src = L12;
img3 = new Image();
img3.onload = function() {
ctx.drawImage(img3, 0, 0);
};
img3.src = L13;
dataURL = layers.toDataURL();
不幸的是，事情并没有按顺序发生。因此有时可能会发生
onloadtoDataUrlfunction loadImage(src) {
return new Promise((resolve, reject) => {
let img = new Image();
img.onload = () => resolve(img);
img.onerror = reject;
img.src = src;
});
}
async function layers2single(w, h, L11, L12, L13) {
var layers, ctx;
var img1, img2, img3, img4, img5, img6;
var dataURL;
layers = document.createElement("canvas");
layers.class = "canvas";
layers.width = w;
layers.height = h;
ctx = layers.getContext("2d");
img1 = await loadImage(L11);
ctx.drawImage(img1, 0, 0);
img2 = await loadImage(L12);
ctx.drawImage(img2, 0, 0);
img3 = await loadImage(L13);
ctx.drawImage(img3, 0, 0);
dataURL = layers.toDataURL();
return dataURL;
}