Comment: You need to use part of the web page as the main text, convert the original web page into pdf as an attachment, send an email to the boss, convert svg into canvas to display it, but later found that canvas cannot display it normally, so in the end, you have to convert the canvas tag into the picture format again
Recently, there is a need to put part of the content of the web page into the main text, convert the original web page into a pdf as an attachment, and send an email to the boss. Since we are a report-type website, in html5, the control development is nothing more than canvas or svg. Here we have several controls that use svg, and svg cannot be displayed normally in the FoxMail email body, so we considered converting svg to canvas to display, but later we found that canvas cannot display normally. In the end, we had no choice but to convert the canvas tag to image format again, which finally solved this problem. Let’s briefly introduce the implementation process below. The following is an svg tag<div>
<svg></svg>
</div>
First, you need to get the svg tag and content:
var svgHtml = svgContainer.innerHTML();
Converting svg to canvas requires a Google plugin Canvg. You can download it on the official website or directly reference it remotely.
Next, call the canvg(canvasId, svgHtml) method of the plug-in to convert it to canvas. The first parameter of this method is the id of the canvas tag, and the second is naturally the content of the svg tag. In this way, svg is converted to canvas
Then convert canvas into pictures, which is easier
var imgSrc = document.getElementById(canvasId).toDataUrl(image/png);//This is actually converting canvas into an image and returning all the content data of the image, as follows to display the image:
<img src=imgSrc />
This is how to implement it from svg->canvas->image. This is still very useful because different browsers support different svg and canvas. In this way, at least our controls will always be able to display correctly, even if we can only use images in the end.