Html2canvas: Problèmes avec les images d'arrière-plan

Semble être corrigé avec la 0.4.1 (dans la branche de développement). Probablement lié à #256

Pourriez-vous essayer avec la 0.4.1 et voir si le problème persiste ?

Bonjour. J ai exactement le même problème. Oui, le problème existe toujours dans la 0.4.1. Merci pour votre aide.

J'ai le même problème... Une solution ? Merci Niklas pour ce script incroyable.

Ce code ne sera pas rendu.
div class="mc-image " title="" style="background- image:url ('http://eterni-t.design.s3.amazonaws.com/381/theme-154-original-1.jpg' ); largeur:1025px; hauteur:780px; z-index: 9999"

J'ai remarqué que si je supprime background-size: cover; de ma class="mc-image" ça marche.

@ymorin007 Êtes-vous sur Mac et Chrome/Opera/Safari et/ou utilisez le dernier commit (c'est-à-dire que vous avez construit le script vous-même) ?

Version Windows 7 Chrome 30.0.1599.101 m

Correction de la température :

remplacer la ligne 2818 par

ctx.fillStyle = (options.background !== undefined) ? options.background : parsedData.backgroundColor;

C'est certainement lié à deux options de la taille de l'arrière-plan : contenir ou couvrir.

Le dernier commit (html2canvas 0.4.1) l'a corrigé pour moi

Le mien le fait toujours même après le dernier commit...

Ma taille d'arrière-plan est définie sur 'couvrir' et j'ai également essayé 'auto 100%' et c'est toujours juste blanc/transparent.

Si je supprime la taille de l'arrière-plan, il capture très bien... d'autres conseils ?

Correction temporaire, utilisez :

background:url ("...base64...")

et ne pas utiliser

De plus, n'utilisez pas de "sprites" car html2canvas ne semble pas comprendre cela.

J'ai un problème avec les images d'arrière-plan lorsque l'url contient un chemin relatif vers l'arrière-plan du répertoire supérieur : url("../i/alerts-16x.png")

Cela fonctionne si vous déplacez png dans l'arrière-plan suivant : url("i/alerts-16x.png")

Je ne pouvais pas rendre les images d'arrière-plan et cela semblait couvrir ou contenir la taille de l'arrière-plan, j'ai donc changé la ligne 350 dans la version 0.4.1 en :

topPos = isNaN(parseInt(bgposition[1], 10)) ? topPos : parseInt(bgposition[1], 10);

et il fonctionne!

Je suis sur la version 0.4.1

J'ai aussi un problème avec l'arrière-plan.

J'ai changé de live 350 comme suggéré par fperich mais n'a pas aidé.

J'ai également essayé l'image d'arrière-plan base64 recommandée par Hernan, également sans joie.

L'url que j'essaie de convertir est la suivante
http://prompter.rareapps.org/prompt/prompt-save3.php?p=123

Il convertit avec l'arrière-plan lorsque j'utilise le moteur de rendu de page Web ici
http://html2canvas.hertzen.com/screenshots.html

Mais sur ma propre page, il n'y a pas d'arrière-plan. Voir l'échantillon ici
http://prompter.rareapps.org/prompt/prompt-save3.php?p=123

Le code que j'utilise est celui-ci

<script type="text/javascript">
$(window).load(function() {
    html2canvas(document.body, {
        onrendered: function(canvas) {
        window.location.href = canvas.toDataURL('image/jpeg');
    },
    allowTaint: true,
    taintTest: false
    });
});
</script>

Il laisse essentiellement la page se charger et se convertir en image.

Quelque chose ne va pas avec mon code ?

Merci

fperich u rock man !! Merci

Je suis d'accord, fperich, tu es ma personne préférée en ce moment !

Merci fperich :D ça a bien fonctionné

@shauchenka @niklasvh Diriez-vous que ce problème est résolu ? Ce problème peut/doit-il être clos ?

En utilisant la 0.4.1 (dernière version et développeur), l'image d'arrière-plan de mes éléments enfants (les enfants sont des sprites) ne s'affiche pas sur le canevas, au moins dans Chrome pour Windows. Firefox pour Windows fonctionne bien cependant. Sur Chrome pour Mac, j'obtiens un carré noir à l'endroit où se trouve l'étendue avec l'image d'arrière-plan. J'ai essayé fperich fix mais cela n'a pas fonctionné pour moi. L'image de fond est sur la même origine, tous les fichiers sont dans le même répertoire sur le serveur.

@4gstudios Pouvez-vous mettre un exemple simplifié dans un jsfiddle (ou sur un lien accessible au public) pour démontrer le problème ?

@usmonster bien sûr. Je n'ai pas utilisé jsfiddle car je ne voulais pas que les images soient externes, nous pouvons donc exclure les problèmes d'origine croisée.

maintenant devinez quoi. pendant que je préparais ceci, j'ai réalisé que le problème semble être avec le png que je veux utiliser pour mes sprites. au début, je pensais peut-être à la taille du fichier, mais cela semble en fait être un problème avec les dimensions du png.

cela pourrait avoir quelque chose à voir avec la quantité d'informations contenues dans le png, car des png plus complexes semblent présenter le problème à des dimensions relativement plus petites. je ne pense pas que cela ait nécessairement à voir avec la taille du fichier car j'ai un peu gâché l'optimisation png via tinypng.com et une image de plus grande dimension avec une taille de fichier plus petite aura le problème tandis qu'une image de plus petite dimension avec un fichier plus gros la taille ne le fera pas.

regarde mon exemple : http://4gstudios.com/html2canvas/

la boîte bleue rend bien (l'image bg est de 100x7800 pixels / 374kb)
la boîte rouge ne s'affiche pas correctement (l'image bg est de 100x25000 pixels / 254kb)
-sous OS X Chrome (boîte noire)
-OS X Safari (boîte "non")
-et probablement Win Chrome (qui se passait hier mais pas à proximité d'un distributeur automatique de PC)
-OS X Firefox semble fonctionner correctement.

J'espère que j'ai bien illustré ce que je pense être le problème et que nous pourrons le résoudre. le sprite que je veux utiliser dans mon projet a plus de 800 règles CSS différentes et je ne veux VRAIMENT pas avoir à le changer !

edit: mon exemple utilise 0.4.1 mais j'ai le même problème quand j'ai essayé 0.5.0rc1

Je n'ai pas OS X disponible à tester, mais il semble fonctionner correctement sur Chrome 37 sous Windows (Vista) et Chrome 38 bêta sous Linux (Debian wheezy). Quelle version de Chrome utilisez-vous ? Avez-vous essayé de tester en mode navigation privée / avec toutes les extensions désactivées ?

@usmonster Je

@4gstudios si vous activez la journalisation, que voyez-vous dans la console du navigateur ?

Veuillez également mettre à jour l'exemple sur votre site pour n'utiliser que ce qui se trouve actuellement dans la branche master, même s'il a le même problème. Cela aidera grandement au débogage.

Troisièmement, veuillez également vérifier si ce problème apparaît ou non même lorsque toutes les extensions Chrome sont désactivées. (Si c'est le cas, je me demande s'il s'agit d'un problème de timing, car le téléchargement et/ou le rendu de l'image est peut-être trop lent ?)

@usmonster

1) la connexion est activée....
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émarrage : images : 1 / 2 (échec : 0) html2canvas.js:21
html2canvas : démarrage : images : 2 / 2 (échec : 0) html2canvas.js:21
Chargement des images terminé : # 2 (échec : 0) html2canvas.js:21
html2canvas : Renderer : rendu Canvas terminé - retour de l'obj canvas html2canvas.js:21

2) Mise à jour vers la branche principale html2canvas.js

3) Oui, j'ai essayé avec tout désactivé. Si c'est le moment, je ne pense pas que ce soit le temps de téléchargement, mais le rendu est très probablement oui.

