Html2canvas: Imágenes de dominio cruzado que no se procesan (sin CORS ni proxy)

Tal vez debería usar useCORS ptoperty como verdadero, está destinado a contenido web crossdomained

El uso de useCORS falla en la captura de imagen. El problema que tengo es extraño, ya que no falla al obtener la imagen del dominio externo, simplemente no la representa en la captura.

¿Probaste mi solución? https://github.com/niklasvh/html2canvas/pull/554

Probablemente debería establecer allowTaint en verdadero, pero luego no puede exportar el resultado renderizado.

No entiendo por qué no usar userCORS o proxy ... Fueron creados para tales problemas.

@brcontainer Debido a que no funcionan en la última versión, consulte mi solución: https://github.com/niklasvh/html2canvas/pull/554

@ Cristy94 ¡¡Claro !! ¡Gran solución! ¡Gracias!

Hola @ Cristy94 ,

Estoy obteniendo las imágenes de CMS (Contentful) en mi HTML y luego intento generar PDF de ese HTML.
Pero en el PDF generado, faltan imágenes (parece ser un problema de origen cruzado).
Sugierame cómo puedo deshacerme de estos problemas.
A continuación se muestra mi código:

function downloadPDF () {
var canvasToImage = function (lienzo) {
var img = nueva imagen ();
var dataURL = canvas.toDataURL ('imagen / 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 ('lienzo');
newCanvas.height = oldCanvas.height - shiftAmt;
newCanvas.width = oldCanvas.width;
var ctx = newCanvas.getContext ('2d');
ctx.mozImageSmoothingEnabled = falso;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = falso;
ctx.imageSmoothingEnabled = falso;

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

return newCanvas;
};

var canvasToImageSuccess = function (lienzo) {
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 = lienzo.width / (pdfPageWidth * pdfScaleFactor),
safetyNet = 0;

while (totalPdfHeight <htmlPageHeight && safetyNet <15) {
var newCanvas = canvasShiftImage (lienzo, alturaPdf total);
pdf.addImage (newCanvas, 'png', 0, 0, pdfPageWidth, 0, nulo, 'NINGUNO');
// 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 (nombrePágina + '.pdf');
};

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

Oye, ¿habrá una solución para eso? Las imágenes CORS no se representan aquí también :(

Hola Rookev,

Puede hacerlo pasando una de las opciones en la función html2canvas. Y créeme, esto seguramente funcionará :)

html2canvas ($ ('# div_pdf') [0],
{
useCORS: true, // Al pasar esta opción en la función, las imágenes de origen cruzado se renderizarán correctamente en la versión descargada del PDF
onrendered: function (lienzo) {
canvasToImageSuccess (lienzo);
}
});
Para obtener más información, puede consultar la documentación de la biblioteca html2canvas en la siguiente URL:
https://html2canvas.hertzen.com/documentation.html

Hola @ gauravmishra24 , lamentablemente esto no funciona. El problema es que quiero incluir imágenes de un servidor donde el servidor tiene la bandera

Access-Control-Allow-Origin: *

no establecido

:(

Hola Rookev,

¿Podría publicar su fragmento de código?

Para que pueda ver mejor el mismo .....

Hola,

¿Hay algún arreglo para esto? Incluso con useCORS establecido en verdadero, las imágenes no se descargan. Sigue recibiendo el error de origen cruzado como se mencionó anteriormente.

Además, no estoy seguro de la solución de Cristy94 en el archivo html2Canvas.js distribuido. Incluso después de cambiar el código en el archivo distribuido, según https://github.com/niklasvh/html2canvas/pull/554/commits/87d44359be73075ba4d5f36d6e1c8b88b7444402 tampoco funciona.

Para la otra alternativa, con configuración de proxy, ¿hay alguna solución para la aplicación angular 2?
¡La lista del sitio actual (https://github.com/niklasvh/html2canvas/wiki/Proxies) no lo tiene!

¿Sigue siendo un problema con la v1.0.0 ? Si es así, ¿podría compartir un ejemplo en jsfiddle .

Este problema se ha cerrado automáticamente porque no ha habido respuesta a nuestra solicitud de más información del autor original. Con solo la información que se encuentra actualmente en el problema, no tenemos suficiente información para tomar medidas. Comuníquese con nosotros si tiene o encuentre las respuestas que necesitamos para que podamos investigar más.

@niklasvh Aquí está mi ejemplo en codepen con v1.0.0:
https://codepen.io/Onlylonger/pen/ppjPKX
la misma pregunta. gracias

¿Hay algún otro complemento que alguien conozca? Esto no funcionaba con la solicitud de diferentes servidores. No se ha dado un ejemplo adecuado para el proxy.

@vinayistar puedes probar mis cambios ver enlace https://github.com/niklasvh/html2canvas/issues/1544#issuecomment -435640901

Usando useCORS y establezca el atributo img crossOrigin:anonymous

{ useCORS: false, allowTaint: true } esto me funcionó

Mi solución a este problema es convertir la imagen src a 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 ¿Puede proporcionar una muestra de esto con jspdf.

@ nishanta454
Este es el ejemplo que escribí. html2canvas renderiza imágenes de origen cruzado .
En este ejemplo, uso cors-anywhere para agregar encabezados CORS a la solicitud de imagen proxy.

Lo primero que necesitamos es un servidor que esté configurado para alojar imágenes con el encabezado Access-Control-Allow-Origin configurado para permitir el acceso de origen cruzado a archivos de imagen.
de CORS_enabled_image