J'essaie de convertir un SVG généré par Raphael JS (et l'utilisateur, puisque vous pouvez faire glisser et Faites pivoter les images). J'ai suivi cette Convertir SVG en image (JPEG, PNG, etc.) dans le navigateur mais je ne peux toujours pas l'obtenir.
Ça doit être facile mais je ne peux pas mettre mon doigt sur ce que je me trompe.
J'ai mon svg dans une div avec L'alerte me donne : quel est le XML du SVG et si je crois Documentation Canvg , c'est bon. Quoi qu'il en soit, avec ce code, la variable La seule chose que je suppose que le SVG généré par Raphael JS n'est pas bien formé pour Canvg (comme, Quelqu'un a une idée sur ce problème? : D #ec comme id et la canvas est #Canvas . img , qui doit avoir les données d'image converties, obtenu les données de Un png vide avec les dimensions du SVG. href de image devrait être xlink: href si je suis Les recommandations W3C )
3 Réponses :
J'ai travaillé avec SVG - Modifier et généré des images SVG, ce que nous avons fait était installez ImageMagic sur le serveur (vous l'avez probablement installé déjà).
Une fois installé Vous n'avez besoin que d'exécuter une commande comme "convertir foo.svg foo.png" dans le terminal. Si vous utilisez php, vous pouvez faire: P>
shell_exec("convert image.svg image.png");
Malheureusement, je n'ai pas d'imagemagick installé sur mon serveur partagé, je ne peux donc pas l'installer non plus. Néanmoins, c'est une bonne idée si quelqu'un a eu le même problème que le mien. +1
mais dans votre code, vous passez au contenu HTML du code DIV #ec code> comme p> JQuery's Canvg code> Accepte les données code> SVG code> Un chemin de fichier ou une chaîne à une seule ligne $. html () code> et DOM'S innerhtml code> Les méthodes renvoient le Contenu HTML d'un élément tel que, tellement probablement dans plusieurs lignes. P> Canvg code> interprète ce contenu HTML multi-lignes en tant que chemin de fichier, P> function saveDaPicture(){
var img = document.getElementById('canvas').toDataURL("image/png");
$('body').append('<img src="'+img+'"/>');
}
$('#save').click(function(){
var svg = $('#ec').html().replace(/>\s+/g, ">").replace(/\s+</g, "<");
// strips off all spaces between tags
//alert(svg);
canvg('canvas', svg, {renderCallback: saveDaPicture, ignoreMouse: true, ignoreAnimation: true});
});
C'est peut-être ceci, maintenant que vous le signalez. N'y a-t-il pas un moyen de faire une multiline dans une seule ligne?
Bien sûr, vous pouvez convertir MULLINE en ligne unique, je mette à jour ma réponse
svgfix.js va résoudre ces erreurs. Jetez un coup d'œil à ce blog post Export Raphaël graphique sur Image
Salut Ignacio! Ici sur la pile débordement, Lien Seules les réponses ne sont pas considérées comme des réponses . Sauf si vous avez enfui avec du code, votre réponse est en danger d'être supprimé par le FAQ section sur la suppression, surtout "< Les réponses qui ne répondent pas fondamentalement à la question peuvent être supprimées. Cela inclut des réponses qui sont ... à peine plus qu'un lien vers un site externe "
qui est une honte, parce que c'est la meilleure réponse
Juste un fyi, cela nécessite un élément
Est-ce que la toile Canvg rend l'image correctement? Pouvez-vous créer un lien vers un exemple en direct que je pourrais jouer avec?
@Shikiryu Avez-vous trouvé une solution? J'ai similaire Question