Code d'idées de conversion entre le canevas SVG et les images dans les compétences du didacticiel html5_html5

Récemment, il est devenu nécessaire de convertir une partie du contenu de la page Web en texte, de convertir la page Web originale en PDF en pièce jointe et de l'envoyer au patron par e-mail. Puisqu'il s'agit d'un site Web de type rapport, le développement du contrôle en HTML5 n'est rien de plus que du canevas ou du svg. Ici, nous avons plusieurs contrôles utilisant svg, et le svg ne peut pas être affiché normalement dans le corps des e-mails FoxMail, nous avons donc envisagé de convertir le svg en canevas pour. display. , mais j'ai découvert plus tard que le canevas ne pouvait pas être affiché normalement. En fin de compte, je n'ai eu d'autre choix que de reconvertir la balise canevas en format d'image, ce qui a finalement résolu le problème. Ce qui suit est une brève introduction au processus de mise en œuvre. Ce qui suit est une balise svg

Copier le code

Le code est le suivant :

la balise svg et le contenu :

var svgHtml = svgContainer.innerHTML();

Pour convertir svg en toile, vous devez utiliser le plug-in canvg de Google, téléchargeable sur le site officiel. ou directement cité à distance

L'étape suivante consiste à appeler la méthode canvg(canvasId,svgHtml) du plug-in pour convertir en canevas. Le premier paramètre de cette méthode est l'identifiant de la balise canvas, et le deuxième paramètre. est naturellement le contenu de la balise svg. De cette façon, svg est converti en canevas

Convertissez ensuite le canevas en image, ce qui est encore plus simple

var imgSrc = document.getElementById(. canvasId).toDataUrl("image/png");//Il s'agit en fait d'une conversion. Le canevas est converti en image et toutes les données de contenu de l'image sont renvoyées. L'image peut être affichée comme suit :

<.>


Copier le code

Code comme suit :

Il s'agit de la méthode d'implémentation de svg->canvas->image. Ceci est toujours très utile Oui, car différents navigateurs ont un support différent pour svg et canvas. Dans ce cas, au moins nos contrôles auront toujours un. manière d'afficher correctement, même si on ne peut finalement utiliser que des images.