svg export to png только экспортирует небольшую часть/долю рендеринга svg в JavaScript с помощью Angular

Question

Мне нужен совет по экспорту отображаемого облака svg word в 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'); я получил от этого в моих 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 «s ширина/высота, когда они указывают на документы SVG, так что вам придется разобрать его из элемента документа. Поскольку здесь вы устанавливаете свои атрибуты svg width и height по умолчанию по умолчанию, вы можете легко получить его.
(Но обратите внимание, что в любом случае вы столкнетесь с дополнительными проблемами с IE этим способом))