* @param node svg节点 => document.querySelector('svg')
* @param name 生成的图片名称
* @param width 生成的图片宽度
* @param height 生成的图片高度
* @param type 生成的图片类型
export
const
covertSVG2Image
=
(
node
,
name
,
width
,
height
,
type
=
'png'
)
=>
{
let
serializer
=
new
XMLSerializer
(
)
let
source
=
'<?xml version="1.0" standalone="no"?>\r\n'
+
serializer
.
serializeToString
(
node
)
let
image
=
new
Image
(
)
image
.
src
=
'data:image/svg+xml;charset=utf-8,'
+
encodeURIComponent
(
source
)
let
canvas
=
document
.
createElement
(
'canvas'
)
canvas
.
width
=
width
canvas
.
height
=
height
let
context
=
canvas
.
getContext
(
'2d'
)
context
.
fillStyle
=
'#fff'
context
.
fillRect
(
0
,
0
,
10000
,
10000
)
image
.
onload
=
function
(
)
{
context
.
drawImage
(
image
,
0
,
0
)
let
a
=
document
.
createElement
(
'a'
)
a
.
download
=
`
${
name
}
.
${
type
}
`
a
.
href
=
canvas
.
toDataURL
(
`image/
${
type
}
`
)
a
.
click
(
)
svg
转
成
jpg/png
图片
，
svg
含跨域
图片
基本思路：
svg
：
svg
效果：
转
成
jpg/png：base64串显示效果由于
svg
上含有跨域
图片
，
图片
没显示出来，所以最终处理结果：解决跨域
图片
后的base64串显示结果：
基本思路：
1、获取
svg
所有
元素
；
2、把
svg
转
成
svg
格式的base64；
3、新建img
元素
，并将
svg
base64赋值给src；
4、onload的时候绘制到canvas画布内；
5、根据所需格式
导出
jpg或png
图片
base64串
svg
：
<
svg
version=
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-01
1.情景展示
闲来无事的时候，发现chrome扩展程序里面有图像，本想下载下来，却发现文件格式是
svg
格式，如何将
svg
文件改
成
图片格式
？
chrome-extension://jlgkpaicikihijadgifklkbpdajbkhjo/image/rating/1-stars.
svg
2.解决方案
第一，
JavaScript
文件。
(function...
我们知道canvas画布可以很方便的
js
原生支持
转
为
图片格式
并下载，但是
svg
矢量图形则并没有这方面原生的支持。
研究过HighChart的
svg
图形的
图片
下载机制，其实现原理大体是浏览器端收集
SVG
代码信息，并发送到到服务器端，由后端程序
转
换
成
图片格式
后，以流的形式反射给浏览器端下载。
最近在项目
中
有需求将一个非HighChart的
SVG
地图
转
存为
图片
并下载的功能。
本希望模拟HighChart的原理实现，可是研究发现，该地图的
SVG
代码信息多达两万字节，然而HighChart后端制图程序却有着字节数限
之前做了一个
svg
简易的编辑器！有个需求将编辑器编辑好的svmXml代码
转
成
图片
然后上传到
图片
服务器！在网上招了好多的例子！发现大部分都要用到第三方的
js
插件！所以为了方便就自己写了个简单点的！下面分享出来！也算自己的一个笔记吧！
直接上页面部分代码：
div
中
就是你的
svg
x...
