绘制到画布或用作图像源时缺少 SVG 图像和图案答案

【问题标题】：SVG image and pattern missing when drawn to canvas or used as image source绘制到画布或用作图像源时缺少 SVG 图像和图案
【发布时间】：2019-01-29 11:40:36
【问题描述】：

我使用 SVG 将滤镜和图案应用于图像（打印时需要它）。我的问题是，当我将 svg 绘制到画布以将其另存为 jpeg 时，链接的图像和图案不会显示在画布上。

根据我的观察，如果我将图像 URL 转换为 base64（用于将其“嵌入”到 SVG 中），图像会显示在画布上，但我不能对填充属性做同样的事情 (@987654323 @)。

我想知道，有没有办法在将 svg 加载到画布之前将其“光栅化”，或者如何让链接的属性显示在画布上？

这是 svg 在浏览器中的外观：

<svg viewBox="0 0 340 415" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMidYMid slice">
  <defs>
    <pattern id="dots" x="0" y="0" width="1" height="1">
    <image xlink:href="/data/img/patterns/dots.jpg"  x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"/>
</pattern>
  </defs>

  <rect x="0" y="0" width="100%" height="100%" fill="url(#dots)"></rect>
  <image xlink:href="blob:http://localhost:8081/a80eac2b-722b-4596-99b1-38d2646761f6" id="image" x="4mm" y="4mm" width="82mm" height="82mm" preserveAspectRatio="xMidYMid slice" filter="url(#walden)"></image>
  <text id="note" x="4.5cm" y="10.2cm" text-anchor="middle" font-size="30px" font-family="Pacifico"><!---->Hello World!<!----></text>
</svg>

我将 svg 保存到文件的代码：

export(){
      var svg = this.shadowRoot.querySelector('svg');
      var xml = (new XMLSerializer).serializeToString(svg);
      var svg64 = 'data:image/svg+xml;base64,' + btoa(xml);
      var viewbox = svg.getAttribute('viewBox');

      var canvas = document.createElement("canvas");
      var width = viewbox.split(' ')[2],
          height = viewbox.split(' ')[3],
          ctx = canvas.getContext('2d');

      canvas.width = width;
      canvas.height = height;
      ctx.clearRect(0, 0, width, height); // clear canvas

      var img = new Image();

      img.onload = function () {
        ctx.drawImage(img, 0, 0);
        canvas.toBlob((b)=>{
          that.upload(b);
        });
        document.body.appendChild(img); //for visualising the results
      };

      img.src = svg64;
    }

rezults（顶部：svg，底部：画布渲染）

【问题讨论】：

什么模式？你没有向我们展示不工作的部分。问题是点还是线_1？如果是这样，它们指向什么？
@RobertLongson，抱歉，添加了缺少的模式定义（请参阅更新后的问题）。
blob URL 被 （不幸的是 IMM） 视为在 <img> 中加载的文档的外部资源。所以他们不会被加载。您需要将其转换为 base64 dataURI。 (<image xlink:href="data:image/...)
@Kaiido，IMM？我想将 objectURL 转换为 blob 会让我有些头疼，我找不到比使用 XMLHttpRequest 更好的选择。
“IMM”=>“在我心中”。如果你有 Blob，那么 f = new FileReader(); f.onload = e => handleDataURI(f.result); f.readAsDataURL(blob); 但取决于你从哪里得到它，可能还有其他解决方案。

标签： javascript image url svg canvas

【解决方案1】：

我为同样的问题找到的唯一解决方案是将 svg 中的模式包含在 base64 编码中：

<pattern  id="pat01" xlink:href="data:image/png;base64,iVBOR...CC " style="opacity:1;stop-opacity:1" /></pattern>
...
<circle cx="23" cy="153" r="18" style="opacity:1;fill:url(#pat01);fill-opacity:1;stop-opacity:1;stroke:#000000;stroke-miterlimit: 10;"></circle>

【讨论】：