JavaScript 下载svg图片为png格式
时间:2018-06-22
这篇文章主要介绍了JavaScript 下载svg图片为png格式,本文通过代码给大家讲解的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
1.遇到需要将svg下载的需求,网上找了一些代码,地址是这个https://github.com/exupero/saveSvgAsPng,但是不太好用,莫名的把网页所有的svg都下载了,于是在源码的基础上做了一些小的修改;代码如下所示
var doctype = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [<!ENTITY nbsp " ">]>'; function convertToPng(src, w, h) { var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); canvas.width = w; canvas.height = h; context.drawImage(src, 0, 0); var png; try { png = canvas.toDataURL("image/png"); } catch (e) { if ((typeof SecurityError !== 'undefined' && e instanceof SecurityError) || e.name == "SecurityError") { console.error("Rendered SVG images cannot be downloaded in this browser."); return; } else { throw e; } } return png; } function isElement(obj) { return obj instanceof HTMLElement || obj instanceof SVGElement; } function reEncode(data) { data = encodeURIComponent(data); data = data.replace(/%([0-9A-F]{2})/g, function (match, p1) { var c = String.fromCharCode('0x' + p1); return c === '%' ? '%25' : c; }); return decodeURIComponent(data); } function uriToBlob(uri) { var byteString = window.atob(uri.split(',')[1]); var mimeString = uri.split(',')[0].split(':')[1].split(';')[0] var buffer = new ArrayBuffer(byteString.length); var intArray = new Uint8Array(buffer); for (var i = 0; i < byteString.length; i++) { intArray[i] = byteString.charCodeAt(i); } return new Blob([buffer], {type: mimeString}); } function downLoad(el, name) { if (!isElement(el)) { throw new Error('an HTMLElement or SVGElement is required; got ' + el); } if (!name) { console.error("文件名为空!"); return; } var xmlns = "http://www.w3.org/2000/xmlns/"; var clone = el.cloneNode(true); clone.setAttribute("version", "1.1"); if (!clone.getAttribute('xmlns')) { clone.setAttributeNS(xmlns, "xmlns", "http://www.w3.org/2000/svg"); } if (!clone.getAttribute('xmlns:xlink')) { clone.setAttributeNS(xmlns, "xmlns:xlink", "http://www.w3.org/1999/xlink"); } var svg = clone.outerHTML; var uri = 'data:image/svg+xml;base64,' + window.btoa(reEncode(doctype + svg)); var image = new Image(); image.onload = function () { var png = convertToPng(image, image.width, image.height); var saveLink = document.createElement('a'); var downloadSupported = 'download' in saveLink; if (downloadSupported) { saveLink.download = name + ".png"; saveLink.style.display = 'none'; document.body.appendChild(saveLink); try { var blob = uriToBlob(png); var url = URL.createObjectURL(blob); saveLink.href = url; saveLink.onclick = function () { requestAnimationFrame(function () { URL.revokeObjectURL(url); }) }; } catch (e) { saveLink.href = uri; } saveLink.click(); document.body.removeChild(saveLink); } }; image.src = uri; }
这里使用的时候只需要调用download方法就可以了,建议封装成一个单独的下载服务;download方法的第一个参数el指的是dom元素,就是svg元素,具体的获取方法通过js或者d3的选择器都可以;例如
<div id="svg-parent-div"><svg>...</svg></div>
一般通过获取svg的父元素来找到它,比如
var el = d3.select("#svg-parent-div").node().children[0]; download(el,"下载图片");
这样就可以了;
代码对于svg的没设置命名空间的情况做了处理,通过如下代码,如果svg 元素没有 设置命名空间,则添加;
el.setAttributeNS(xmlns, "xmlns", "http://www.w3.org/2000/svg"); el.setAttributeNS(xmlns, "xmlns:xlink", "http://www.w3.org/1999/xlink");
同时,添加的命名空间作用在clone的元素上,不会影响原来的svg元素;
总结
以上所述是小编给大家介绍的JavaScript 下载svg图片为png格式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- Matplotlib基础全攻略
- Python 小爬虫 - 爬取今日头条街拍美女图
- python3使用zookeeper和私钥解密及编码转化配置信息
- Python中os.path.dirname(__file__)的用法
- TensorFlow从0到1 - 18 - TensorFlow 1.3.0安装手记
- Python + Splinter 实现浏览器自动化操作入门指南
- 动态地理信息可视化——leaflet在线地图简介
- python中的递归函数
- 对抗思想与强化学习的碰撞-SeqGAN模型原理和代码解析
- 玩转数据地图系列之——地图上的迷你条形图
- 树上倍增求LCA及例题
- 深度强化学习-DDPG算法原理和实现
- 你绝对想不到,数据地图还能这么玩~
- TensorFlow从0到1 - 17 - Step By Step上手TensorBoard
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- AkShare-股票数据-龙虎榜-营业上榜统计
- AkShare-股票数据-龙虎榜-个股上榜统计
- React中路由的使用
- CyanX 基于ReactHook的状态管理器,遵循函数式编程的理念,极简、可扩展设计哲学上手
- Serverless 架构下如何实现日志的实时输出?
- typescript基础篇(1):helloworld
- typescript基础篇(2):数据类型
- 22款好用的CLI工具
- typescript基础篇(3):接口
- 2020 年,苹果的 AI 还有创新吗?
- 毕设有着落了!一套开源的,基于SpringBoot的车牌识别系统
- 详解hive的join优化
- 区块链时代的世界宪章:代码即法律
- SQL 计算公司的期初资产
- nested exception is java.lang.IllegalStateException: refreshAfterWrite requires