Code for converting svg canvas and images in html5

Comments: You need to make part of the webpage as the body, convert the original webpage to pdf as an attachment, send an email to boss, and convert svg to canvas for display. However, you can see that canvas cannot be normally displayed, the last resort is that the canvas label can only be converted to the image format again. Recently, there is a need to make some content of the webpage into the body, convert the original webpage into a pdf as an attachment, and send an email to the boss. Because we are a report-type website, the control development in html5 is nothing more than canvas or svg. Here we have several controls that use svg, and svg cannot be normally displayed in the FoxMail mail body, therefore, we considered converting svg to canvas display, but later we found that canvas could not be normally displayed. Finally, we had to convert the canvas label to the image format again, and finally solved this problem. The following describes the implementation process. The following is an svg tag.

The Code is as follows:
<Div id = "svgContainer">
<Svg id = "svg"> </svg>
</Div>

First, you need to obtain the svg tag and content:

Var svgHtml = svgContainer. innerHTML ();

To convert svg to canvas, you need to use google's plug-in canvg, which can be downloaded from the official website or remotely referenced.

Next, call the canvg (canvasId, svgHtml) method of the plug-in to convert it into a canvas. The first parameter of this method is the id of the canvas tag, and the second parameter is the content of the svg tag, svg is converted to canvas

The canvas is converted into an image, which is simpler.

Var imgSrc = document. getElementById (canvasId ). toDataUrl ("image/png"); // This actually converts the canvas into an image and returns all the content data of the image, as shown below:

The Code is as follows:


This is the implementation method from svg-> canvas-> image. This is useful because different browsers have different support for svg and canvas. In this case, at least our controls can always be correctly displayed, even if we can only use images at the end.