如何使用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.

Answer 1

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

eg

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

Check this for details.