How can I get screenshot of image using html2canvas?

Question

I am trying to save screenshot of image using html2canvas. Below is my code:

        var a = document.getElementById('a2')
        html2canvas(document.getElementById('a1'), {
            onrendered: function(canvas) {
            var img = canvas.toDataURL("image/jpeg");
            window.open(img);
                    }
        }

However, the code is saving the screenshot for local image. But for the image from external source like : http://europa.promaticstechnologies.com/QuotePic/img/QuotePro/bg1.jpg giving me black screenshot. Please assist.

check it this link may be its useful for use http://stackoverflow.com/questions/10457608/create-screenshot-of-webpage-using-html2canvas-unable-to-initialize-properly — Bhupesh, Apr 20 '17 at 07:00

score 0 · Answer 1 · answered Apr 20 '17 at 09:00

0

To use image from external domain you may want to use crossOrigin attribute and current Date as a parameter to src attribute.

e.g.

var image = document.createElement('img');
image.onload = function () {
// onload callback
}
image.setAttribute('crossOrigin', '');
image.src = url + '?' + new Date().getTime();

Check this for details.

answered Apr 20 '17 at 09:00

Artem Lopatiy

948
5
15

it says image.setAttribute is not a function. – Gagzzz Apr 20 '17 at 09:36

How can I get screenshot of image using html2canvas?

1 Answers1