浏览器不会执行部分 javascript 代码答案

【问题标题】：Browser won't execute part of javascript code浏览器不会执行部分 javascript 代码
【发布时间】：2018-07-25 15:56:42
【问题描述】：

我目前正在下载带水印的图像，但发生了一些奇怪的事情。当图像被加水印时，它的 src 是 DataURL，我想替换部分 DataURL 字符串来下载它。但奇怪的是，脚本似乎只是跳过了该步骤并在没有它的情况下执行它。当我通过控制台运行相同的命令来替换部分字符串时，它突然工作得很好。我错过了什么或发生了什么？

代码：

 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;
    }); 
}

div_box 变量只是包含在 div 中的页面的一部分。我正在使用 html2canvas 库。

【问题讨论】：

How do I return the response from an asynchronous call?的可能重复
为什么不添加“调试器；”一行到你的函数的开头，按F12在你的网络浏览器中打开开发者工具并逐步调试它？
你似乎在placeMark中调用异步调用。
@HirasawaYui 在这种情况下，这将“修复”（或更好地隐藏）问题
上帝保佑你，我完全怀念异步。谢谢

标签： javascript string replace download str-replace

【解决方案1】：

看来watermark是异步函数，
尝试在 placeMark 中使用 Promise 并在 placeMark().then 中运行下载
像这样：

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);
            }
        });
    });
}

【讨论】：