我們知道canvas畫布可以很方便的js原生支持轉(zhuǎn)為圖片格式并下載，但是svg矢量圖形則并沒有這方面原生的支持。
研究過HighChart的svg圖形的圖片下載機(jī)制，其實(shí)現(xiàn)原理大體是瀏覽器端收集SVG代碼信息，并發(fā)送到到服務(wù)器端，由后端程序轉(zhuǎn)換成圖片格式后，以流的形式反射給瀏覽器端下載。

最近在項(xiàng)目中有需求將一個(gè)非HighChart的SVG地圖轉(zhuǎn)存為圖片并下載的功能。
本希望模擬HighChart的原理實(shí)現(xiàn)，可是研究發(fā)現(xiàn)，該地圖的SVG代碼信息多達(dá)兩萬字節(jié)，然而HighChart后端制圖程序卻有著字節(jié)數(shù)限制，所以就不能這么處理了。

然后國外社區(qū)討論的方法也多是前后端協(xié)同處理來完成這個(gè)功能的，這樣實(shí)現(xiàn)會(huì)比較重， 而且部署不便。

經(jīng)過一番搜尋，終于發(fā)現(xiàn)一個(gè)不依賴任何外部庫，框架，同時(shí)僅僅通過瀏覽器端js便能實(shí)現(xiàn)的方法。 代碼實(shí)現(xiàn)的具體來源地址已經(jīng)忘記了， 這里保留代碼原創(chuàng)作者的版權(quán)哈。

首先，我們約定SVG的上下文結(jié)構(gòu)是如下的：

<div class="svg-wrap"><svg>...</svg> </div>

然后，我們就可以通過如下代碼來將svg圖形轉(zhuǎn)為圖片并下載了：

var svgXml = $('.svg-wrap').html();var image = new Image(); image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml))); //給圖片對(duì)象寫入base64編碼的svg流var canvas = document.createElement('canvas'); //準(zhǔn)備空畫布 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 = canvas.toDataURL('image/png'); //將畫布內(nèi)的信息導(dǎo)出為png圖片數(shù)據(jù) a.download = "MapByMathArtSys"; //設(shè)定下載名稱 a.click(); //點(diǎn)擊觸發(fā)下載

?

轉(zhuǎn)載于:https://www.cnblogs.com/jiangxiaobo/p/6007589.html

總結(jié)

以上是生活随笔為你收集整理的js实现svg图形转存为图片下载的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。