Commentaire: Vous devez utiliser une partie de la page Web comme texte principal, convertir la page Web d'origine en PDF comme pièce jointe, envoyer un e-mail au boss, convertir SVG en toile pour l'afficher, mais j'ai trouvé plus tard que la toile ne peut pas l'afficher normalement, donc à la fin, vous devez convertir la balise Canvas à nouveau dans le format d'image
Récemment, il est nécessaire de mettre une partie du contenu de la page Web dans le texte principal, de convertir la page Web d'origine en PDF en tant que pièce jointe et d'envoyer un e-mail au boss. Puisque nous sommes un site Web de type rapport, dans HTML5, le développement du contrôle n'est rien de plus que toile ou SVG. Ici, nous avons plusieurs contrôles qui utilisent SVG, et SVG ne peut pas être affiché normalement dans le corps de messagerie FoxMail, nous avons donc envisagé de convertir SVG en toile pour afficher, mais plus tard, nous avons constaté que la toile ne peut pas afficher normalement. En fin de compte, nous n'avions pas d'autre choix que de convertir à nouveau la balise Canvas au format d'image, ce qui a finalement résolu ce problème. Présent brièvement le processus de mise en œuvre ci-dessous. Ce qui suit est une balise SVG<div>
<svg> </svg>
</div>
Tout d'abord, vous devez obtenir la balise SVG et le contenu:
var svghtml = svgContainer.InnerHtml ();
La conversion de SVG en Canvas nécessite un canevg de plugin Google. Vous pouvez le télécharger sur le site officiel ou le référer directement à distance.
Ensuite, appelez la méthode canvg (canvasid, svghtml) du plug-in pour le convertir en canevas. Le premier paramètre de cette méthode est l'ID de la balise Canvas, et le second est naturellement le contenu de la balise SVG. De cette façon, SVG est converti en toile
Puis convertir la toile en images, ce qui est plus facile
var imgsrc = document.getElementById (canvasid) .todataurl (image / png); // Il s'agit en fait de convertir le canevas en une image et de renvoyer toutes les données de contenu de l'image, comme suit pour afficher l'image:
<img src = imgsrc />
C'est comment l'implémenter à partir de l'image SVG-> Canvas->. Ceci est toujours très utile car différents navigateurs prennent en charge différents SVG et toiles. De cette façon, au moins nos contrôles pourront toujours s'afficher correctement, même si nous ne pouvons utiliser des images qu'à la fin.