Canvg |將SVG轉換爲畫布以輸出爲圖像

我在SVG中有複雜的交互式圖形。我想把SVG變成一個隱藏的畫布，這樣我可以讓用戶輸出爲png/pdf。Canvg |將SVG轉換爲畫布以輸出爲圖像

test111.js創建div＃forSVG然後svg＃svg（加上圓圈，路徑，文本）。

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="sql.css"> 
     <script type="text/javascript" src="d3.v3.js"></script> 


     <script type="text/javascript"> 
      function start() { 

       var canvas = document.getElementById("canvas"); 

       var svg = document.getElementById("forSVG"); 
       var svgWider = svg.outerHTML; 

       console.log(svg); 

       canvg(canvas, svg); 

      } 
     </script>   




    </head> 
    <body onload="start()"> 
     <script type="text/javascript" src="test111.js"></script> 

<script type="text/javascript" src="rgbcolor.js"></script> 
<script type="text/javascript" src="StackBlur.js"></script> 
<script type="text/javascript" src="canvg.js"></script> 


<canvas id="canvas" width="100%" height="600px"></canvas> 

</body>

我已經嘗試使用SVG＃SVG，DIV＃forSVG和div.outerHTML作爲輸入canvg功能，但我不斷地得到一個錯誤，如：

TypeError: undefined is not a function (evaluating 's.substr(0,1)')

有是不同的錯誤，但他們都圍繞canvg.js的第50行，我懷疑他們都關心s變量未定義。編輯1640：canvg.js的相關行告訴我們，s是什麼：

this.canvg = function (target, s, opts) {

所以，當我打電話canvg（畫布，SVG）我覺得s是我進入了SVG變量（選是可選的）。 Console.logging（typeof svg）返回對象。

首先60行canvg.js的：編輯

/* 
* canvg.js - Javascript SVG parser and renderer on Canvas 
* MIT Licensed 
* Gabe Lerner (gabel[email protected]) 
* http://code.google.com/p/canvg/ 
* 
* Requires: rgbcolor.js - http://www.phpied.com/rgb-color-parser-in-javascript/ 
*/ 
(function(){ 
    // canvg(target, s) 
    // empty parameters: replace all 'svg' elements on page with 'canvas' elements 
    // target: canvas element or the id of a canvas element 
    // s: svg string, url to svg file, or xml document 
    // opts: optional hash of options 
    //  ignoreMouse: true => ignore mouse events 
    //  ignoreAnimation: true => ignore animations 
    //  ignoreDimensions: true => does not try to resize canvas 
    //  ignoreClear: true => does not clear canvas 
    //  offsetX: int => draws at a x offset 
    //  offsetY: int => draws at a y offset 
    //  scaleWidth: int => scales horizontally to width 
    //  scaleHeight: int => scales vertically to height 
    //  renderCallback: function => will call the function after the first render is completed 
    //  forceRedraw: function => will call the function on every frame, if it returns true, will redraw 
    this.canvg = function (target, s, opts) { 
     // no parameters 
     if (target == null && s == null && opts == null) { 
      var svgTags = document.querySelectorAll('svg'); 
      for (var i=0; i<svgTags.length; i++) { 
       var svgTag = svgTags[i]; 
       var c = document.createElement('canvas'); 
       c.width = svgTag.clientWidth; 
       c.height = svgTag.clientHeight; 
       svgTag.parentNode.insertBefore(c, svgTag); 
       svgTag.parentNode.removeChild(svgTag); 
       var div = document.createElement('div'); 
       div.appendChild(svgTag); 
       canvg(c, div.innerHTML); 
      } 
      return; 
     } 

     if (typeof target == 'string') { 
      target = document.getElementById(target); 
     } 

     // store class on canvas 
     if (target.svg != null) target.svg.stop(); 
     var svg = build(opts || {}); 
     // on i.e. 8 for flash canvas, we can't assign the property so check for it 
     if (!(target.childNodes.length == 1 && target.childNodes[0].nodeName == 'OBJECT')) target.svg = svg; 

     var ctx = target.getContext('2d'); 
     if (typeof(s.documentElement) != 'undefined') { 
      // load from xml doc 
      svg.loadXmlDoc(ctx, s); 
     } 
     else if (s.substr(0,1) == '<') { 
      // load from xml string 
      svg.loadXml(ctx, s); 
     } 
     else { 
      // load from url 
      svg.load(ctx, s); 
     } 
    }

END

誰能發現我做了什麼錯？變量svg在查找已動態創建的div和svg時沒有任何問題（它們正在正確記錄到控制檯）。謝謝

來源

2015-12-02 emma

如果問題發生在canvg.js：50附近，那麼我建議發佈canvg.js。當沒有什麼可看的時候，很難幫助診斷問題。 – Teeeeeeeeeeeeeeeeeeeeeeeeeeeej

關閉我的頭頂，我會建議檢查「s」是什麼。它實際上可能不是一個字符串，所以做「s.substr（0,1）」將是錯誤中引用的「undefined」。

來源

2015-12-02 16:32:44 Teeeeeeeeeeeeeeeeeeeeeeeeeeeej

謝謝TJ - 你的觀點幫助我走向了正確的方向。

Canvg似乎需要一個字符串或html輸入，而不是一個對象。所以這工作：

  var canvas = document.getElementById("canvas"); 

      var svg = document.getElementById("div#forSVG"); 
      var svgWider = svg.innerHTML; 
      canvg(canvas, svgWider);

來源

2015-12-02 16:53:36 emma

Canvg |將SVG轉換爲畫布以輸出爲圖像

回答

相關問題