Html2canvas: La balise d'image ne capture pas

Il vous manque le préchargement des images, qui lui-même est asynchrone, vous devrez donc l'envelopper dans des rappels. Vous utilisez probablement également une ancienne version, je vous recommande donc d'obtenir la dernière version sur https://github.com/niklasvh/html2canvas/downloads , puis de tester avec :

html2canvas( $('table'), {
   onrendered: function( canvas ) {
        var img = canvas.toDataURL();
        $('#calendar_to_canvas').attr('src', img);
   }
});

Merci pour la réponse rapide, j'ai téléchargé la dernière version et essayé le code ci-dessus, sa balise d'image n'apparaît toujours pas dans le canevas rendu. Ai-je raté quelque chose, j'ai ajouté html2canvas.js, jquery.plugin.html2canvas et j'utilise jquery 1.7. Votre aide est grandement appréciée.

Les images sont-elles hébergées sous la même origine que la page que vous rendez ?

Définissez logging: true et vérifiez ce que la console dit à propos des images, échouent-elles ?

Les images se chargent parfaitement, veuillez consulter les journaux ci-dessous :

html2canvas : démarrage du préchargement : recherche d'images d'arrière-plan html2canvas.js:27
html2canvas : démarrage : images : 1 / 1 (échec : 0) html2canvas.js:27
html2canvas : démarrage : images : 2 / 2 (échec : 0) html2canvas.js:27
html2canvas : démarrage : images : 3 / 3 (échec : 0) html2canvas.js:27
html2canvas : démarrage : images : 4 / 4 (échec : 0) html2canvas.js:27
html2canvas : démarrage : images : 5 / 5 (échec : 0) html2canvas.js:27
html2canvas : démarrage : images : 6 / 6 (échec : 0) html2canvas.js:27
html2canvas : démarrage : images : 7/7 (échec : 0) html2canvas.js:27
html2canvas : Préchargement : Recherche d'images html2canvas.js:27
html2canvas : Préchargement : Terminé. html2canvas.js:27
html2canvas : démarrage : images : 8 / 18 (échec : 0) html2canvas.js:27
html2canvas : démarrage : images : 9 / 18 (échec : 0) html2canvas.js:27
html2canvas : démarrage : images : 10 / 18 (échec : 0) html2canvas.js:27
html2canvas : démarrage : images : 11 / 18 (échec : 0) html2canvas.js:27
html2canvas : début : images : 12 / 18 (échec : 0) html2canvas.js:27
html2canvas : début : images : 13 / 18 (échec : 0) html2canvas.js:27
html2canvas : démarrage : images : 14 / 18 (échec : 0) html2canvas.js:27
html2canvas : démarrage : images : 15 / 18 (échec : 0) html2canvas.js:27
html2canvas : début : images : 16 / 18 (échec : 0) html2canvas.js:27
html2canvas : début : images : 17 / 18 (échec : 0) html2canvas.js:27
html2canvas : démarrage : images : 18 / 18 (échec : 0) html2canvas.js:27
Chargement des images terminé : # 18 (échec : 0) html2canvas.js:27

Impossible d'obtenir des données d'image à partir du canevas, car le canevas a été entaché de données d'origine croisée.

html2canvas : Renderer : rendu Canvas terminé - retour de l'objet canvas

Le fichier javascript et l'image sont situés dans le même répertoire en plus du commentaire précédent.

Salut niklasvh, cela a parfaitement fonctionné avec le même problème de politique d'origine, j'ai résolu l'exécution dans un serveur Web précédemment exécuté localement en utilisant file:// ceci est considéré comme un problème inter-domaines. Merci de m'avoir guidé dans la bonne direction. C'est un super plugin :)

Niklashvh, j'essaie de le faire pour l'application hybride Android, qui s'exécute localement à l'aide de file:// pouvez-vous me guider pour résoudre ce problème interdomaine ou toute suggestion très appréciée.

Si vous n'avez pas besoin d'exporter l'image n'importe où, vous pouvez toujours définir allowTaint: true

Nous exportons l'image vers la mémoire et l'envoyons au format pdf par e-mail

J'ai le même problème, le log est le suivant :

html2canvas : démarrage du préchargement : recherche d'images d'arrière-plan html2canvas.js : 21
html2canvas : Préchargement : Recherche d'images html2canvas.js : 21
html2canvas : Préchargement : Terminé. html2canvas.js 21
html2canvas : début : images : 1/2 (échec : 0) html2canvas.js : 21
html2canvas : début : images : 2/2 (échec : 0) html2canvas.js : 21
Chargement des images terminé : # 2 (échec : 0) html2canvas.js : 21
html2canvas : Renderer : rendu Canvas terminé - retour du canevas obj

les images sont situées dans l'image d'arrière-plan, chargez simplement l'image principale div, les détenus ne sont pas affichés.

Pas de problème car les images croisées sont dans le même domaine.

Une idée?

si j'ajoute "background-size: cover;" au style, l'image n'apparait pas...

