如何将svg图像另存为pdf和png? [英] how to save svg image as pdf and png?

问题描述

我已使用Google图表库绘制了不同的Google图表.绘制图表后，我将svg文件下载为pdf和png.但是在单词树图的情况下，我无法下载pdf和png格式.这是图表的链接:

i have used google chart library for drawing the different google charts.And after draw the chart i have downloaded the svg file as pdf and png. but in word tree chart scenario i cannot downloaded the pdf and png formate. Here is the link for chart:

单词树图

drawCanvas = function (dataURI) {
    $(".download-buttons").css({ 'visibility': 'visible' });

   // imageURI = dataURI;
   var img = new Image();
   img.src = dataURI;
   img.onload = function () {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    context.clearRect(0, 0, canvas.width, canvas.height);
    canvas.height = img.height;

    canvas.width = img.width;


    context.drawImage(img, 0, 0);
};

我已经使用这种方法下载图像. 此代码将svg格式转换为Google图表(例如饼图和其他google图表)中的svg格式为pdf和png文件格式，但是使用此代码我无法转换 将wordtree图表svg文件转换为png和pdf.

i have used this method for downloading the images. this code convert svg format to pdf and png file format in google chart such as Pie chart and other google charts,but using this code i cannot convert the wordtree chart svg file to png and pdf.

为什么在其他Google图表成功保存的情况下，单词树图表未保存为png或pdf? 或者 将svg图像另存为png和pdf的另一种方法是什么.

Why word tree chart is not being saved as png or pdf while other google charts are being saved successfully? Or What is an alternative way to save svg image as png and pdf.

推荐答案

html2canvas 将适用于Google的单词树...

html2canvas will work on google's word tree...

确保同时包含两者，
html2canvas.js
html2canvas.svg.js

make sure to include both,
html2canvas.js
html2canvas.svg.js

请参阅以下代码段...

see following snippet...

google.charts.load('current', {
  packages:['wordtree']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Phrases'],
    ['cats are better than dogs'],
    ['cats eat kibble'],
    ['cats are better than hamsters'],
    ['cats are awesome'],
    ['cats are people too'],
    ['cats eat mice'],
    ['cats meowing'],
    ['cats in the cradle'],
    ['cats eat mice'],
    ['cats in the cradle lyrics'],
    ['cats eat kibble'],
    ['cats for adoption'],
    ['cats are family'],
    ['cats eat mice'],
    ['cats are better than kittens'],
    ['cats are evil'],
    ['cats are weird'],
    ['cats eat mice'],
  ]);

  var options = {
    wordtree: {
      format: 'implicit',
      word: 'cats'
    }
  };

  var chartContainer = document.getElementById('chart-container');
  var chart = new google.visualization.WordTree(chartContainer);

  google.visualization.events.addListener(chart, 'ready', function () {
    var browserIsIE;
    var domURL;
    var downloadLink;
    var fileName;
    var image;
    var imageContainer;
    var imageURL;
    var svgParent;

    browserIsIE = false || !!document.documentMode;
    fileName = 'WordTree.png';
    svgParent = chartContainer.getElementsByTagName('svg')[0];
    svgParent.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
    if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
      chartContainer = chartContainer.cloneNode(true);
      domURL = window.URL || window.webkitURL || window;
      imageURL = domURL.createObjectURL(new Blob([svgParent.outerHTML], {type: 'image/svg+xml'}));
      image = new Image();
      image.src = imageURL;
      $(chartContainer).find('svg').replaceWith(image);
      imageContainer = $('#image-container').get(0);
      $(imageContainer).append(chartContainer);
    }

    html2canvas(chartContainer, {
      allowTaint: true,
      taintTest: false
    }).then(function(canvas) {
      if (browserIsIE) {
        window.navigator.msSaveBlob(canvas.msToBlob(), fileName);
      } else {
        downloadLink = document.createElement('a');
        downloadLink.href = canvas.toDataURL('image/png');
        downloadLink.download = fileName;
        raiseEvent(downloadLink, 'click');
      }
      if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
        domURL.revokeObjectURL(imageURL);
        imageContainer.removeChild(chartContainer);
      }
    });
  });

  chart.draw(data, options);

  function raiseEvent(element, eventType) {
    var eventRaised;

    if (document.createEvent) {
      eventRaised = document.createEvent('MouseEvents');
      eventRaised.initEvent(eventType, true, false);
      element.dispatchEvent(eventRaised);
    } else if (document.createEventObject) {
      eventRaised = document.createEventObject();
      element.fireEvent('on' + eventType, eventRaised);
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.svg.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart-container"></div>
<div id="image-container"></div>

注意:在SO上运行此代码段时，下载不会弹出，
检查这把小提琴看看它在起作用...

note: the download doesn't popup when running the snippet here on SO,
check this fiddle to see it in action...

这篇关于如何将svg图像另存为pdf和png?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！