1.遇到需要将svg下载的需求,网上找了一些代码,地址是这个https://github.com/exupero/saveSvgAsPng,但是不太好用,莫名的把网页所有的svg都下载了,于是在源码的基础上做了一些小的修改;代码如下所示
var doctype = '<"1.0" standalone="no""-//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 === '%' "文件名为空!"); 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格式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年11月18日
2024年11月18日
- 周华健.2015-水浒三部曲原创音乐选辑【滚石】【FLAC分轨】
- 钟志刚《为爱而歌DSD》[WAV+CUE]
- 孙露《情人的眼泪》[低速原抓WAV+CUE]
- 【雨果唱片】刘明源《胡琴专辑》1993[WAV+CUE]
- 黄莺莺《25周年纪念金曲专辑》[WAV+CUE][1.1G]
- 刘德丽《刘德丽新曲+精选》2023[WAV+CUE][1G]
- 潘美辰《鹰与月》双语专辑[WAV+CUE][1G]
- 梁咏琪.2007-女色新曲+精选2CD【华纳】【WAV+CUE】
- 黎亚.2006-我不在巴黎【星外星】【FLAC分轨】
- 陈洁仪.1994-心痛【立得唱片】【WAV+CUE】
- 车载必备专用超级选曲《劲爆中文DJ》2CD[WAV+CUE]
- 群星《民歌流淌60年(黑胶CD)》2CD[WAV+分轨]
- 群星《美丽时光》紫银合金AQCD[WAV+CUE]
- 群星《12大巨星畅销精选集》[WAV分轨][1.1G]
- 华语排行冠军曲《百事音乐风云榜》[WAV+CUE][1G]