0

Olá, estou tendo um problema ao transformar uma div em canvas, pois dentro dessa div tem uma img, e o src contem a url COMPLETA da imagem, com http, quando é uma imagem normal que ja esta no servidor não tenho problemas, ele converte tranquilamente, mas quando o src está com http ele pega a div inteira mas a imagem ele não reconhece, estou usando o html2canvas, segue meu código:

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);

                    }
                });

        });

repetindo, se o src da imagem for uma imagem do servidor (ex: src="imagem.jpg") ele pega normal, mas se for src="http://outrosite.com.br/imagem.jpg" ai ele não pega a imagem, pq acontece isso ? preciso pegar a imagem desse jeito, de outro site... Tem alguma solução ?

obrigado!

4
  • Isso deve ser erro de segurança... já viu o console? Geralmente seu site/domínio não está permitido à atravessar o outro site por causa de configurações, até mesmo no .htaccess.
    – user37626
    Commented 19/08/2016 às 10:57
  • Então, no console não da nenhum erro, e no .htaccess não tem nada bloqueando tbm :/ Commented 19/08/2016 às 11:05
  • Então, tem mais algumas pistas?
    – user37626
    Commented 19/08/2016 às 11:11
  • Eu vi algo sobre cross-domain, sobre colocar crossDomain = "Anonymous", mas n sei onde colocar isso, ja tentei colocar em alguns lugares, mas mesmo assim n funcionou Commented 19/08/2016 às 11:12

1 Resposta 1

1

Imagens de dominios diferentes causam o "Taint", basta ler o README, na verdade qualquer LIB que pretenda usar leia o README inteiro, geralmente lá já contem as soluções para os problemas, como já descrito aqui https://github.com/niklasvh/html2canvas#how-does-it-work

Resumindo você pode tentar usar o useCORS assim:

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 que o useCORS só tenta carregar com cross-origim, se não conseguir ele irá tentar o proxy.

Se não funcionar com useCORS você pode combinar com um "proxy" (não confunda com proxy para ISP) ou usar somente o proxy, por exemplo:

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);
});

Alguns exemplos de proxy que eu escrevi:

Somente o proxy em PHP é compatível com a versão 0.5 do html2canvas, em breve irei reescrever as demais libs/scripts

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .