svg图转canvas，完全阔以的

Posted 2020-09-25 黑夜蓝天

遇到的问题：页面中存在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，这时候就需要在控制台仔细的看需要去转化的那部分图具体在哪个层级结构，然后把它拿到，再用上面的方法转换。

注意：

1. 转换时需要注意canvas容器的父级div的z-index值（用个div将canvas包裹下，比较方便），以免生成后被其他图遮盖。
2. 可能会遇到一个问题，就是你svg图画的字符串拿到了，也用canvg转化好了，在你转换成功后，图也能在页面完全显示，但是但是导出或下载的图片上可能仍然没有显示你转化的那部分。 这问题也许是在导出或者下载时导致的，具体原因我目前木有找，哪位童鞋清楚的请多多赐教。这个问题的解决方法就是，你需要去找具体是页面中哪个图在下载的时候将你生成的canvas 遮挡了，然后去更改那个图的opacity。改到不影响彼此的效果即可。

最新版canvg.js  地址：http://download.csdn.net/detail/qq_25042329/9877006