apparemment c'est ça le problème

et ça a marché !!, il ne me reste plus qu'à mettre "background-size: 100% 100%;" au lieu de "background-size: cover;"

HTML@Canvas ne capture pas lors de l'utilisation d'une URL en ligne avec img, quelle est la solution à ce problème ?
Merci

@ Elgamal10 utilise un proxy

https://github.com/brcontainer/html2canvas-php-proxy (proxy html2canvas avec php)
https://github.com/brcontainer/html2canvas-asp-vbscript-proxy (proxy html2canvas avec asp-classic - vb)
https://github.com/brcontainer/html2canvas-csharp-proxy (proxy html2canvas avec asp.net - csharp)

Remarque : Lisez le fichier README.md

merci pour votre réponse, la prise d'écran est bonne mais il y a des erreurs comme :

html2canvas_5 n'est pas défini
html2canvas_0 n'est pas défini
html2canvas_5 n'est pas défini
html2canvas_4 n'est pas défini
html2canvas_1 n'est pas défini
html2canvas_5 n'est pas défini

@Elgamal10 crée un problème dans le projet
https://github.com/brcontainer/html2canvas-csharp-proxy/issues?state=open

Je crois que vous utilisez C# (ASP.NET), n'est-ce pas ?

Salut Niklas,

J'ai commencé à utiliser votre api et c'est génial.. Mais je suis bloqué, pouvez-vous m'aider s'il vous plaît..

J'essaie de convertir un html en canvas en utilisant le code :
jQuery('html').html2canvas({
proxy :" http://localhost/myproject/proxy.jsp ",
userCORS:true ,
rendu : fonction (canevas) {
alerte (toile);
var url = canvas.toDataURL("image/png");
window.open(url, '_blank');
},
});

Maintenant, j'ai un fichier appelé proxy.jsp qui enregistre toutes les images d'origine croisée dans le chemin ~/tomcat/myproject/images/"

Après cela, je vois cela dans la console
Ressource interprétée comme Script mais transférée avec le type MIME image/jpeg : " http://localhost/myproject/proxy.jsp?url=http%3A%2F%2Fi.ebayi …QYEAAMXQVERSuVtL%2F%24_1.JPG%3Fset_id%3D8800004005&callback= html2canvas_64". html2canvas.js:2264

Après tout cela, ma fonction de rappel n'est pas exécutée et je ne peux pas créer de canevas.

Ce qui peut être fait? Peux-tu aider s'il te plait?

Merci beaucoup

@himakshi89 vous ne pouvez pas utiliser les proxy: et userCORS: en même temps.

Préférez utiliser un proxy.
Remarque : essayez de capturer le corps.

dans votre code il reste une virgule :

},//this is wrong.

});

Quelle version de votre html2canvas ?

Essaye ça:

jQuery('body').html2canvas({
    "onrendered": function(canvas) {
    }
});

Si cela ne fonctionne pas, essayez de télécharger le html2canvas sur https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js et utilisez ce code :

