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

Question

We are trying to export SVG picture as PNG using canvg.js but when we click the button "Take a screenshot" the console shows error "vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "ReferenceError: SVG2PNG is not defined" ". Here is the button that calls function "tipka()" , I followed this example: "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'/>

Here is the script file:

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

You don't need to put SVG2PNG in the exported methods object (and indeed you shouldn't, in this case, to be able to access it with just SVG2PNG() ).

The same goes for generateLink .

Instead, you should be fine with just

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.
      });
    },
  },
};