CODEWITHSUNDEEP
javascripthtmldomcanvas
cantdutchthis
cantdutchthis

Reputation: 34667

make a client screenshot through canvas

I am trying to create a screenshot of a webpage with html2canvas. I am new to canvas and I think that that is the reason why I cannot get the html2canvas.js library to work right.

Please see, http://jsfiddle.net/cantdutchthis/7sCya/.

The javascript, after loading in the html2canvas.js file, runs the following; 

html2canvas(document.body, {
    onrendered: function (canvas) {
        document.body.appendChild(canvas)
    }
});

The body contains three objects, a paragraph tag, an image with a uri source and a placeholder kitten.

Why is canvas only making a print screen of the paragraph and the uri source, why not the kitten?

Upvotes: 1

Views: 116

Answers (1)

Christoph
Christoph

Reputation: 1340

This is not allowed because of the same-origin policy. It only works if the image has the same protocol and host as the script.

See this updated fiddle with a local image (press run again if you do not see relative image ../../favicon.png one the first load).

You either need a proxy like demonstrated on the html2canvas website or add a special flag to your browser on startup or load the image from a cross-origin resource sharing enabled server like proposed in this answer.

Upvotes: 1

Related Questions