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

将SVG元素转换为img

html javascript

jonask · 技术社区 · 6 年前

所有相关问题都没有答案。我想从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 回复 | 直到 6 年前

num8er 6 年前

监视错误:

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;

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

4 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

4 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

4 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

4 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

5 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

5 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

5 月前