There are some png images: 1 of them is not transparent, other – are transparent.
All of it are at Base64 string.
It is necessary to overlap each other, convert overlapped images to monolithic image and return Base64 strig of the resulted single image.
It is necessary to do by iavascript with supporting of main browsers: IE, Edge, Opera, Chrome, Firefox, Safary.
It is NOT necessary to display it all !!
Only conversion and returning is necessary !!
Then it has to be shown at console or to be used in in other javascript functions.
To reach it I use canvas element – create it programmatically and use 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>
But either empty dataURL is returned or in Chrome, Edge, Opera, not empty dataURL is returned after reload page but even after reload, it can be empty from time to time.
How is to make it stable working in IE, Edge, Opera, Chrome, Firefox ?