Div for canvas

Question

Div for canvas

Navigation

#1 by (1 votes)

0

Hello, I'm having a problem converting a div to canvas, because inside that div has an img, and src contains the COMPLETE url of the image, with http, when it's a normal image that is already on the server, I have no problems , it converts quietly, but when src is with http it takes the whole div but the image it does not recognize, I'm using html2canvas, follow my code:

HTML:

<div id="mesa" style="width:800px; height:800px; float:left; clear:both;">
    <div style="width:800px; height:500px; background:#CCC; float:left;">
        <img src="http://i.imgur.com/kOhhPAk.jpg"width="800" height="500">
    </div>
    <div style="width:800px; height:50px; background:#00F; float:left;">texto</div>
</div>

JAVASCRIPT:

$(document).ready(function(){

                html2canvas($("#mesa"), {
                    onrendered: function(canvas){

                        var imagem = canvas.toDataURL('image/png');

                        var image = new Image();
                        image.src = imagem;
                        $("body").append(image);

                    }
                });

        });

If the image src is an image of the server (eg src="image.jpg"), it looks normal, but if it is src="http://sitepage.com/picture.jpg" then he does not get the picture, why does it happen? I need to get the image that way, from another site ... Is there any solution?

Thank you!

canvas html2canvas

asked by anonymous 18.08.2016 / 17:05

1 answer

How to read return from a java function NullPointerException error when calling a method

score 1 · Answer 1

Images of different domains cause "Taint", just read the README, in fact any LIB you want to use read the entire README, usually there already contains the solutions to the problems, as already described here link

In short you can try to use useCORS like this:

html2canvas(document.getElementById("mesa"), {
    "logging": true, //Habilita os logs
    "useCORS": true
}).then(function(canvas) {
    var img = new Image();

    img.onload = function () {
        img.onload = null;
        document.getElementById("output").appendChild(img);
    };

    img.src = canvas.toDataURL("image/png");
    $("body").append(image);
});

Note that useCORS only tries to load cross-origim, if it does not it will try the proxy.

If it does not work with useCORS you can combine it with a "proxy" (do not confuse with proxy for ISP) or use only the proxy, for example:

html2canvas(document.getElementById("mesa"), {
    "logging": true, //Habilita os logs
    "useCORS": true, //Tenta carregar com crossorigem=anonymous, se não tentará o proxy
    "proxy": "/libs/url-do-proxy.php" //Proxy
}).then(function(canvas) {
    var img = new Image();

    img.onload = function () {
        img.onload = null;
        document.getElementById("output").appendChild(img);
    };

    img.src = canvas.toDataURL("image/png");
    $("body").append(image);
});

Some examples of a proxy that I wrote:

PHP Proxy (html2canvas 0.4 and 0.5 compatible): link
C # proxy : link
Proxy in Python : link (supports any framework)
Proxy in VbScript (for classic asp) : link

Only the PHP proxy is compatible with version 0.5 of the html2canvas, I will soon rewrite the other libs / scripts