JavaScript 下載svg圖片為png格式
更新時間：2018年06月21日 17:16:05 作者：xiaoguangtouqiang
這篇文章主要介紹了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格式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
遇到了操作iframe的相關問題，其實就是在操作iframe內部某個窗體時，調用父窗體的一個函數，下面與大家分享下操作iframe兼容各種瀏覽器的方法2013-07-07
本文將詳細介紹js控制swfObject的實現方法，需要了解的朋友可以參考下2012-11-11
uni-app的nvue說白了就是weex的那一套東西，uni-app集成了weex的 SDK，也就實現了App端的原生渲染能力。本文將介紹uniapp遇到的一些坑，分享給大家。2021-06-06
這篇文章主要介紹了javascript實現點擊按鈕讓DIV層彈性移動的方法,實例分析了javascript操作div層的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
本篇文章主要是對js中的時間轉換—毫秒轉換成日期時間的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
Tesseract.js是流行的Tesseract OCR引擎的純Javascript端口,這個庫支持100多種語言,自動文本定位和腳本檢測,一個簡單的界面,用于閱讀段落、單詞和字符邊界框,Tesseract.js既可以在瀏覽器中運行,也可以在帶有NodeJS的服務器上運行2023-10-10
本文給大家介紹require.js的用法，require.js的誕生是為了解決兩大問題，第一實現js文件的異步加載，避免網頁失去響應，第二管理模塊之間的依賴性，便于代碼的編寫和維護，對require.js用法感興趣的朋友可以參考下本篇文章2015-10-10![JavaScript 應用技巧集合[推薦]](http://img.jbzj.com/images/xgimg/bcimg7.png)
前段時間我曾經對JavaScript中的應用技巧進行了收集和總結這里我將會對這些應用技巧進行集中描述，如果你覺得遺漏了一些好用的應用技巧，也請在留言中提出，我會及時更新到這篇文章中的。2009-08-08
這篇文章主要介紹了JavaScript實現棧結構Stack過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-03-03
JS拖動效果，計算的位移，主要是應用了鼠標事件與坐標控制。2009-11-11