Code of conversion ideas between svg canvas and pictures in html5_html5 tutorial skills

Recently, there was a need to convert part of the content of the web page into the text, convert the original web page into a pdf as an attachment, and send it to the boss via email. Since this is a report type website, the control development in HTML5 is nothing more than canvas or svg. Here we have several controls using svg, and svg cannot be displayed normally in the body of FoxMail emails, so we considered converting svg to canvas for display. , but later found that the canvas could not be displayed normally. In the end, I had no choice but to convert the canvas tag into an image format again, which finally solved the problem. The following is a brief introduction to the implementation process. The following is an svg tag

Copy code

The code is as follows:

First you need to get 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 directly quoted remotely

The next step is to call the plug-in's canvg(canvasId,svgHtml) method to convert to canvas. The first parameter of this method is the id of the canvas tag, and the second parameter is naturally the content of the svg tag. In this way, svg is converted to canvas.

Then convert the canvas into a picture, which is even simpler

var imgSrc = document.getElementById(canvasId).toDataUrl("image/png");//This is actually converting The canvas is converted into a picture and all content data of the picture is returned. The picture can be displayed as follows:

Copy code

Code As follows:

This is the implementation method from svg->canvas->image. This is still very useful. Yes, because different browsers have different support for svg and canvas. In this case, at least our controls will always have a way to display correctly, even if we can only use images in the end.