<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script src="js/canvas2image.js"></script>
<script src="js/base64.js"></script>
<script src="js/canvg.js"></script>
<script type="text/javascript">
function saveCanvas(pCanvas, strType) {
var bRes = false;
if (strType == "PNG")
bRes = Canvas2Image.saveAsPNG(pCanvas);
if (strType == "BMP")
bRes = Canvas2Image.saveAsBMP(oCanvas);
if (strType == "JPEG")
bRes = Canvas2Image.saveAsJPEG(oCanvas);
if (!bRes) {
alert("Sorry, this browser is not capable of saving " + strType + " files!");
return false;
}
}
function aa()
{
var svgHtml=document.getElementById("container").innerHTML.Trim();
var canvasId=document.getElementById("canvasId");
canvg(canvasId,svgHtml);
}
function a2(){
var ccc = document.getElementById("canvasId");
var imgsrc=document.getElementById("myImg");
var a=convertCanvasToImage(ccc).src;
imgsrc.src=a;
}
function a3(){
var oCanvas = document.getElementById("canvasId");
saveCanvas(oCanvas, "PNG");
}
// Converts canvas to an image
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
String.prototype.Trim = function () {
return this.replace(/(^\s*)|(\s*$)/g, "");
};
</script>
</head>
<body>
<input type="button" value="转化为canvas" onClick="aa()" />
<input type="button" value="转化为img" onClick="a2()" />
<input type="button" value="下载img" onClick="a3()" />
<div id="container" style="min-width:700px;height:400px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100" style="fill:rgb(50,50,200);stroke-width:1;stroke:rgb(0,0,0)" />
</svg>
</div>
<canvas id="canvasId" ></canvas>
<img src='' id='myImg' style="width:100%; height:400px;" />
</body>
</html>