Html2canvas: Les images inter-domaines ne s'affichent pas (pas de CORS ni de proxy)

Vous devriez peut-être utiliser useCORS ptoperty comme true, il est destiné au contenu Web multidomaine

L'utilisation de useCORS échoue la capture d'image. Le problème que j'ai est étrange car il ne manque pas d'obtenir l'image du domaine externe, il ne la rend tout simplement pas dans la capture.

As-tu essayé mon correctif ? https://github.com/niklasvh/html2canvas/pull/554

Devrait probablement définir allowTaint sur true, mais vous ne pourrez alors pas exporter le résultat rendu.

Je ne comprends pas pourquoi ne pas utiliser les userCORS ou proxy ... Ils ont juste été créés pour de tels problèmes.

@brcontainer Parce qu'ils ne fonctionnent pas dans la dernière version, voir mon correctif : https://github.com/niklasvh/html2canvas/pull/554

@ Cristy94 Bien sûr !! Excellent correctif ! Merci!

Salut @Cristy94 ,

Je récupère les images du CMS (Contentful) dans mon HTML, puis j'essaie de générer un PDF de ce HTML.
Mais dans le PDF généré, il manque des images (il semble que ce soit un problème d'origine croisée).
S'il vous plaît me suggérer comment puis-je me débarrasser de ces problèmes.
Ci-dessous mon code-:

fonction downloadPDF() {
var canvasVersImage = function(canevas){
var img = nouvelle image();
var dataURL = canvas.toDataURL('image/png');
img.crossOrigin = "Anonyme";
img.src = URL de données;
retour 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 = canvasVersImage(oldCanvas);
ctx.drawImage(img,0, shiftAmt, img.width, img.height, 0, 0, img.width, img.height);

renvoie newCanvas ;
} ;

var canvasToImageSuccess = function(canvas){
var pdf = new jsPDF('l','px'),
pdfInternes = pdf.internes,
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(nompage + '.pdf');
} ;

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

Hé, y aura-t-il un correctif pour cela? Les images CORS ne sont pas rendues ici non plus :(

Salut Rookev,

Vous pouvez le faire en passant l'une des options de la fonction html2canvas. Et croyez-moi, cela fonctionnera sûrement :)

html2canvas($('#div_pdf')[0],
{
useCORS : true, //En passant cette option dans la fonction Les images d'origine croisée seront rendues correctement dans la version téléchargée du PDF
rendu : fonction (canevas) {
canvasToImageSuccess(canvas);
}
});
Pour plus d'informations, vous pouvez consulter la documentation de la bibliothèque html2canvas sur l'URL ci-dessous :
https://html2canvas.hertzen.com/documentation.html

Salut @gauravmishra24 , malheureusement cela ne fonctionne pas. Le problème est que je veux inclure des images d'un serveur où le serveur a le drapeau

Access-Control-Allow-Origin: *

pas défini

:(

Salut Rookev,

Pourriez-vous s'il vous plaît poster votre extrait de code?

Pour que je puisse mieux voir le même.....

Salut,

Y a-t-il un correctif pour cela? Même avec useCORS défini sur true, les images ne sont pas téléchargées. Obtenez toujours l'erreur d'origine croisée comme mentionné ci-dessus.

De plus, je ne suis pas sûr de la solution de Cristy94 dans le fichier html2Canvas.js distribué. Même après avoir modifié le code dans le fichier distribué, selon https://github.com/niklasvh/html2canvas/pull/554/commits/87d44359be73075ba4d5f36d6e1c8b88b7444402, cela ne fonctionne pas non plus.

Pour l'autre alternative, avec les paramètres proxy, existe-t-il une solution pour l'application angulaire 2 ?
La liste du site actuel (https://github.com/niklasvh/html2canvas/wiki/Proxies) ne l'a pas !

Est-ce toujours un problème avec la v1.0.0 ? Si oui, pourriez-vous s'il vous plaît partager un exemple sur jsfiddle .

Ce problème a été automatiquement fermé car il n'y a pas eu de réponse à notre demande d'informations supplémentaires de la part de l'auteur d'origine. Avec seulement les informations qui sont actuellement dans le problème, nous n'avons pas assez d'informations pour prendre des mesures. Veuillez nous contacter si vous avez ou trouvez les réponses dont nous avons besoin afin que nous puissions approfondir nos recherches.

@niklasvh Voici mon exemple sur codepen avec v1.0.0 :
https://codepen.io/Onlylonger/pen/ppjPKX
la même question. Merci

Y a-t-il un autre plugin que quelqu'un connait. Cela ne fonctionnait pas avec différentes demandes de serveurs. Aucun exemple approprié n'est donné pour la procuration.

@vinayistar vous pouvez essayer mes modifications voir lien https://github.com/niklasvh/html2canvas/issues/1544#issuecomment -435640901

Utiliser useCORS et définir l'attribut img crossOrigin:anonymous

{ useCORS: false, allowTaint: true } cela a fonctionné pour moi

Ma solution à ce problème consiste à convertir l'image src en 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 Pouvez-vous en fournir un exemple avec jspdf.

@nishanta454
C'est l'exemple que j'ai écrit. html2canvas rend les images d'origine croisée .
Dans cet exemple, j'utilise cors-anywhere pour ajouter des en-têtes CORS à la demande d'image proxy.

La première chose dont nous avons besoin est un serveur qui est configuré pour héberger des images avec l'en-tête Access-Control-Allow-Origin configuré pour permettre l'accès cross-origin aux fichiers image.
de CORS_enabled_image