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

Posted 2023-05-07

【中文标题】如何使用 canvg.js 和 Canvas 将 SVG 导出为 PNG

【英文标题】：How to export SVG as PNG using canvg.js and Canvas

【发布时间】：2021-06-10 12:23:11

【问题描述】：

我们正在尝试使用 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-使用-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.
      );
    ,
  ,
;

【参考方案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.
      );
    ,
  ,
;

【讨论】：

我们试过了，但遇到了两个错误，当我们把它放在我们的代码中时，我们得到“TypeError: Cannot call a class as a function”，因为声明了 ctx，但它的值从未读取过。