Html2canvas: Imagens de domínio cruzado não renderizadas (sem CORS ou proxy)

Talvez você deva usar useCORS ptoperty como verdadeira, destinada a conteúdo da web de domínio cruzado

Usar useCORS falha na captura de imagem. O problema que estou tendo é estranho, pois não falha em obter a imagem do domínio externo, apenas não a renderiza na captura.

Você tentou minha correção? https://github.com/niklasvh/html2canvas/pull/554

Provavelmente deve definir allowTaint como verdadeiro, mas então você não pode exportar o resultado renderizado.

Não entendo por que não usar userCORS ou proxy ... Eles foram criados apenas para esses problemas.

@brcontainer Como eles não funcionam na versão mais recente, veja minha correção: https://github.com/niklasvh/html2canvas/pull/554

@ Cristy94 Claro !! Ótima correção! Obrigado!

Olá @ Cristy94 ,

Estou buscando as imagens do CMS (Contentful) no meu HTML e, em seguida, tentando gerar o PDF desse HTML.
Mas no PDF gerado, faltam imagens (parece ser um problema de origem cruzada).
Por favor, me sugira como posso me livrar desses problemas.
Abaixo está o meu código-:

function downloadPDF () {
var canvasToImage = function (canvas) {
var img = nova imagem ();
var dataURL = canvas.toDataURL ('imagem / png');
img.crossOrigin = "Anônimo";
img.src = dataURL;
return img;
};

var canvasShiftImage = function (oldCanvas, shiftAmt) {
shiftAmt = parseInt (shiftAmt) || 0;
if (! shiftAmt) {return oldCanvas; }

var newCanvas = document.createElement ('canvas');
newCanvas.height = oldCanvas.height - shiftAmt;
newCanvas.width = oldCanvas.width;
var ctx = newCanvas.getContext ('2d');
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;

var img = canvasToImage (oldCanvas);
ctx.drawImage (img, 0, shiftAmt, img.width, img.height, 0, 0, img.width, img.height);

return newCanvas;
};

var canvasToImageSuccess = function (canvas) {
var pdf = new jsPDF ('l', 'px'),
pdfInternals = pdf.internal,
pdfPageSize = pdfInternals.pageSize,
pdfScaleFactor = pdfInternals.scaleFactor,
pdfPageWidth = pdfPageSize.width,
pdfPageHeight = pdfPageSize.height,
totalPdfHeight = 0,
htmlPageHeight = canvas.height,
htmlScaleFactor = canvas.width / (pdfPageWidth * pdfScaleFactor),
safetyNet = 0;

while (totalPdfHeight <htmlPageHeight && safetyNet <15) {
var newCanvas = canvasShiftImage (canvas, totalPdfHeight);
pdf.addImage (newCanvas, 'png', 0, 0, pdfPageWidth, 0, null, 'NONE');
// var alias = Math.random (). toString (35);
// pdf.addImage (newCanvas, 0, 0, pdfPageWidth, 0, 'png', alias, 'NONE');

totalPdfHeight + = (pdfPageHeight * pdfScaleFactor * htmlScaleFactor);

if (totalPdfHeight <htmlPageHeight) {
pdf.addPage ();
}
safetyNet ++;
}

var pageName = document.location.pathname.match (/ [^ /] + $ /) [0];
pdf.save (pageName + '.pdf');
};

html2canvas ($ ('body') [0],
{
onrendered: function (canvas) {
canvasToImageSuccess (canvas);
}
});
}

Ei, haverá uma solução para isso? Imagens CORS também não renderizadas aqui :(

Olá Rookev,

Você pode fazer isso passando uma das opções na função html2canvas. E acredite em mim, isso certamente funcionará :)

html2canvas ($ ('# div_pdf') [0],
{
useCORS: true, // Ao passar esta opção na função, as imagens de origem cruzada serão renderizadas corretamente na versão baixada do PDF
onrendered: function (canvas) {
canvasToImageSuccess (canvas);
}
});
Para mais informações, você pode dar uma olhada na documentação da biblioteca html2canvas no URL abaixo:
https://html2canvas.hertzen.com/documentation.html

Olá @ gauravmishra24 , infelizmente isso não funciona. O problema é que quero incluir imagens de um servidor onde o servidor tem a bandeira

Access-Control-Allow-Origin: *

não definido

:(

Olá Rookev,

Você poderia postar seu snippet de código?

Para que eu possa ter uma visão melhor sobre o mesmo .....

Oi,

Existe alguma solução para isso? Mesmo com useCORS definido como true, as imagens não estão sendo baixadas. Ainda obterá o erro de origem cruzada conforme mencionado acima.

Além disso, não tenho certeza sobre a solução do Cristy94 no arquivo html2Canvas.js distribuído. Mesmo depois de alterar o código no arquivo distribuído, de acordo com https://github.com/niklasvh/html2canvas/pull/554/commits/87d44359be73075ba4d5f36d6e1c8b88b7444402, ele também não funciona.

Para a outra alternativa, com configurações de proxy, existe alguma solução para o aplicativo angular 2?
A lista do site atual (https://github.com/niklasvh/html2canvas/wiki/Proxies) não tem!

Isso ainda é um problema com a v1.0.0 ? Em caso afirmativo, você poderia compartilhar um exemplo no jsfiddle .

Este problema foi encerrado automaticamente porque não houve resposta ao nosso pedido de mais informações do autor original. Com apenas as informações que estão atualmente no problema, não temos informações suficientes para tomar medidas. Entre em contato se tiver ou encontre as respostas de que precisamos para que possamos investigar mais a fundo.

@niklasvh Aqui está meu exemplo no codepen com v1.0.0:
https://codepen.io/Onlylonger/pen/ppjPKX
a mesma pergunta. obrigado

Existe algum outro plugin que alguém conheça. Isso não estava funcionando com solicitações de servidores diferentes. Nenhum exemplo adequado dado para proxy.

@vinayistar, você pode tentar minhas alterações, consulte o link https://github.com/niklasvh/html2canvas/issues/1544#issuecomment -435640901

Usando useCORS e definir o atributo img crossOrigin:anonymous

{ useCORS: false, allowTaint: true } isso funcionou para mim

Minha solução para este problema é converter o src de imagem para Base64

const img = document.querySelector('#img')
fetch(img.src)
  .then(res => res.blob())
  .then(blob => new Promise((resolve, reject) => {
      const reader = new FileReader;
      reader.onerror = reject;
      reader.onload = () => {
        resolve(reader.result);
      };
      reader.readAsDataURL(blob);
    })
  )
  .then(dataURL => {
    img.src = dataURL
    return html2canvas(element)
  } )

@todoi Você pode fornecer uma amostra disso com jspdf.

@ nishanta454
Este é o exemplo que escrevi. html2canvas renderiza imagens de origem cruzada .
Neste exemplo, eu uso cors-anywhere para adicionar cabeçalhos CORS à solicitação de imagem de proxy.

A primeira coisa de que precisamos é um servidor configurado para hospedar imagens com o cabeçalho Access-Control-Allow-Origin configurado para permitir acesso de origem cruzada a arquivos de imagem.
de CORS_enabled_image