JavaScript 下载svg图片为png格式


Posted in Javascript onJune 21, 2018

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格式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
Mar 01 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
Aug 21 Javascript
jQuery实现分隔条左右拖动功能
Nov 21 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
Javascript 实现全屏滚动实例代码
Dec 31 Javascript
详解vue-router传参的两种方式
Sep 10 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
一个手写的vue放大镜效果
Aug 09 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
MVVM 双向绑定的实现代码
Jun 21 #Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 #Javascript
vue树形结构获取键值的方法示例
Jun 21 #Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 #Javascript
Vue 获取数组键名的方法
Jun 21 #Javascript
Taro集成Redux快速上手的方法示例
Jun 21 #Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 #Javascript
You might like
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
php抽奖小程序的实现代码
2013/06/18 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
JS实现简易日历效果
2021/01/25 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
Python使用ffmpy将amr格式的音频转化为mp3格式的例子
2019/08/08 Python
python2.7的flask框架之引用js&amp;css等静态文件的实现方法
2019/08/22 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
python 实现IP子网计算
2021/02/18 Python
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
铭万公司.net面试题笔试题
2014/07/20 面试题
设计总监岗位职责
2013/12/07 职场文书
公司培训欢迎词
2014/01/10 职场文书
婚礼主持词
2014/03/13 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
2014年秘书工作总结
2014/11/25 职场文书
党组织结对共建协议书
2016/03/23 职场文书
创业计划书之网吧
2019/10/10 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
使用pytorch实现线性回归
2021/04/11 Python
HttpClient实现表单提交上传文件
2022/08/14 Java/Android