svg圖轉canvas，完全闊以的

遇到的問題：頁面中存在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 下載 點我   上文對你有幫助的話請來個推薦，謝謝