make a client screenshot through canvas

Question

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?

Answer 1

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 .