将SVG转换为PNG时如何包含CSS样式

Question

我创建了一个简单的SVG元素，当点击按钮时可以将其下载为PNG。我的解决方案类似于这里。

基本思路是：
1. SVG转换为Canvas
2. Canvas转换为DataUrl
3. 从DataUrl触发下载

问题在于，当下载PNG文件时，它不包括应用于SVG的CSS样式我的解决方案结果

注意 - 我知道有一种解决方法是将样式“内联”到元素中，例如这里或通过挖掘DOM树并使用getComputedStyle(element,null);递归解决方案。

问题：
1.这个问题的真正原因和解决方案是什么。
(是否与GPU加速有关?)
2.当使用自定义字体（Fontface）时，如何克服此问题。

 <button id="btn">svg to png</button>

  <svg id="svg" width="200" height="200">
    <circle cx="50" cy="50" r="30" />
    <text class="svgTxt" x="0" y="100">Hen's SVG Image</text>
  </svg>
  <canvas id="canvas"  width="200" height="200"></canvas>

我的CSS：

  /*adding exo2 font*/
    @font-face {
    font-family: 'exo_2black';
    src: url('./exo2font/Exo2-Black-webfont.eot');
    src: url('./exo2font/Exo2-Black-webfont.eot?#iefix') format('embedded-opentype'),
         url('./exo2font/Exo2-Black-webfont.woff') format('woff'),
         url('./exo2font/Exo2-Black-webfont.ttf') format('truetype'),
         url('./exo2font/Exo2-Black-webfont.svg#exo_2black') format('svg');
    font-weight: normal;
    font-style: normal;

}
/*change circle color depends on window size*/
@media screen and (min-width: 480px) {
    svg circle {
        fill: lightgreen;
    }
}
/*style on the svg text*/
    .svgTxt{
      font-family: 'exo_2black';
      font-size: 30px;
      fill: red;
    }

我的代码：

  //reference to elements
    var btn = document.querySelector('#btn');
    var svg = document.getElementById('svg');
    var svgTexts = svg.getElementsByTagName('text');
    var canvas = document.getElementById('canvas');
    //Style definitions for svg elements defined in stylesheets are not applied to the generated canvas. This can be patched by adding style definitions to the svg elements before calling canvg.
  //3.trigger download from dataUrl
    function triggerDownload(imgURI) {
      var evt = new MouseEvent('click', {
        view: window,
        bubbles: false,
        cancelable: true
      });

      var a = document.createElement('a');
      a.setAttribute('download', 'hen_saved_image.png');
      a.setAttribute('href', imgURI);
      a.setAttribute('target', '_blank');
      a.dispatchEvent(evt);
    }
    //btn click event
    btn.addEventListener('click', function () {
      // 1.svg to canvas
      var ctx = canvas.getContext('2d');
      var data = (new XMLSerializer()).serializeToString(svg);//serialize the svg element to string
      var DOMURL = window.URL || window.webkitURL || window;
      var img = new Image();
      var svgBlob = new Blob([data], { type: 'image/svg+xml;charset=utf-8' });//A blob object represents a chuck of bytes that holds data of a file.
      var url = DOMURL.createObjectURL(svgBlob);//creates a DOMString containing an URL representing the object given in paramete
      $('svg').append(deletedSVGText);
      img.onload = function () {
        ctx.drawImage(img, 0, 0);
        DOMURL.revokeObjectURL(url);
        // 2.canvas to dataUrl
        var imgURI = canvas
          .toDataURL('image/png')
          .replace('image/png', 'image/octet-stream');// returns a data URI containing a representation of the image in the format specified by the type parameter

        triggerDownload(imgURI);
      };
      img.src = url;
    });

- LazyCreep

Answer 1

问题1（前半部分）：真正的原因是什么？_{（与GPU加速有关吗？）}

不，GPU加速与此无关。
最广泛的原因是隐私。

要使用drawImage绘制您的SVG图像，您必须在<img>标签内部加载您的SVG作为外部文档。 SVG可以是一种资源加载较复杂的图像格式（它实际上可以需要由任何HTML文档所需的任何资源）。因此，在规范中已经声明，<img>内容应像<iframe>元素或<object>或类似元素一样适用于相同的安全性甚至更严格:

<img>内容不能要求任何外部资源，也不能访问主文档。

问题1（后半部分）：解决这个问题的方法

您已指向某些SO问题已经回答了它，您还可以将主文档中的所有样式表都包含在解析的SVG节点中的<style>标签中，然后再从中创建Blob。此处是愚蠢的实现

问题2：“当使用Fontface自定义字体时，我如何克服这个问题？”

对于外部资源，您必须将其编码为dataURI，并在创建Blob之前将其包含在svg节点中。特别是对于字体，您可以在<style>元素中设置font-face属性。

因此，最终您的SVG会像以下内容：

<defs>
  <style>
    /* all your parsed styles in here */
    @font-face {
     font-family: foo;
     src: url('data:application/font-woff;charset=utf-8;base64,...')
    }
  </style>
</defs>

在提取标记之前，请先了解它的本质。

- Kaiido