svg html转换器,html – 将嵌入的SVG转换为PNG到位

演示：

http://phrogz.net/SVG/svg_to_png.xhtml

>创建一个img并将其src设置为您的SVG。

>创建一个HTML5画布并使用drawImage()将该图像绘制到画布上。

>在画布上使用toDataURL()获取base64编码的PNG。

>创建一个img并将其src设置为该数据URL。

var mySVG = document.querySelector('…'), // Inline SVG element

tgtImage = document.querySelector('…'); // Where to draw the result

can = document.createElement('canvas'), // Not shown on page

ctx = can.getContext('2d'),

loader = new Image; // Not shown on page

loader.width = can.width = myTargetImage.width;

loader.height = can.height = myTargetImage.height;

loader.onload = function(){

ctx.drawImage( loader, 0, 0, loader.width, loader.height );

tgtImage.src = can.toDataURL();

};

var svgAsXML = (new XMLSerializer).serializeToString( mySVGElement );

loader.src = 'data:image/svg+xml,' + encodeURIComponent( svgAsXML );

然而，这个答案(和所有客户端只有解决方案)要求浏览器支持SVG，这可能使其无法满足您的特定需求。

编辑：此答案假设SVG可用作单独的URL。由于描述的问题in this question我不能得到上面的工作与嵌入在同一文档执行工作的SVG文档。

编辑2：该问题描述的问题已通过改进的Chrome和Firefox克服。仍然存在限制，即< svg>元素必须具有width =“…”height =“…”属性为Firefox允许它绘制到画布。和Safari目前拖动整个画布每当你绘制任何SVG到它(不管来源)，但that should change soon。

svg html转换器,html – 将嵌入的SVG转换为PNG到位相关推荐

SVG开发包, 20 个有用的 SVG 工具，提供更好的图像处理
20 个有用的 SVG 工具,提供更好的图像处理 SVG 现正在 Web 设计领域变得越发流行, 你可以使用 Illustrator 或者 Inkscape 来创建 SVG 图像. 但当进行 Web ...
svg text换行_5分钟看懂SVG反爬虫原理与绕过实战 | 知了干货分享
SVG反爬虫不同于字体反爬虫,它巧妙的利用css 与 svg的关系,将字符映射到网页中,看起来虽然正常,但是却抓取不到有效内容.本文带你深入浅出,破了SVG反爬虫的套路,学会之后,可应用于某点评网. ...
svg动画制作_制作第一个SVG动画
svg动画制作 Story of a designer trying to code animations instead of asking a dev to figure it out. 一位设计 ...
svg转css font,css – 如何将.svg文件转换为字体？
我在Stack Overflow上找到了两个相关的答案: 不幸的是,这两者都不是真正的编码答案,这是我真正希望的(脚本转换的命令行实用程序,或者也许是某人可以编写这样的东西的API). 尽管如此,通过 ...
android能用svg格式,Android加载html中svg格式图片进行显示
最近做的一个项目是把assets目录中的html显示出来,但是因为html里面有一些工程图片,虽然我用ViewPager和PhotoView,进行显示放大了,但是因为工程图片的线条较多还是比较模糊.所 ...
svg 动画_30个很棒的SVG动画
作者:MrWang 转发链接:https://segmentfault.com/a/1190000023090287 前言设计人员使用CSS在HTML元素中创建动画.然而,由于HTML元素在创建模式 ...
html中svg是什么文件,svg是什么文件格式？如何打开svg文件？
svg是一种开放标准的矢量图形语言,是可缩放的矢量图形格式.svg格式的图像可任意放大图形显示,而且边缘异常清晰,生成的文件很小,方便传输,文字在svg图像中保留可编辑和可搜寻的状态,没有字体的限制, ...
把svg图片生成到svg_“迷失”：SVG指南针玫瑰生成器
把svg图片生成到svg While simple circles and paths are easy enough to generate by hand-coding or a vector a ...
python编辑svg文件_使用Python批量转换SVG文件为PNG或PDF文件
使用Python批量转换SVG文件为PNG或PDF文件使用Python批量转换SVG文件为PNG或PDF文件使用模块 1 模块单独使用 2 模块用于代码实例 1 命令行方式 2 python脚本 ...
1. 一些截图方法和另存格式的比较（QQ，微信，企业微信，飞书，word，PPT，edge，PrintScreen；svg等）；2. 将截图直接转换为PDF并拼接，与插入Word后再转换为PDF的对比
1. 一些截图方法的比较 1.1. 有时候当某个软件没有导出功能,或者导出功能受限,比如 tableau public,但又需要获取展示出的可视化信息时,就需要用到截图.如果这些截图还要用在正式文档中 ...

svg html转换器,html – 将嵌入的SVG转换为PNG到位

svg html转换器,html – 将嵌入的SVG转换为PNG到位相关推荐

最新文章

热门文章