Question

我目前正在下载带水印的图像，正在发生一些奇怪的事情。给图像加水印后，其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库。

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

浏览器不会执行部分JavaScript代码

1 个答案: