Html2canvas: 'SVGElement.offsetWidth' est obsolète et sera supprimé dans M50, vers avril 2016

Créé le 9 avr. 2016 · 26Commentaires · Source: niklasvh/html2canvas

Google a refusé de prendre en charge "offsetWidth" pour SVG.
Il y a des idées ?

Doc : https://www.chromestatus.com/features/5724912467574784

Source

alex-wdmg

Commentaire le plus utile

Je l'ai résolu... J'ajouterai la solution à la fin de la semaine si je
avoir le temps. Désolé pour le retard... Cela fonctionne sur FF, Safari et Chrome.
Meilleur.
Le mercredi 29 juin 2016 à 19h00, Yuki K [email protected] a écrit :

@Dayjo https://github.com/Dayjo Oui, j'ai remarqué cela aussi. Les SVG sont
totalement dans la mauvaise position et sont presque toujours hors de l'écran maintenant que
tous les offset*s sont évalués comme indéfinis. J'ai aussi essayé de résoudre
ceci en utilisant getBoundingClientRect récursif - mais pas de chance :( je vais prendre un
regarde ta branche.
-
Vous recevez ceci parce que vous avez été mentionné.
Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/niklasvh/html2canvas/issues/846#issuecomment -229420457,
ou couper le fil
https://github.com/notifications/unsubscribe/ABWsecUQ2l-rxisMZ4HCKu1nh-mbIMU1ks5qQqSQgaJpZM4IDr12
.

chemitaxis le 29 juin 2016

🎉3

Tous les 26 commentaires

J'étais sur le point de soulever ça ! Légèrement inquiet, quelque chose cessera de fonctionner ce mois-ci.

Dayjo le 12 avr. 2016

Oui, apparemment à la bêta d'Opera 37 ne fonctionne pas. En outre, la dernière version des problèmes de plug-in pour afficher les arrière-plans et les bordures. J'en ai un, ils ne vérifient pas?

Dans la démo également, les arrière-plans et les bordures ne s'affichent pas ((

alex-wdmg le 12 avr. 2016

C'est un gros problème car nos SVG ne seront plus rendus.

Le plus grand coupable est au sein de cette fonction :

function offsetBounds(node) {
    var parent = node.offsetParent ? offsetBounds(node.offsetParent) : {top: 0, left: 0};

    return {
        top: node.offsetTop + parent.top,
        bottom: node.offsetTop + node.offsetHeight + parent.top,
        right: node.offsetLeft + parent.left + node.offsetWidth,
        left: node.offsetLeft + parent.left,
        width: node.offsetWidth,
        height: node.offsetHeight
    };
}

lines 1887 - 1898 dans html2canvas.js

Tous les offsetTop, offsetLeft, offsetWidth, offsetHeight sont désormais indéfinis pour les SVG

La solution recommandée est getBoundingClientRect() , mais elle ne fonctionne toujours pas.

Quelqu'un at-il une solution pour cela?

MarcBalaban le 19 avr. 2016

@MarcBalaban Je ne l'ai pas encore essayé, mais ne serait-ce pas simplement ajouter cela au-dessus du retour dans cette fonction;

if ( node.tagName === 'SVG' ) {
    return node.getBoundingClientRect();
  }

Dayjo le 19 avr. 2016

@Dayjo malheureusement non, c'est définitivement sur la bonne voie, mais cette ligne

var parent = node.offsetParent ? offsetBounds(node.offsetParent) : {top: 0, left: 0};

ne s'exécute pas correctement non plus car offsetParent a également été déprécié :

MarcBalaban le 19 avr. 2016

Hmm ouais, en y regardant un peu plus, il peut être nécessaire d'utiliser quelque chose comme la fonction getBoundingBoxInArbitrarySpace ici ; https://svn.apache.org/repos/asf/commons/sandbox/gsoc/2010/scxml-js/trunk/src/javascript/scxml/cgf/util/svg.js selon http://stackoverflow.com /questions/5996005/how-to-use-element-offsetparent-with-html-svg-elements#answers

Pas encore eu l'occasion de faire des tests.

Dayjo le 20 avr. 2016

Des nouvelles de ce problème ? Merci!

chemitaxis le 19 mai 2016

@chemitaxis - malgré l'avertissement, jusqu'à présent, je n'ai eu aucun problème avec le résultat de html2canvas. Cependant, qui sait si / quand ce changement sera réellement mis en œuvre dans Chrome

Dayjo le 7 juin 2016

On dirait que cela a maintenant cessé de fonctionner Chrome. Les SVG semblent ne pas être rendus du tout, de manière incorrecte ou à la mauvaise échelle/position dans le canevas.

@niklasvh - des idées à ce sujet ? Si j'avais le temps, je serais ravi d'essayer une solution, mais je suis choca pour le moment.

Dayjo le 28 juin 2016

J'ai tenté ma chance en utilisant https://svn.apache.org/repos/asf/commons/sandbox/gsoc/2010/scxml-js/trunk/src/javascript/scxml/cgf/util/svg.js

Mais je ne savais pas trop où je devais l'implémenter, j'ai essayé à la fois les fonctions offsetBounds et getBounds mais en vain. Les coordonnées X et Y semblent être correctes, mais la largeur et la hauteur sont toutes fausses, je ne sais pas si c'est parce que j'utilise css pour faire le SVG à 100% de la largeur du conteneur et de la hauteur automatique. Il faudrait faire des tests plus poussés.

J'ai une branche préliminaire en cours ici (https://github.com/Dayjo/html2canvas/tree/issue-846), en utilisant le dernier commit bêta. si quelqu'un veut tester, il devrait pouvoir utiliser la version dist , ou simplement reconstruire si vous le souhaitez. Aucune idée à quel point cela fonctionnera bien / si cela fonctionnera.

Dayjo le 28 juin 2016

@Dayjo Oui, j'ai remarqué cela aussi. Les SVG sont totalement dans la mauvaise position et sont presque toujours hors de l'écran maintenant que tous les décalages sont évalués comme indéfinis. J'ai également essayé de résoudre ce problème en utilisant getBoundingClientRect récursif - mais pas de chance :( Je vais jeter un œil à votre branche.

sumigoma le 29 juin 2016

@Dayjo https://github.com/Dayjo Oui, j'ai remarqué cela aussi. Les SVG sont
totalement dans la mauvaise position et sont presque toujours hors de l'écran maintenant que
tous les offset*s sont évalués comme indéfinis. J'ai aussi essayé de résoudre
ceci en utilisant getBoundingClientRect récursif - mais pas de chance :( je vais prendre un
regarde ta branche.
-
Vous recevez ceci parce que vous avez été mentionné.
Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/niklasvh/html2canvas/issues/846#issuecomment -229420457,
ou couper le fil
https://github.com/notifications/unsubscribe/ABWsecUQ2l-rxisMZ4HCKu1nh-mbIMU1ks5qQqSQgaJpZM4IDr12
.

chemitaxis le 29 juin 2016

🎉3

@chemitaxis Génial ! Dans l'attente du correctif.

sumigoma le 29 juin 2016

Hey @chemitaxis , pouvez-vous créer un PR ou un lien vers votre fourchette si vous avez le temps ?

sumigoma le 7 juil. 2016

👍1

@chemitaxis des progrès à ce sujet ? J'espère tester le code sur un projet que je suis en train de faire pour voir s'il résout tous mes problèmes SVG, en particulier avec IE.

atdiff le 21 juil. 2016

Salut @atdiff :) J'ai résolu le problème en utilisant d'autres bibliothèques...

Ce n'est pas une solution mais j'ai trouvé une petite solution de contournement. Je ne pouvais pas non plus faire en sorte que SVG s'affiche correctement dans Chrome, mais il s'afficherait dans Safari. Tout ce que j'ai fait, c'est d'ajouter un attribut de largeur à l'élément en ligne SVG. Même avec un attribut de largeur inexact, il s'imprime comme il se doit dans Chrome et Safari :

    var deferred = $q.defer();

    element.find('svg').attr('width', '100px');

    html2canvas(element, {
        background: '#eee',
        onrendered: function(canvas) {
            var a = document.createElement('a');
            a.href = canvas.toDataURL('image/jpeg', 1).replace('image/jpeg', 'image/octet-stream');
            a.download = fileName + '.jpg';
            a.click();
            deferred.resolve();
        }
    });

    return deferred.promise;

Edit : quelque chose à ajouter qui n'est pas lié, mais d'autres peuvent trouver utile lors de la recherche ici. Firefox ne semble pas fonctionner avec ma méthode ci-dessus. Mon SVG avait # signes pour les couleurs hexadécimales (ex: #ccc). Comme il s'agit de caractères réservés dans les URL et que Firefox est strict à ce sujet, le SVG n'apparaissait pas. J'ai remplacé les valeurs rgb à la place et maintenant Firefox s'affiche correctement.

jgunderson-IAS le 20 oct. 2016

@jgunderson-IAS merci pour cela, je vais l'essayer comme solution de contournement rapide.

J'espère que j'aurai l'occasion de passer une journée à examiner ce bogue, eh bien, peut-être une demi-journée à ce sujet, puis une demi-journée à ce pour quoi je l'utilise, mais cela devrait me donner l'opportunité d'implémenter éventuellement un vraie solution.

@niklasvh je ne sais pas si vous avez examiné cela du tout, ou si vous avez des suggestions sur la meilleure façon de mettre en œuvre un correctif (voir : https://github.com/niklasvh/html2canvas/issues/846#issuecomment-229035694 )

Dayjo le 21 oct. 2016

@jgunderson-IAS J'ai explicitement défini la taille des SVG, et bien que cette approche hacky signifie qu'ils sont rendus, il semble que la taille soit incohérente, je définis à la fois les propriétés de hauteur et de poids et pourtant ils apparaissent régulièrement " écrasés '. Malheureusement, mes pages reposent sur des tailles svg contrôlées par CSS et représentant 100% de leur conteneur, donc bien qu'il s'agisse d'un tremplin, je pense que je vais devoir recoder la bibliothèque pour calculer correctement les tailles

Dayjo le 24 oct. 2016

Voici un exemple de la façon dont les svg sont rendus maintenant que je règle la largeur de l'événement 'onClone' en fonction de la largeur de l'élément parent (tous les svg sont définis sur 100% de largeur en css), la hauteur semble le gâcher encore plus;

html

Toile

J'utilise;

onclone: function(doc){
    var w,h;
    var svgs = doc.querySelectorAll('svg');
    for ( var s = 0; s < svgs.length; ++s ) {
        w = svgs[s].parentElement.offsetWidth;
        svgs[s].setAttribute('width', w );
    }
}

Il semble que cela dépende vraiment du svg lui-même quant à la qualité du rendu de ses proportions. Par exemple, le premier svg (feuille) est beaucoup plus écrasé que les deux autres.

Dayjo le 24 oct. 2016

Malheureusement, j'ai dû abandonner l'utilisation de html2canvas et utiliser à la place une solution côté serveur ( wkhtmltoimage ) précisément parce qu'elle ne peut pas rendre les svg avec précision. Je n'ai pas réussi à le faire fonctionner en utilisant getBoundingClientRect ou getBBox etc.

Dayjo le 24 oct. 2016

Corrigé dans 1.0.0