svg转canvas转img,demo_矢量图转canvas资源-CSDN文库

共5个文件

js：4个

html：1个

svg转canvas

canvas转img

3星 · 超过75%的资源需积分: 49 46 浏览量 2015-04-27 17:28:02 上传评论 4 收藏 47KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

svg转canvas转img并下载.rar （5个子文件）

svg转canvas转img并下载

zhu.html 2KB

canvg.js 57KB

canvas2image.js 7KB

base64.js 3KB

jquery-1.8.3.min.js 91KB

<!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>

评论收藏

内容反馈