以 JPG/PNG 格式下载 Canvas 会返回空白图像

Question

所以，我正在使用 canvg 和将 svg 文件转换为 jpg/png 的函数只是下载并忽略 svg 块元素的 id，所以我得到了空白图像，可能有什么问题？也许 Vue 不支持使用画布将 SVG 转换为 jpg/png。 这是javascript：

import canvg from "canvg";

 function SVG2PNG(svg, callback) {
  var canvas = document.createElement("canvas");
  var w = 800;
  var h = 400;
  canvas.width = w;
  canvas.height = h; // Create a Canvas element.
  var ctx =  canvas.getContext("2d"); // For Canvas returns 2D graphic.
  debugger;
  var data = svg.outerHTML; // Get SVG element as HTML code.
  canvg.from(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() {
        debugger;
      var element = document.getElementById("svg"); // 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.
      });
    },
  },
};

这里是 svg 标签的结尾： 这是 svg 标签的开始：

Answer 1

根据documentation for Canvg.from，您需要将绘图上下文传递给它，而不是画布本身。所以改变这一行：

canvg.from(canvas, data); // Render SVG on Canvas.

到：

canvg.from(ctx, data); // Render SVG on Canvas.

根据this answer，您还需要将<svg> 上的viewBox 属性替换为width 和height 属性，例如：

<svg class="shape" version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="400" height="400" style="enable-background:new 0 0 400 400;" xml:space="preserve">

然后，您实际上可以完全绕过canvg，使用这样重写的函数：

function SVG2PNG(svg, callback) {
    var canvas = document.createElement("canvas");
    canvas.width = 400;
    canvas.height = 400; // Create a Canvas element.
    var ctx = canvas.getContext("2d"); // For Canvas returns 2D graphic.
    var svgString = svg.outerHTML;
    var img = new Image();
    img.addEventListener('load', () => {
        ctx.drawImage(img, 0, 0, 400, 400);
        callback(canvas.toDataURL("image/png")); // toDataURL return DataURI as Base64 format.
    });
    img.src = 'data:image/svg+xml,' + svgString;
}

（请注意，它现在返回的是数据 URL，而不是画布。）