OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Convert overlapped png images to a single one with returning Base64 on javascript, multi browser suport?

  • Thread starter Thread starter CpServiceSPb
  • Start date Start date
C

CpServiceSPb

Guest
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:

Code:
<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 ?

<p>There are some png images: 1 of them is not transparent, other - are transparent.
All of it are at Base64 string.</p>
<p>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 !!</p>
<p>Then it has to be shown at console or to be used in in other javascript functions.</p>
<p>To reach it I use canvas element - create it programmatically and use drawImage:</p>
<pre><code><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>
</code></pre>
<p>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.</p>
<p>How is to make it stable working in IE, Edge, Opera, Chrome, Firefox ?</p>
 

Latest posts

Top