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

编程问答 2022-04-24

问题描述

所以，我正在使用 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 标签的结尾：

enter image description here

这是 svg 标签的开始：

enter image description here

解决方法

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

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

到：

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

根据 this answer，您似乎还需要将 viewBox 上的 <svg> 属性替换为 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,400,400);
        callback(canvas.toDataURL("image/png")); // toDataURL return DataURI as Base64 format.
    });
    img.src = 'data:image/svg+xml,' + svgString;
}

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

canvascanvgsvgsvgsvgvue.js