时间:2021-05-26
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://ponent(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 元素没有 设置命名空间,则添加;
同时,添加的命名空间作用在clone的元素上,不会影响原来的svg元素;
总结
以上所述是小编给大家介绍的JavaScript 下载svg图片为png格式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
SVG图片格式英文全称“ScalableVectorGraphics”,意思为可缩放的矢量图形。可能平时我们都使用JPG、PNG、GIF
整理文档,搜刮出一个js实现canvas保存图片为png格式并下载到本地的方法,稍微整理精简一下做下分享。1.canvas保存图片2.下载到本地function
jQuery生成矢量svg二维码,并提供PNG,和SVG的页面下载,减轻服务端的压力。代码如下所示:jQuery生成svg矢量二维码二维码信息:20121107
目前常用的图像文件格式有SVG格式、PDF图像文件格式、PNG格式、JPEG格式、GIF图像文件格式、PSD格式和PDD格式等。 图像文件是描绘一幅图像的计算
设置图片格式Android目前常用的图片格式有png,jpeg和webp,png:无损压缩图片格式,支持Alpha通道,Android切图素材多采用此格式jpe