svg 到 blob svg 的 dataUrl答案

【问题标题】：dataUrl of svg to blob svgsvg 到 blob svg 的 dataUrl
【发布时间】：2021-05-04 19:18:36
【问题描述】：

我正在使用 domtoimage 来获取 svg 的 dataUrl。

接下来我想创建 svg 类型的 blob 以保存 svg 文件。我所有的搜索都以绘制画布并从中获取 blob 的选项结束。但是画布返回 'image/png' 类型，无论我做什么，我都无法获得 svg 类型。

return domtoimage.toSvg(el, {quality: 0.9, dpi: 96})
      .then(dataUrl => {
        return new Promise((res, rej) => {
          const img = new Image();
          img.src = dataUrl;
          img.onload = () => {

            const elem = document.createElement('canvas');
           
            const ctx = elem.getContext('2d');
            ctx.drawImage(img, 0, 0, width, height);
            const data = ctx.canvas.toDataURL();
            const imgBlob = this.base64ImageToBlob(data);
            selectedMap.newImageFile = new File([imgBlob], dataUrl, {type: 'image/svg+xml'});
            this.updateMapInService(selectedMap, maps);
            res();
          };
        });
      });

【问题讨论】：

@RobertLongson 我的 DOM 不是 SVG。我使用 domtoimage 来获取我的 DOM 的 svg 文件
你输入的dataUrl不是SVG图片吗？将其值添加到问题中，以便我们查看。
您的imgBlob 是（Canvas）像素的二进制数据，它们不是（SVG）矢量。如果你能将像素保存到向量中，你就找到了圣杯。

标签： image svg blob

【解决方案1】：

据我了解，您已经包含（或只是）并且您想从此（或任何数据 URL）制作 Blob 非常简单：

const SVG_Data="data:image/svg+xml,"+encodeURIComponent(SVG_DOM_Element.outerHTML);

这是 SVG 的 DataURL 结构，适合在任何地方使用。从这里制作一个 blob：

const bf=new Blob(
    new Uint8Array.from(
        SVG_DataURL.split("").map(function(c) {
            return c.charCodeAt(0);
        })
    ),
    "image/svg+xml"
);

【讨论】：