Methods for converting SVG and canvas and IMG images in HTML5 Web pages

The picture displayed in the Web page or graphics, generally only a few, for static content, most will choose JPG, PNG, gif pictures, these pictures called bitmaps, magnified will appear sawtooth, is not easy to change the graphics, if you want to achieve magnification and more accurate display graphics, SVG and canvas will be a better choice, but using canvas may encounter compatibility issues.

General charts are using vector-drawn format pictures, of course, with flash technology, for browser compatibility, it is difficult to meet both sufficient precision, and graphics small enough to facilitate transmission, but there is a solution is to convert these graphics, Let's talk today about the conversion methods for SVG and canvas and IMG images in HTML5 Web pages.

SVG converted to Canvas

Let's say we have the following SVG code

<div id= "Svgcontainer" >
<svg id= "SVG" ></svg>
</div>

First you need to get the SVG tags and content:

<script>
var svghtml = document.getElementById (' Svgcontainer '). InnerHTML ();
</script>

Turn SVG into canvas need to use a Google plug-in CANVG, can be the last officer net download, can also be directly remote reference to come in
The next step is to call the plug-in's CANVG (canvasid,svghtml) method to turn canvas, the first parameter is the ID of the canvas tag, the second is the SVG tag content, so, SVG turned into canvas.

<canvas id= "Canvasid" ></canvas>
<script>
Canvasid = document.getElementById (' Canvasid ');
CANVG (canvasid,svghtml)
</script>

Convert Canvas to Picture

And then it's a little more simple to turn canvas into pictures.

var imgsrc = document.getElementById (canvasid). Todataurl ("Image/png");

This is actually the canvas into a picture, and return the image of all the content data, such as the following can display pictures:

<script>
document.getElementById (' myimg '). src = imgsrc;
</script>

This is the conversion method for SVG and canvas and IMG images in the HTML5 Web page, which is useful because different browsers support SVG and canvas differently, so at least our controls have a way to display them correctly, even if we end up with pictures.