Comentario: Debe usar parte de la página web como texto principal, convertir la página web original en PDF como un archivo adjunto, enviar un correo electrónico al jefe, convertir SVG en lienzo para mostrarlo, pero luego descubrió que el lienzo no puede mostrarlo normalmente, por lo que al final debe convertir la etiqueta Canvas en el formato de imagen nuevamente
Recientemente, es necesario poner parte del contenido de la página web en el texto principal, convertir la página web original en un PDF como un archivo adjunto y enviar un correo electrónico al jefe. Dado que somos un sitio web de tipo informe, en HTML5, el desarrollo de control no es más que Canvas o SVG. Aquí tenemos varios controles que usan SVG, y SVG no se puede mostrar normalmente en el cuerpo de correo electrónico de FoxMail, por lo que consideramos convertir SVG a lienzo para mostrar, pero luego descubrimos que el lienzo no puede mostrar normalmente. Al final, no tuvimos más remedio que convertir la etiqueta de lienzo en formato de imagen nuevamente, lo que finalmente resolvió este problema. Presentemos brevemente el proceso de implementación a continuación. La siguiente es una etiqueta SVG<div>
<svg> </svg>
</div>
Primero, debe obtener la etiqueta y el contenido SVG:
var svghtml = svgContainer.innerhtml ();
La conversión de SVG a lienzo requiere un Canvg de Google Plugin. Puede descargarlo en el sitio web oficial o hacer referencia directamente a él de forma remota.
A continuación, llame al método Canvg (CanvasID, SVGHTML) del complemento para convertirlo en lienzo. El primer parámetro de este método es la ID de la etiqueta de lienzo, y el segundo es naturalmente el contenido de la etiqueta SVG. De esta manera, SVG se convierte en lienzo
Luego convierta el lienzo en imágenes, lo cual es más fácil
var imgsrc = document.getElementById (Canvasid) .todataurl (imagen/png); // Esto realmente está convirtiendo el lienzo en una imagen y devuelve todos los datos de contenido de la imagen, como sigue para mostrar la imagen:
<img src = imgsrc />
Así es como implementarlo desde la imagen SVG-> Canvas->. Esto sigue siendo muy útil porque diferentes navegadores admiten diferentes SVG y lienzo. De esta manera, al menos nuestros controles siempre podrán mostrar correctamente, incluso si solo podemos usar imágenes al final.