@4gstudios Avez-vous une autre machine à tester ? De plus, le lien en direct semble toujours utiliser la 0.4.1.

@usmonster oh ok mon mauvais, j'ai corrigé ça. je viens de le tester également sur une machine WinServer2012, Chrome 37, même problème avec le rendu de la boîte noire à la place de bg

Hm, je ne peux toujours pas reproduire le problème sur l'une de mes machines disponibles, mais un collègue pourrait le faire sur sa machine Windows 7. @niklasvh , @brcontainer des idées ? Je pense que c'est quelque chose à voir avec la composition/rasterisation accélérée par GPU spécifique à la plate-forme. J'essaierai de tester cela plus tard cette semaine si je peux accéder à ma machine W7, mais je suis curieux... @4gstudios , que se passe-t-il si vous divisez par deux votre deuxième image et testez à nouveau ? Et continuez à le réduire de moitié (et à ajuster la règle CSS) jusqu'à ce que le bogue disparaisse peut-être ? Je veux voir s'il y a une région "intéressante" du PNG qui déclenche ce problème.

@usmonster s'est produit sur mon Windows 7 x64 avec Chrome. Je vais essayer de faire un DEBUG.
Il y a quelques problèmes qui se produisent dans windows7x64 mais ne se produisent pas dans la version 32, je pense que c'est un bogue de Chrome.

