Div for canvas

Asked

Viewed 1,066 times

0

Hello, I’m having a problem turning a div into canvas, because inside this div has an img, and src contains the FULL image url, with http, when it is 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 am 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);

                    }
                });

        });

repeating, if the image src is an image of the server (e.g., src="image.jpg") it takes normal, but if it is src="http://outrosite.com.br/imagem.jpg" then it does not take the image, because it happens ? I need to get the image this way, from another site... Is there any solution ?

thank you!

canvas html2canvas

  • This must be a security error... have you seen the console? Generally your site/domain is not allowed to cross the other site because of settings, even on . htaccess.

  • So on the console there is no error, and on . htaccess there is nothing blocking tbm :/

  • So there’s a few more clues?

  • I saw something about cross-Omain, about putting crossDomain = "Anonymous", but I don’t know where to put it, I tried to put it in some places, but even so n worked

1 answer

1

Images of different domains cause the "Taint", just read the README, in fact any LIB you want to use read the entire README, usually there already contain the solutions to the problems, as already described here https://github.com/niklasvh/html2canvas#how-does-it-work

In short you can try to use the useCORS thus:

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 the useCORS only tries to load with cross-origim, if it fails it will try the proxy.

If it does not work with useCORS you can combine with a "proxy" (do not confuse it with proxy for ISP) or use proxy only, 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 proxy I wrote:

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

Browser other questions tagged canvas html2canvas

You are not signed in. Login or sign up in order to post.