我們知道canvas畫布可以很方便的js原生支持轉為圖片格式并下載，但是svg矢量圖形則并沒有這方面原生的支持，
研究過HighChart的svg圖形的圖片下載機制，其實作原理大體是瀏覽器端收集SVG代碼資訊，并發送到到服務器端，由后端程式轉換成圖片格式后，以流的形式反射給瀏覽器端下載，
最近在專案中有需求將一個非HighChart的SVG地圖轉存為圖片并下載的功能，
本希望模擬HighChart的原理實作，可是研究發現，該地圖的SVG代碼資訊多達兩萬位元組，然而HighChart后端制圖程式卻有著位元組數限制，所以就不能這么處理了，
然后國外社區討論的方法也多是前后端協同處理來完成這個功能的，這樣實作會比較重， 而且部署不便，
經過一番搜尋，終于發現一個不依賴任何外部庫，框架，同時僅僅通過瀏覽器端js便能實作的方法， 代碼實作的具體來源地址已經忘記了， 這里保留代碼原創作者的著作權哈，
首先，我們約定SVG的背景關系結構是如下的：
<div class="svg-wrap">
<svg>...</svg>
</div>
然后，我們就可以通過如下代碼來將svg圖形轉為圖片并下載了：
var svgXml = $('.svg-wrap').html();
var image = new Image();
image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml))); //給圖片物件寫入base64編碼的svg流
var canvas = document.createElement('canvas'); //準備慷訓布
canvas.width = $('.svg-wrap svg').width();
canvas.height = $('.svg-wrap svg').height();
var context = canvas.getContext('2d'); //取得畫布的2d繪圖背景關系
context.drawImage(image, 0, 0);
var a = document.createElement('a');
a.href = https://www.cnblogs.com/crxis/p/canvas.toDataURL('image/png'); //將畫布內的資訊匯出為png圖片資料
a.download = "MapByMathArtSys"; //設定下載名稱
a.click(); //點擊觸發下載
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/87032.html
標籤：JavaScript
上一篇：【2020Python修煉記】前端開發之 JavaScript 的 BOM 和 DOM 操作
下一篇：蒲公英 · JELLY技術周刊 Vol.07: EcmaScript 2020 -- 所有你想要知道的都在這