The way in which svg canvas and pictures are transformed into each other in html5

This article introduces the knowledge of "the way of mutual transformation between svg canvas and pictures in html5". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Recently, there is a need to make part of the content of the web page as the body, and convert the original web page into pdf as an attachment and send email to boss. As we are this is a report type website, control development in html5 is nothing more than canvas or svg, here we have several controls using svg, and svg in the body of the FoxMail email can not be displayed normally, so consider turning svg into canvas display, but later found that canvas can not be displayed normally, finally had no choice but to turn the canvas tag into a picture format again, and finally solved this problem. Here is a brief introduction to the implementation process. The following is a svg tag

The code is as follows:

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

Var svgHtml = svgContainer [XSS _ clean] ()

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

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

Then the canvas is converted into a picture, and this is even easier.

Var imgSrc = document.getElementById (canvasId) .toDataUrl ("image/png"); / / this actually converts canvas into an image and returns all the content data of the image, which can be displayed as follows:

The code is as follows:

This is the implementation from svg- > canvas- > image, which is useful because different browsers have different support for svg and canvas, so at least there is always a way for our controls to display correctly, even if we end up using images.

This is the end of the content of "the way svg canvas and pictures transform each other in html5". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!