<p>html2canvas ne rend pas les images situées dans l'élément</p>

Salut.
J ai exactement le même problème.

Même problème ici.
J'essaie d'obtenir la photo d'un tweet, et l'image jointe ne passe pas.
Image jointe.

Je pense que les images d'autres sites sont bloquées par défaut car elles "souillent le canevas HTML5". Voici l'option que vous devez utiliser lorsque vous appelez le moteur de rendu :

attribut : allowTaint
taper : booléen
par défaut : faux
description : Autoriser ou non les images d'origine croisée à entacher le canevas

Trouvé ici : https://html2canvas.hertzen.com/documentation.html.

même problème....
et mes images viennent de la même origine

J'ai rencontré le même problème, la meilleure façon de résoudre le problème est d'exécuter le projet sur le serveur et de voir le résultat.
Dans mon cas, auparavant, j'exécutais les fichiers html directement sans aucun serveur, mais après avoir cherché un peu sur Google, j'ai trouvé une solution pour l'essayer sur un serveur.
J'ai essayé mon projet en utilisant Visual Studio et il fonctionnait parfaitement, mes images à l'intérieur de la balise div étaient également copiées

Insérez l'option allowTaint pour afficher toutes les images dans votre capture d'écran

html2canvas(document.getElementById('invoice-panel'), { letterRendering: 1, allowTaint : true, onrendered : function (canvas) { } });

J'ai une liste d'éléments div dans.
Lorsque j'essaie de capturer chaque div par identifiant, une partie de la demi-partie de div est capturée et une partie de l'image de capture de la div est vierge.
pouvez-vous me dire quel est le problème et comment puis-je le résoudre. @

Le même problème. Merci pour la solution.

html2canvas ne convertit pas les images données src au format base64. J'ai imprimé le journal. Aide aimablement

1283ms html2canvas : document cloné html2canvas.js:1487
3936ms html2canvas : CanvasRenderer initialisé avec une taille de 601 x 965 html2canvas.js:1487
3937ms html2canvas : Démarrage de NodeParser html2canvas.js:1487
4014ms html2canvas : Nœuds récupérés, total : 10 html2canvas.js:1487
4015ms html2canvas : Calculer les clips de débordement html2canvas.js:1487
4034ms html2canvas : commencez à récupérer les images html2canvas.js:1487
4044ms html2canvas : ajout des données de l'image #1 : image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pL html2canvas.js:1487
4047ms html2canvas : ajout des données de l'image #2 : image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aH html2canvas.js:1487
4051ms html2canvas : Fin de la recherche d'images html2canvas.js:1487
4052ms html2canvas : Image n°1 chargée avec succès
ImageContainer {src : " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…AKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/2Q==", image : img, tainted : null, promesse : h}
html2canvas.js:1487
4056ms html2canvas : Image n°2 chargée avec succès
ImageContainer {src : " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…4PXOaUMB0/GlrcdiYtkcc/WkzjqfwqMPxzxRvAz3oSCx//9k=", image : img, tainted : null, promesse : h}
html2canvas.js:1487
4059ms html2canvas : Images chargées, démarrage de l'analyse html2canvas.js:1487
4060ms html2canvas : Création de contextes d'empilement html2canvas.js:1487
4064ms html2canvas : tri des contextes d'empilement html2canvas.js:1487
4066ms html2canvas : file d'attente de rendu créée avec 9 éléments html2canvas.js:1487
4104ms html2canvas : rendu terminé html2canvas.js:1487
4109ms html2canvas : Recadrer le canevas à : gauche : 28 haut : 529 largeur : 545 hauteur : 0 html2canvas.js:1487
4111ms html2canvas : recadrage résultant avec largeur 545 et hauteur 0 avec x 28 et y 529

html2canvsas ne rend pas les images données avec base64 src, l'appel ne revient pas à "onrendered"
une fonction. Aide aimablement

