代码之家 › 专栏 › 技术社区 › jonask

将SVG元素转换为img

html javascript

jonask · 技术社区 · 5 年前

所有相关问题都没有答案。我想从DOM中获取SVG图形,并将其转换为img。

这就是我现在的功能

const SVG = document.querySelector('svg')!;
const canvas = document.createElement('canvas');

const XML = new XMLSerializer().serializeToString(SVG);
const SVG64 = btoa(XML);
const image64 = 'data:image/svg+xml;base64,' + SVG64;

const img = new Image();
img.onload = function() {
  canvas.getContext('2d')!.drawImage(img, 0, 0);
};

img.src = image64;

document.getElementById('container')!.appendChild(img);

还有大教堂

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
   <circle cx="25" cy="25" r="20" />
</svg>

<div id="container"></div>

1 回复 | 直到 5 年前

num8er 5 年前

监视错误:

const SVG = document.querySelector('svg')!;
const XML = new XMLSerializer().serializeToString(SVG);
const SVG64 = btoa(XML);

const img = new Image();
img.height = 500;
img.width = 500;
img.src = 'data:image/svg+xml;base64,' + SVG64;

document.getElementById('container')!.appendChild(img);

SVG:<br/>
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
   <circle cx="25" cy="25" r="20" />
</svg>

<hr/>

<div id="container" style="background: red;">
</div>

你好像有意见 ! 标志: document.querySelector('svg')! canvas.getContext('2d')! , document.getElementById('container')!

作为良好实践,请打开浏览器的“检查器”面板的“控制台”选项卡以查看错误消息。

经过长时间的讨论,我了解到您的js代码位于html元素之上。

检查这个:

window.onload = function() {
  renderSVG();
}

const renderSVG = function() {
  const container = document.getElementById('container');
  const svg = document.querySelector('svg');

  if (container && svg) { // since You want to check existence of elements
    const XML = new XMLSerializer().serializeToString(svg);
    const SVG64 = btoa(XML);

    const img = new Image();
    img.height = 500;
    img.width = 500;
    img.src = 'data:image/svg+xml;base64,' + SVG64;

    container.appendChild(img);
  }
};

SVG:<br/>
<circle cx=“25”cy=“25”r=“20”/>
</svg>

<hr/>

<div id=“container”style=“background:red;”gt;

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前