js 下载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元素;







  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值