svg導出爲png僅使用Angular導出JavaScript中呈現的小部分/部分渲染svg

Question

我需要一些關於將呈現的svg文字雲導出爲png的建議。

我讓我的設置工作排序，但它只輸出一部分呈現的文字雲。

我認爲這可能與我需要設置的尺寸有關。我不確定。

這是我的角/ JavaScript的導出功能：

scope.exportToPNG2 = function() { 

    var svg = document.querySelector('#wordCloudSVG'); 

    var canvas = document.getElementById('WordCloudCanvas'); 

    var ctx = canvas.getContext('2d'); 
    var data = (new XMLSerializer()).serializeToString(svg); 
    var DOMURL = window.URL || window.webkitURL || window; 

    var img = new Image(); 
    var svgBlob = new Blob([data], { type: 'image/svg+xml;charset=utf-8' }); 
    var url = DOMURL.createObjectURL(svgBlob); 

    img.onload = function() { 
     ctx.drawImage(img, 0, 0); 
     DOMURL.revokeObjectURL(url); 

     var imgURI = canvas 
      .toDataURL('image/png') 
      .replace('image/png', 'image/octet-stream'); 

     triggerDownload(imgURI); 
    }; 

    img.src = url; 
} 


function triggerDownload(imgURI) { 
    var evt = new MouseEvent('click', { 
     view: window, 
     bubbles: false, 
     cancelable: true 
    }); 

    var a = document.createElement('a'); 
    a.setAttribute('download', 'MY_COOL_IMAGE.png'); 
    a.setAttribute('href', imgURI); 
    a.setAttribute('target', '_blank'); 

    a.dispatchEvent(evt); 
} 

這是我的話，雲渲染到模板：

<div id="wordCloud"> 
    <button class="basicButton" ng-click="exportToPNG2()">Export to .PNG</button> 
    <div id="wordCloudVisualisation"></div> 
    <canvas id="WordCloudCanvas"></canvas> 
</div> 

此圖片顯示了我<div>哪裏我的文字雲被呈現給。黃色高亮塊，是被重新繪製爲PNG和導出的雲詞的部分：

在var svg = document.querySelector('#wordCloudSVG');元素ID我從這個在我的Chrome瀏覽器開發工具有：

我必須改變導出整個詞雲？

Answer 1

我做了一些小的改動我的導出功能感謝這個帖子：https://gist.github.com/gustavohenke/9073132

我設置基礎上，svg.getBoundingClientRect()

這裏畫布大小是我工作的解決方案（參見代碼中的註釋） ：

scope.exportToPNG2 = function() { 

    var svg = document.querySelector('#wordCloudSVG'); 

    //create a canvas 
    var canvas = document.createElement("canvas"); 

    //set size for the canvas 
    var svgSize = svg.getBoundingClientRect(); 
    canvas.width = svgSize.width; 
    canvas.height = svgSize.height; 

    var ctx = canvas.getContext('2d'); 

    var data = new XMLSerializer().serializeToString(svg); 

    var DOMURL = window.URL || window.webkitURL || window; 

    var img = new Image(); 
    var svgBlob = new Blob([data], { type: 'image/svg+xml;charset=utf-8' }); 
    var url = DOMURL.createObjectURL(svgBlob); 

    img.onload = function() { 
     ctx.drawImage(img, 0, 0); 
     DOMURL.revokeObjectURL(url); 

     var imgURI = canvas 
      .toDataURL('image/png') 
      .replace('image/png', 'image/octet-stream'); 

     triggerDownload(imgURI); 
    }; 

    img.src = url; 
} 

Answer 2

你需要設置你的畫布width和height性質的natural..你的svg圖像。

img.onload = function() { 
    canvas.width = this.naturalWidth; 
    canvas.heigh = this.naturalHeight; 
    ctx.drawImage(this, 0,0); 
    ... 

但是請注意，IE不設置img的寬度/高度時，它們指向SVG文件，所以你必須從文檔的元素解析它。由於您在此處將您的svg的width和height屬性設置爲默認px，因此您可以輕鬆獲取它。
（但是請注意，使用這種方法IE會遇到更多問題......）