Browser won't execute part of javascript code

Question

I am currently working on a download of a watermarked image, and something strange is happening. When the image is watermarked it's src is DataURL and I want to replace part of the DataURL string to download it. But strangely the script just seems to skip that step and execute it without it. When I run the same command to replace part of the string through the console it suddenly works just fine. Am I missing something or what is happening?

Code:

 var watermarkImage = 'https://pravdaovode.cz/wp-content/uploads/2018/07/vodoznak.png';
    var afterMark = "";

    function getScreen() {
        html2canvas(div_box).then(function(canvas) {  
            console.log(canvas.toDataURL());
            var blob = dataURItoBlob(canvas.toDataURL());
            placeMark(blob);

            if ('msToBlob' in canvas) {                
            blob = dataURItoBlob(afterMark);
            navigator.msSaveBlob(blob, 'pravda_o_vode_cenova_mapa.jpg');
        } 

            else {                 
                afterMark = afterMark.replace("image/png", "image/octet-stream");               

                var a = document.createElement('a');
                    a.setAttribute('href', afterMark);
                    a.setAttribute('target', '_blank');
                    a.setAttribute('download', 'pravda_o_vode_cenova_mapa.png');
                    a.style.display = 'none';
                document.body.appendChild(a);
                    a.click();
                document.body.removeChild(a);
            }

        });

    }

function dataURItoBlob(dataURI) {    
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {type:mimeString});
}

function placeMark(blobImage) {
  watermark([blobImage, watermarkImage])
    .image(watermark.image.center())
    .then(function (img) {      
      afterMark = img.src;
    }); 
}

The div_box variable is just part of the page enclosed in div. And I am using the html2canvas library.

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Andreas, Jul 25 '18 at 16:00
Why don't you add "debugger;" line to the beginning of your functions, press F12 to open developer tools in your web browser and debug it step by step? — Hirasawa Yui, Jul 25 '18 at 16:02
@HirasawaYui This would "fix" (or better hide) the problem in this case — Andreas, Jul 25 '18 at 16:14

score 0 · Answer 1 · answered Aug 01 '18 at 10:08

It seems watermark is async function,
try use Promise in placeMark and run download in placeMark().then
like this:

function placeMark(blobImage) {
    return new Promise((resolve, reject) => {
        watermark([blobImage, watermarkImage])
            .image(watermark.image.center())
            .then(function(img) {
                afterMark = img.src;
                resolve(true);
            });
    })
}

function getScreen() {
    html2canvas(div_box).then(function(canvas) {
        console.log(canvas.toDataURL());
        var blob = dataURItoBlob(canvas.toDataURL());
        placeMark(blob).then((item) => {
            if ('msToBlob' in canvas) {
                blob = dataURItoBlob(afterMark);
                navigator.msSaveBlob(blob, 'pravda_o_vode_cenova_mapa.jpg');
            } else {
                afterMark = afterMark.replace("image/png", "image/octet-stream");

                var a = document.createElement('a');
                a.setAttribute('href', afterMark);
                a.setAttribute('target', '_blank');
                a.setAttribute('download', 'pravda_o_vode_cenova_mapa.png');
                a.style.display = 'none';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            }
        });
    });
}

Browser won't execute part of javascript code

1 Answers1