0

currently I am making a download button on my page via html2canvas, which I successfully got working. But now I want to add a watermark to it before I download it. After a quick google search the watermarkjs library popup, which adds a watermark to image, but I want to add it to a dataURL or canvas before I transform it. Is there a way to do it?

My not functional code:

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

    });

}
Tajlang
  • 41
  • 1
  • 5
  • Post your full code – Vinay Jul 23 '18 at 15:31
  • Well, there isn't much more to it ... the div_box is a section of a page to screenshot and the function is called by button. And naturally the link to libraries. – Tajlang Jul 23 '18 at 15:59
  • Fine, I'm not sure though but just look how you can convert dataurl to object URL then try passing it to watermark.Hint: [createObjectURL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL). – Vinay Jul 23 '18 at 16:17
  • Ok, I will try it, thanks for advice. – Tajlang Jul 23 '18 at 16:23

0 Answers0