正在下载 Canvas 作为 JPG/PNG returns 空白图像

Question

所以，我正在使用 canvg，而将 svg 文件转换为 jpg/png 的函数只是下载并忽略了 svg 块元素的 id，所以我得到了空白图像，这可能是什么问题？也许 Vue 不支持使用 canvas 将 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，您需要将绘图上下文传递给它，而不是 canvas 本身。所以改变这一行：

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;
}

（请注意，它现在 returns 数据 URL，而不是 canvas。）

正在下载 Canvas 作为 JPG/PNG returns 空白图像

Downloading Canvas as JPG/PNG returns blank image

svg

canvas

canvg

vue.js