html2canvas结合watermark.js

时间:2018-07-23 14:26:28

标签: javascript html2canvas watermark

目前,我正在通过html2canvas在页面上创建一个下载按钮,该按钮已成功运行。但是现在我想在下载之前为其添加水印。谷歌快速搜索后,watermarkjs库弹出窗口向图像添加了水印,但是我想在转换之前将其添加到dataURL或canvas中。有办法吗?

我的非功能性代码:

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

function getScreen() {
    html2canvas(div_box).then(function(canvas) {
        if ('msToBlob' in canvas) {
        var blob = canvas.msToBlob();
        navigator.msSaveBlob(blob, 'pravda_o_vode_cenova_mapa.jpg');
    } 

        else {
            var a = document.createElement('a');
                a.setAttribute('href', watermark([canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream"), watermarkImage]));
                a.setAttribute('target', '_blank');
                a.setAttribute('download', 'pravda_o_vode_cenova_mapa.jpg');
                a.style.display = 'none';
            document.body.appendChild(a);
                a.click();
            document.body.removeChild(a);
        }

    });

}

0 个答案:

没有答案