Je suis assez sûr que cela est lié à la taille de l'image originale. Il y a beaucoup de résultats variables avec le rendu de grandes images ou de grandes toiles, et pour autant que je sache, il n'y a pas vraiment de moyens intelligents de détecter la prise en charge de tout cela.

Bien qu'ils ne soient pas directement liés à la taille de l'image source, les résultats variables vous donneront une idée des problèmes liés aux grandes images et aux toiles :

• http://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element
• http://social.msdn.microsoft.com/Forums/windowsapps/en-US/53c368e5-042b-4c3f-8903-ee024f4f7933/canvas-max-size?forum=winappswithhtml5
• https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482 -SW15

Devrait probablement configurer des tests pour les tailles d'image maximales et les tailles de canevas pour différents navigateurs/OS/limites de mémoire afin de mieux comprendre où se trouvent les limites et si elles peuvent être contournées d'une manière ou d'une autre, par exemple en divisant le rendu en plus petits morceaux .

@4gstudios @brcontainer de combien de mémoire vos appareils disposent-ils pour reproduire le problème ?

@niklasvh

• Windows 7 Édition Familiale Premium x64
• Processeur Intel Core i5 M450 2.40Ghz
• 4 Go de RAM

Je vais tester sur windows 32bit (donc possible), mais je pense que le problème ne se produit que sous Windows64bit

comme je le soupçonnais, le problème ne se produit que dans "Windows x64", ainsi que https://github.com/niklasvh/html2canvas/issues/206#issuecomment -17744888, en d'autres termes, fonctionne sous Windows 32 bits, a échoué sous Windows 64 bits , un bug probable de Chrome.

@brcontainer le problème se produit pour moi dans Chrome et Safari sur OS X 10.7 également...

J'ai également testé sur ma machine Windows 7 32 bits, et tout fonctionne bien (pas de bug). Cela ressemble vraiment à un problème de système 64 bits uniquement - belle prise, @brcontainer ! Une autre chose à noter est qu'une nouvelle version de Chrome spécifiquement pour les systèmes 64 bits a été publiée très récemment :

http://blog.chromium.org/2014/08/64-bits-of-awesome-64-bit-windows_26.html
https://www.google.com/chrome/browser/?platform=win64 (lien de téléchargement Windows)
http://blog.chromium.org/2014/08/mac-chrome-when-im-sixty-four-bits.html (Mac est encore en version bêta)

Pour ceux qui ont rencontré ce problème, êtes-vous sûr de ne pas utiliser toujours la version 32 bits ? Je pense que vous devez télécharger manuellement la version 64 bits pour l'obtenir. Il est possible que cela résolve ces problèmes.

@usmonster eh bien, mon Windows7 est en 64 bits. Le bogue affecte à la fois Chrome 32 bits et 64 bits sur Win7 64 bits. Je suppose que cela affecte également certaines machines OSX. Merci pour le lien pour obtenir la version 64 bits de Chrome, même si cela ne résout pas mon problème :cry:

cela ressemble à un bug de Chrome et non à une incompatibilité avec "Windows 64bit" (ou Mac OSX)

@brcontainer Je conviens que cela ressemble à un problème avec les navigateurs Chrome et WebKit sur Windows et Mac 64 bits (mais pas Linux .. du moins pas sur ma boîte Debian 64 bits avec 8 Go de RAM), bien que @4gstudios , étaient pouvez-vous voir le bogue sur Windows 32 bits? Et de combien de RAM disposiez-vous sur vos machines concernées par le problème ?

Ce serait bien de pouvoir réduire ce problème à sa racine. Le deuxième PNG a des dégradés et des dimensions beaucoup plus grandes que le premier PNG. Si j'avais une machine affectée à tester, je couperais le "mauvais" PNG jusqu'à ce que je puisse dire s'il y a une région ou une taille à problème particulière qui le cause. (Peut-être aussi d'intérêt pour @niklasvh : http://wkbug.com/52391)

@usmonster @niklasvh

