如何使用canvg.js和画布将SVG导出为PNG

Question

我们试图使用canvg.js将SVG图片导出为PNG，但当我们单击按钮“获取屏幕快照”时，控制台显示错误"vue.runtime.esm.js?2b0e:619 Vue警告: v-on处理程序中的错误："ReferenceError: SVG2PNG未定义“”。下面是调用函数"tipka()"的按钮，我遵循了下面的示例："https://jsgao0.wordpress.com/2016/06/02/export-svg-as-png-using-canvg-js-and-canvas/"。

<input id='downloadBtn' @click="tipka()" type='button' style="margin-top:500px; position:absolute" value='Download'/>

以下是脚本文件：

import Canvg from "canvg";

export default {
  methods: {
    SVG2PNG(svg, callback) {
      var canvas = document.createElement("canvas"); // Create a Canvas element.
      var ctx = canvas.getContext("2d"); // For Canvas returns 2D graphic.
      var data = svg.outerHTML; // Get SVG element as HTML code.
      canvg(canvas, data); // Render SVG on Canvas.
      callback(canvas); // Execute callback function.
    },
    generateLink(fileName, data) {
      var link = document.createElement("a");
      link.download = fileName;
      link.href = data;
      return link;
    },

    tipka() {
      var element = document.getElementById("svg-01"); // Get SVG element.
      SVG2PNG(element, function (canvas) {
        // Arguments: SVG element, callback function.
        var base64 = canvas.toDataURL("image/png"); // toDataURL return DataURI as Base64 format.
        generateLink("SVG2PNG-01.png", base64).click(); // Trigger the Link is made by Link Generator and download.
      });
    },
  },
};

Answer 1

您不需要将SVG2PNG放在导出的方法对象中(实际上，在本例中，您不应该只使用SVG2PNG()访问它)。

generateLink也是如此。

相反，你应该不介意

import Canvg from "canvg";

function SVG2PNG(svg, callback) {
  var canvas = document.createElement("canvas"); // Create a Canvas element.
  var ctx = canvas.getContext("2d"); // For Canvas returns 2D graphic.
  var data = svg.outerHTML; // Get SVG element as HTML code.
  Canvg(canvas, data); // Render SVG on Canvas.
  callback(canvas); // Execute callback function.
}

function generateLink(fileName, data) {
  var link = document.createElement("a");
  link.download = fileName;
  link.href = data;
  return link;
}

export default {
  methods: {
    tipka() {
      var element = document.getElementById("svg-01"); // Get SVG element.
      SVG2PNG(element, function (canvas) {
        // Arguments: SVG element, callback function.
        var base64 = canvas.toDataURL("image/png"); // toDataURL return DataURI as Base64 format.
        generateLink("SVG2PNG-01.png", base64).click(); // Trigger the Link is made by Link Generator and download.
      });
    },
  },
};