html2canvas($("body").get(0), {
    "logging": true,
    "proxy": "http://localhost/myproject/proxy.jsp",
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

@brcontainer
salut

J'ai modifié mon code et maintenant j'envoie la réponse de proxy.jsp en tant que
({"html2canvas_67":http://localhost/myproject/0.1651487380333363.jpg"})

Aucune erreur n'est maintenant affichée dans la console.
Mais rien ne se passe maintenant. Que devrait-il se passer ou y a-t-il un endroit qui doit être changé ?

S'il vous plaît aider

Mais comme la console ne peut rien montrer
vous avez utilisé mon deuxième exemple de code ? il envoie les journaux à la console.

Essayez de fournir votre code en ligne pour tester.

Comme suggéré, j'ai supprimé useCORS et remplacé html par body

jQuery('body').html2canvas({
proxy :" http://nisquare.dyndns.org :8087/facebook/proxy.jsp",
journalisation:vrai ,
rendu : fonction (canevas) {
var url = canvas.toDataURL("image/png");
window.open(url, '_blank');
}
});

Je reçois aussi ceci est ma console
html2canvas : erreur de chargement : http://cmsip.tradus.ibcdn.com/MOBMKXE29ULYUMKH_4902586_320x360.jpg html2canvas.js:21

J'ai joint une capture d'écran de ce que je reçois

Vous avez essayé de télécharger https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js

et ce code :

html2canvas($("body").get(0), {
    "logging": true,
    "proxy": "http://localhost/myproject/proxy.jsp",
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

ou pas?

REMARQUE : http://nisquare.dyndns.org:8087/facebook/proxy.jsp est cassé !

j'avais téléchargé la dernière version

je remplace le code par le suivant

html2canvas($("body").get(0), {
proxy :" http://nisquare.dyndns.org :8087/facebook/proxy.jsp",
journalisation:vrai ,
rendu : fonction (canevas) {
var url = canvas.toDataURL("image/png");
window.open(url, '_blank');
}
});

envoie moi le test du lien

J'utilise c'est l'extension chrome et l'extension est toujours en mode développement

"Extension Chrome" avec JSP ?

le jsp n'est utilisé que pour la partie proxy..Selon vous quoi de plus préférable ?

L'extension Chrome s'exécute dans d'autres "protocoles" et "frames", proxy.jsp utilise le protocole HTTP.

Je crois que les extensions chrome ne nécessitent pas de proxy. Utilisez comme :

html2canvas($("body").get(0), {
    "logging": true,
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

LIRE : http://developer.chrome.com/extensions/tut_debugging.html

@brcontainer
Hé merci pour l'idée.. nous utilisons maintenant une API fournie par chrome lui-même. Il a une fonction chrome capturevisibletab qui résout ou problème très facilement :)

@jgab-net merci beaucoup. Recherche trop longue pour l'erreur

@ Sumit8 (Y) vous êtes le bienvenu

@gitbala Votre problème est-il résolu ? @niklasvh Ce problème peut-il être clos ? (Je vais arrêter avec le triage des bogues si cela est ennuyeux.. :)

@usmonster continue par tous les moyens, ça me fait gagner du temps pour parcourir chaque problème ouvert :)

Oui c'est résolu :)

Le lundi 1er septembre 2014 à 04h11, usmonster [email protected] a écrit :

@gitbala https://github.com/gitbala Votre problème est-il résolu ? @niklasvh
https://github.com/niklasvh Ce problème peut-il être clos ? (j'arrête avec
le tri des bogues est c'est ennuyeux.. :)

-
Répondez directement à cet e-mail ou consultez-le sur GitHub
https://github.com/niklasvh/html2canvas/issues/145#issuecomment -54047596
.

J'utilise html2canvas - l'image locale ne s'affiche pas en pdf. quelle est la solution pour cela?

@niklasvh pls help - l'image du logo en html n'est pas rendue en pdf

J'ai échoué lors de la conversion de l'image en ligne. Comment utiliser "proxy": " http://localhost/myproject/proxy.jsp ", j'utilise vue, où mettre ce jsp et je ne sais pas comment utiliser @niklasvh pouvez-vous aider?

@qiuyaofan ayant le même problème avez-vous obtenu la solution? Je l'utilise avec angular2 et j'obtiens des images d'un autre serveur. @gitbala as -tu eu la solution ?

+1 BTW, les journaux ont l'air bien ( html2canvas: Images loaded, starting parsing ) mais je ne vois toujours pas les images sur le pdf.

J'utilise

allowTaint : vrai,
useCORS : vrai,
taintTest : faux,

@NikhilRadadiya @qiuyaofan gars, également à la recherche d'une solution côté client juste. Utiliser vue js et obtenir une image à partir d'un giphy. Voici donc celui qui a bien fonctionné pour moi :

html2canvas(element, {
        "logging": true, //Enable log (use Web Console for get Errors and Warings)
        useCORS: true,
        taintTest: false,
        onrendered: function(canvas) {
          var img = new Image();
          img.onload = function() {
            document.body.appendChild(img);
          };
          img.error = function() {
            if(window.console.log) {
              window.console.log("Not loaded image from canvas.toDataURL");
            } else {
              alert("Not loaded image from canvas.toDataURL");
            }
          };
          img.src = canvas.toDataURL("image/png");
        }
      });

Donc aucun proxy n'a été utilisé.

@creepteed J'ai d'autres éléments que je dois convertir en canvas puis enregistrer en pdf, mon html ne contient pas que des images, si tel est le cas, comment puis-je utiliser la fonction ci-dessus que vous avez publiée ?

Salut @niklasvh ,
Je veux capturer une page Web à l'aide de htmltocanvas, tout fonctionne bien, mais lorsque j'essaie de capturer une page Web, je n'obtiens pas d'images.
Pouvez-vous m'aider?
Voici mon code :
function capture(div_id=null) { jQuery(".screenshot_row_target").html2canvas({ logging: true, //taintTest : true, //proxy: "https://skeleton-21.myshopify.com", onrendered: function (canvas) { jQuery('#screenshot_img_val').val(canvas.toDataURL("image/png")); //document.getElementById("screenshot_html_form").submit(); } }); }

Dans la console, j'obtiens ceci
html2canvas: Preload starts: finding background-images html2canvas.js:19 html2canvas: Preload: Finding images html2canvas.js:19 html2canvas: Preload: Done. html2canvas.js:19 html2canvas: start: images: 0 / 0 (failed: 0) html2canvas.js:19 Finished loading images: # 0 (failed: 0) html2canvas.js:19 html2canvas: Error loading <img>://cdn.shopify.com/s/files/1/2186/4293/files/user2_300x300.png?v=1503661428 html2canvas.js:19 html2canvas: Error loading background: html2canvas.js:19 html2canvas: Error loading <img>://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_300x300.gif html2canvas.js:19 html2canvas: Renderer: Canvas renderer done - returning canvas obj
Merci.