遇到的问题:页面中存在svg画的图,也存在canvas图,在用 html2canvas 截取页面的图就导致有图画缺失,至少我需要的缺失了。
一、如果页面单纯的存在一个svg画的图,转为canvas就很好考虑,就是将svg的图画代码转为字符串,去空格,然后用canvg.js的方法,
canvg("canvasId","svgHTML")转化,其中canvasId这个对象是你页面的canvas容器(你也可以动态生成它),svgHTML是你拿到的svg 图画的字符串。示例如下:
<div id="container" style="min-width:700px;height:400px"> <svg> <line x1="0" y1="10" x2="0" y2="100" style="stroke:#006600;"/> <line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600;"/> <line x1="20" y1="10" x2="100" y2="50" style="stroke:#006600;"/> <line x1="30" y1="10" x2="110" y2="10" style="stroke:#006600;"/> </svg> </div> <input type="button" value="svg转为canvas" onClick="change()" /> <canvas id="canvasId" ></canvas> <script src="js/canvg.js"></script> <script type="text/javascript"> function change(){ var svgHtml=document.getElementById("container").innerHTML.trim(); var canvasId=document.getElementById("canvasId"); canvg(canvasId,svgHtml); } </script>
二、当然实际项目中真正需要去转化的图应该不会那么简单,一个大的容器中可能有很多层的svg、canvas,这时候就需要在控制台仔细的看需要去转化的那部分图具体在哪个层级结构,然后把它拿到,再用上面的方法转换。
注意:
最新版canvg.js 地址:http://download.csdn.net/detail/qq_25042329/9877006
原文:http://www.cnblogs.com/1rookie/p/7082883.html