Salut,
J'ai essayé de convertir html en image à l'aide de html2canvas, cela fonctionne bien. Mais la balise d'image à l'intérieur des éléments html n'est pas convertie, ci-dessous un exemple :
Mo | Ma | Nous | E | Fr | Sa | Di |
---|---|---|---|---|---|---|
26 | 27 | 28 | 29 | 30 | 31 | 1 |
2 claquement de cloche |
Voici mon script pour convertir html2canvas :
var html2obj = html2canvas($('table'));
var queue = html2obj.parse();
var canvas = html2obj.render(file d'attente);
var img = canvas.toDataURL();
$('#calendar_to_canvas').attr('src', img);
Capture d'écran PFA
Merci,
Bala
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.
Commentaire le plus utile
et ça a marché !!, il ne me reste plus qu'à mettre "background-size: 100% 100%;" au lieu de "background-size: cover;"