1283ms html2canvas : document cloné html2canvas.js:1487
3936ms html2canvas : CanvasRenderer initialisé avec une taille de 601 x 965 html2canvas.js:1487
3937ms html2canvas : Démarrage de NodeParser html2canvas.js:1487
4014ms html2canvas : Nœuds récupérés, total : 10 html2canvas.js:1487
4015ms html2canvas : Calculer les clips de débordement html2canvas.js:1487
4034ms html2canvas : commencez à récupérer les images html2canvas.js:1487
4044ms html2canvas : ajout des données de l'image #1 : image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pL html2canvas.js:1487
4047ms html2canvas : ajout des données de l'image #2 : image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aH html2canvas.js:1487
4051ms html2canvas : Fin de la recherche d'images html2canvas.js:1487
4052ms html2canvas : Image n°1 chargée avec succès
ImageContainer {src : " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…AKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/2Q==", image : img, tainted : null, promesse : h}
html2canvas.js:1487
4056ms html2canvas : Image n°2 chargée avec succès
ImageContainer {src : " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…4PXOaUMB0/GlrcdiYtkcc/WkzjqfwqMPxzxRvAz3oSCx//9k=", image : img, tainted : null, promesse : h}
html2canvas.js:1487
4059ms html2canvas : Images chargées, démarrage de l'analyse html2canvas.js:1487
4060ms html2canvas : Création de contextes d'empilement html2canvas.js:1487
4064ms html2canvas : tri des contextes d'empilement html2canvas.js:1487
4066ms html2canvas : file d'attente de rendu créée avec 9 éléments html2canvas.js:1487
4104ms html2canvas : rendu terminé html2canvas.js:1487
4109ms html2canvas : Recadrer le canevas à : gauche : 28 haut : 529 largeur : 545 hauteur : 0 html2canvas.js:1487
4111ms html2canvas : recadrage résultant avec largeur 545 et hauteur 0 avec x 28 et y 529

@SebasAlvarez - l'option allowTaint ne fonctionne plus. Est-ce que ça marche toujours pour vous ?

@SebasAlvarez , @sandeepnagra :
j'utilise ce code pour la capture d'écran d'image dans un nouvel onglet mais l'image ne s'affiche pas et je suis fatigué avec "a llowTaint:true " cela ne fonctionne que dans la même fenêtre mais pas dans un nouvel onglet.
c'est mon code:
fonction rendu(){
html2canvas(document.body, { allowTaint : true,
rendu : fonction (toile) {
document.body.appendChild(canvas);
window.open(canvas.toDataURL());
}
});
}
pouvez-vous me dire quel est le problème, comment pouvez-vous résoudre celui-ci ??

@venkateshduddu - déplacez-vous d'abord le focus vers un nouvel onglet avant de prendre une capture d'écran ?

@sandeepnagra - pas de sandeep, j'utilise juste l'événement click. une capture d'écran de plus fonctionne si j'utilise le chemin de l'image locale mais que le chemin du serveur ne fonctionne pas dans un nouvel onglet.

@venkateshduddu - un événement de clic ne déplacera pas automatiquement le focus vers un nouvel onglet, vous devez le déclencher. Alors essayez d'abord, je suis sûr à 100% que cela résoudra votre problème.

Concernant le chemin du serveur, ce lecteur réseau est-il authentifié ? Si oui, vous authentifiez-vous avant de télécharger des fichiers sur le lecteur réseau ? C'est une toute autre histoire si vous souhaitez les télécharger dans le compartiment S3.

salut quand j'essaie de filtrer un iframe avec une caméra ip interne, il renvoie une image vide, pouvez-vous m'aider s'il vous plaît?

Si j'ai utilisé allowTaint, l'option de téléchargement n'a pas fonctionné. S'il vous plaît aider

même problème....
et mes images viennent de la même origine

Je viens de régler ce problème.
pls activer l'option 'useCORS' sur 'true'
codes ci-dessous :
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

Merci beaucoup @Sotyoyo , mon bug a été corrigé avec le code ci-dessus. Merci merci

@Sotyoyo Merci beaucoup frère, que Dieu te bénisse <3

@Sotyoyo Merci beaucoup, ça marche pour moi :)

L'image n'est pas rendue, y a-t-il un problème dans mon code ?

html2canvas(document.getElementById("html-2-pdfwrapper"), {
journalisation : vrai,
lettreRendu : 1,
allowTaint : faux,
useCORS : vrai,
rendu : fonction (toile) {
var img = canvas.toDataURL('image/png');
var doc = nouveau jsPDF();
doc.addImage(img, 'JPEG', 20, 20);
doc.save('test2.pdf');
}
});

même problème....
et mes images viennent de la même origine

Je viens de régler ce problème.
pls activer l'option 'useCORS' sur 'true'
codes ci-dessous :
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

c'est du travail! THX!

même problème....
et mes images viennent de la même origine

Je viens de régler ce problème.
pls activer l'option 'useCORS' sur 'true'
codes ci-dessous :
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

c'est vrai /

html2canvas(document.querySelector("#id-of-element"),{ logging : true, letterRendering : 1, allowTaint : false, useCORS : true }).then(canvas => {
var imgData = canvas.toDataURL('image/jpeg');
});

Insérez l'option allowTaint pour afficher toutes les images dans votre capture d'écran

html2canvas(document.getElementById('invoice-panel'), { letterRendering: 1, allowTaint : true, onrendered : function (canvas) { } });

Merci. Ça fonctionne bien.

Mais je ne peux pas cloner le style d'image sur le canevas