Dans AppleWebkit (version 538.1) et "Safari 5.1.7" (version 534.57.2 - ce navigateur n'obtient plus de mises à jour) pour Windows .then ne fonctionne pas (pas de déclenchement/déclenchement).

Je n'ai donc pas pu tester s'il s'agit d'une panne de "Webkit" ou d'une panne de "Blink" (engine fork de Webkit dans Chrome) ou encore d'une panne par manque de "RAM".

@brcontainer Je pense qu'il est prudent de supposer que puisque, selon @4gstudios , le bogue était reproductible à la fois dans Safari et Chrome sur OS X, c'est un bogue commun aux moteurs Blink et WebKit, au moins.

@usmonster Je n'ai pas pu tester les fenêtres car .then(...) ne s'exécute pas dans AppleWebkit (version 538.1)

@usmonster J'ai en quelque sorte fait le snip-away tout en créant mon exemple, mais pas de manière super-scientifique. Je vais essayer de mieux le documenter quand j'aurai un peu de temps, mais ce ne sera probablement pas avant une semaine environ.

@usmonster , @brcontainer , @niklasvh , merci pour toute votre aide sur le problème

@niklasvh onrendered est obsolète. Alors, que puis-je utiliser à la place ? J'utilise 0.5.0-alpha1.

De plus, l'image d'arrière-plan ne se télécharge pas bien que les images soient dans le même domaine.

html2canvas($("#foredownload table"), {
journalisation : vrai,
rendu : function(c) {
var monImage = c.toDataURL("images/jpeg");
$('#downloadableImage').prop('href', myImage);
}
});
Toute aide serait appréciée. Merci

@ codegiant2 https://github.com/niklasvh/html2canvas#usage .

Merci fperich cela a fonctionné pour moi !!

@fperich
vous m'aidez beaucoup ! Merci beaucoup !

J'étais face à une image d'arrière-plan du corps recadrée
(petit bounds.height de NodeContainer.prototype.parseBackgroundSize - html2canvas 0.5.0-beta3 ) mon

body {
    background-image: url(./res/bg.jpeg);
    background-repeat:no-repeat;
    background-position:center center;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}

RÉSOLU en ajoutant

html, body {
   margin: 0;
   padding: 0;
   height: 100%;
}

Merci à niklasvh et à tous les contributeurs pour ce joli morceau de code !

j'ai aussi le même problème, je charge à partir de l'image s3 qui ne s'affiche pas dans le canevas, mais je charge localement dans mon système fonctionne bien comment puis-je résoudre

moi aussi j'ai le même problème.

Échec du chargement de l'image d'arrière-plan. je reçois un message d' erreur Erreur lors du chargement de l'arrière-plan :

jsFiddle ici

Merci de m'aider à résoudre ce problème.
Merci,

Salut @gopiss ,

Utilisez l'option corse.

html2canvas(document.body, {
            onrendered: function (canvas) {
.....
            },
            useCORS: true
        });

@fxmontigny.
Le problème de chargement de l' image de bordure existe toujours. voir mon JSFiddle mis à jour.
l'image de bordure ne se charge pas et affiche uniquement une bordure de couleur noire.

Je suis confronté au même problème. ci-dessous sont les journaux de la console chrome
html2canvas : démarrage du préchargement : recherche d'images d'arrière-plan
html2canvas.js:21 html2canvas : début : images : 1 / 1 (échec : 0)
html2canvas.js:21 html2canvas : démarrage : images : 2 / 2 (échec : 0)
html2canvas.js:21 html2canvas : Préchargement : Recherche d'images
html2canvas.js:21 html2canvas : Préchargement : Terminé.
html2canvas.js:21 html2canvas : démarrage : images : 2 / 2 (échec : 0)
html2canvas.js:21 Chargement des images terminé : # 2 (échec : 0)
html2canvas.js:21 html2canvas : Erreur de chargement de l'arrière-plan :
html2canvas.js:21 html2canvas: Renderer: Rendu de canevas terminé - retour de canevas obj

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 original. 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.

Juste un commentaire car cela peut aider quelqu'un.
Mon problème était que localement tout fonctionnait, mais en production, il ne parvenait pas à rendre les images d'arrière-plan CSS.
La raison en était que nous utilisions CloudFront, ce qui signifie que les URL dans le fichier CSS faisaient référence à des actifs sur le domaine cloudfront, tandis que le JS était exécuté sur un domaine séparé.
Cependant, le journal html2canvas n'indiquait pas qu'il s'agissait d'un problème cors.
'useCORS' ne semble pas fonctionner tout seul car je pense qu'il nécessite une URL de proxy ou quelque chose du genre.

@jacobclarke pour moi également le même problème lors de l'utilisation de html2canvas pour capturer les images d'arrière-plan sur le canevas dans les images locales S3 capturent Mais en production, il ne capture pas les images d'arrière-plan. ma version html2canvas est la v1.0.0