Je suis toujours confronté au même problème même après avoir utilisé les options ci-dessous est mon code.
var element = document.querySelector("#map-image-id");
html2canvas(élément, {
journalisation : vrai,
lettreRendu : 1,
allowTaint : faux,
useCORS : vrai
}).then(canvasElm => {
var imageType = "image/png" ;
var imageData = canvasElm.toDataURL(imageType);
var src = encodeURI(imageData);
console.log("src", src);
console.log("image Data", imageData);

Je suis toujours confronté au même problème même après avoir utilisé les options ci-dessous est mon code.
var element = document.querySelector("#map-image-id");
html2canvas(élément, {
journalisation : vrai,
lettreRendu : 1,
allowTaint : faux,
useCORS : vrai
}).then(canvasElm => {
var imageType = "image/png" ;
var imageData = canvasElm.toDataURL(imageType);
var src = encodeURI(imageData);
console.log("src", src);
console.log("image Data", imageData);

pareillement. L'avez-vous résolu ?

Je suis toujours confronté au même problème même après avoir utilisé les options ci-dessous est mon code.
var element = document.querySelector("#map-image-id");
html2canvas(élément, {
journalisation : vrai,
lettreRendu : 1,
allowTaint : faux,
useCORS : vrai
}).then(canvasElm => {
var imageType = "image/png" ;
var imageData = canvasElm.toDataURL(imageType);
var src = encodeURI(imageData);
console.log("src", src);
console.log("image Data", imageData);

même problème avec moi toute aide

Je vois le même problème. Qu'est-ce que je fais mal?

html2canvas(document.getElementById(<id>), {
    logging: true,
    letterRendering: 1,
    allowTaint: false,
    useCORS: true
}).then(result => {
    var img = result.toDataURL("image/png");
    savePng(img);
});

Le ci-dessous fonctionne également si vous souhaitez inclure <img src-"..." /> :

html2canvas(report, {letterRendering: 1, allowTaint: true, useCORS: true})
            .then((canvas) => {      
                const imgData = canvas.toDataURL('image/png');
               // const pdf = new jsPDF();
               // pdf.addImage(imgData, 'PNG', 10, 10);
                //pdf.save("foo.pdf");  
            });

Mon contenu contient une image provenant de Aws.s3(). Les commentaires mentionnés ci-dessus ne fonctionnent pas pour mon cas.

html2canvas(contenu, {letterRendering : 1,allowTaint : false, useCORS : true})
.then(toile => {
const imgData = canvas.toDataURL('image/png');
console.log(imgData);
const pdf = nouveau jsPDF();
pdf.addImage(imgData, 'PNG', 10, 10, canvas.width, canvas.height);
pdf.save('télécharger.pdf');
});

Le canevas de sortie ne contient qu'une zone vide au lieu d'une image. Quelqu'un aurait-il une solution pour mon cas ?

Mon contenu contient une image provenant de Aws.s3(). Les commentaires mentionnés ci-dessus ne fonctionnent pas pour mon cas.

html2canvas(contenu, {letterRendering : 1,allowTaint : false, useCORS : true})
.then(toile => {
const imgData = canvas.toDataURL('image/png');
console.log(imgData);
const pdf = nouveau jsPDF();
pdf.addImage(imgData, 'PNG', 10, 10, canvas.width, canvas.height);
pdf.save('télécharger.pdf');
});

Le canevas de sortie ne contient qu'une zone vide au lieu d'une image. Quelqu'un aurait-il une solution pour mon cas ?

même problème ici. images provenant du compartiment S3

même problème....
et mes images viennent de la même origine

Je viens de régler ce problème.
pls activer l'option 'useCORS' sur 'true'
codes ci-dessous :
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

Merci
Ça marche pour moi ❤❤

L'accès à l'image sur ' https://image/logo link' depuis l'origine ' http://localhost :3000' a été bloqué par la politique CORS : aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée.
Est-ce la raison pour laquelle mon logo n'apparaît pas dans le fichier pdf.
Reste tout le texte avec css appliqué et le logo de la marque qui se trouve dans mon dossier statique arrive.
S'il vous plaît, répondez au besoin d'aide sur ce J'essaie cela depuis plus de 2 semaines.

Pour tous ceux qui viennent ici, après avoir essayé beaucoup de choses, j'ai découvert que pour obtenir des images à partir d'une ressource externe (telle que le compartiment S3), vous devez activer à la fois useCORS = true pour html2canvas et activer la politique CORS sur les images servies à partir de S3.

Je l'ai résolu en utilisant le proxy html2canvas. Vous pouvez voir quelques détails sur l'utilisation et les tests ici :
https://github.com/zeusstl/html2canvas-proxy-nodejs