svg轉成png並下載
要實現點選一個按鈕,將介面上相應的svg轉成png圖片並下載。
html程式碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 500px; height: 250px; border: 2px solid #ddd"> <svg id="my-svg" pointer-events="none" width="500px" height="250px" id="svg_vis" style="position: absolute;"> <g id="bubbleChart"> <g class="bubbleElement" transform="translate(200,125)"> <circle pointer-events="all" class="bubbleCircle bubbleEvents" fill="rgb(14, 191, 233)" stroke-width="2" stroke="#0985a3" stroke-opacity="1" id="bubble_724" style="" r="80" opacity="1"></circle> <text pointer-events="none" text-anchor="middle" dy="-0.5em" class="bubbleText" style="font-family : 'DINMittelEF-Bold', Georgia, serif; font-weight : bold; font-size : 18px; fill : #000" opacity="1">HELLO WORLD!</text> <text pointer-events="none" text-anchor="middle" dy="1em" class="bubbleText" style="font-family : 'DINMittelEF-Bold', Georgia, serif; font-weight : bold; font-size : 18px; fill : #000" opacity="1">SVG!</text> </g> </g> </svg> </div> <button onclick="change()">change</button> <script src="svgToPng.js"></script> <script> var svg = document.querySelector('svg'); var svgToPng = new svgToPng(svg); function change() { svgToPng.change('zhang'); } </script> </body> </html>
js程式碼如下
(function (global) { global.svgToPng = function (svgHtml) { this.svgHtml = svgHtml; }; global.svgToPng.prototype = { change:function (filename) { var This = this; [ ['version', 1.1], ['xmlns', "http://www.w3.org/2000/svg"], ].forEach(function(item){ This.svgHtml.setAttribute(item[0], item[1]); }); var str = This.svgHtml.parentNode.innerHTML; //2.生成img var img = document.createElement('img'); img.onload = function(){ //3生成canvas var canvas = document.createElement('canvas'); var context = canvas.getContext("2d"); canvas.width = img.width; canvas.height = img.height; context.drawImage(img, 0, 0); var canvasData = canvas.toDataURL("image/png"); var img2 = document.createElement('img'); img2.onload = function () { console.log('change2'); var a = document.createElement("a"); a.download = filename + ".png"; a.href = img2.getAttribute('src'); a.click(); }; // Make pngImg's source the canvas data. img2.setAttribute('src', canvasData); }; // Make the new img's source an SVG image. img.setAttribute('src', 'data:image/svg+xml;base64,'+ btoa(unescape(encodeURIComponent(str)))); } } }(this));
總的思路就是將svg先轉為canvas,然後在轉為png下載。具體的步驟原理我也不清楚,借鑑別人程式碼改來的O(∩_∩)O哈哈~。
注意:svg元素要用一個標記套著,不然不會執行下載
等會在做一個html轉png。。。。。。
相關推薦
svg轉成png並下載
要實現點選一個按鈕,將介面上相應的svg轉成png圖片並下載。 html程式碼如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
java後臺svg轉成png
1.替換img地址 /** * 替換img地址 * @param str -- 前臺svg字串 * @return */ private String transferImgPath(HttpServletRequest request,Strin
文字轉成語音並播放出來
<!doctype html> <html> <head> <meta charset="utf-8"> <title>文字轉成語音並播放出來</title> <script src="http://libs.baidu.
Freemarker 轉 WORD 輸出並下載
1.WordUtils.java import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import java.io.In
將網頁的dom節點轉換成img並下載下來
這裡需要用到一個依賴html2canvas,使用npm安裝即可: npm install html2canvas --save-dev 然後在頁面中引入即可使用。 利用了a標籤的下載功能 dom儲存為img的程式碼如下 function saveAs
unity 將.asset資源轉成png
首先是我們從AssetStore下載的asset格式的素材,可以看到雖然unity能把這些素材解析成Texture,但是不同於普通貼圖,這裡我們不能修改貼圖的各項屬性。 普通圖片 asset 格式的圖片 既然要轉化格式,自然是要讀這個貼圖的資料,但是我們發
不要把 svg 轉成 base64
不是什麼新知識,一個小技巧而已。 今天遇到一個專案中使用純色圖示的問題,用字型麻煩用圖片low,所以就想直接用svg,畢竟只有一兩個圖示。 第一想法是用 DataURI,然後想到了之前 CSS-tricks 的文章,翻了下做下彙總: 不建議把 svg 轉 base64 來用 base
php 將多個檔案壓縮成zip並下載到本地
廢話不多說,直接上程式碼 //這裡需要注意該目錄是否存在,並且有建立的許可權 $zipname = 'path/test.zip' //這是要打包的檔案地址陣列 $files = array("
spring mvc java 把多檔案打包成zip,並下載
再來一篇 /** * 壓縮並匯出檔案 * @param zipPath 壓縮檔案臨時路徑 路徑最後不要有 / * @param zipName 壓縮為檔名 **.zip * @param createFilesPath 需要壓縮的檔案列表 * @pa
SQL 豎排轉成橫排 並根據屬性分類,合併 mysql的group_concat用法 pgsql的string_agg用法
工作中遇到一個問題: 產品有許多屬性, 這些屬性並不儲存在產品的基本資訊表中, 而是儲存在屬性表中, 需要根據其中的一些屬性做分頁查詢. 通過查資料, 找到解決方案, 例子如下: MySQL語句 DROP TABLE IF EXISTS `attri
Java實現檔案自動打包成zip並下載的程式碼
import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.util.zip.ZipEntry; import
Unity編輯器擴充套件:如何把asset 格式的資源轉成png
Assets Store 上提供了大量的優秀素材給開發者使用,包括模型貼圖UI音樂等等。但是一些上傳者可能出於特殊原因,上傳的素材格式是unity內建的.asset 格式,這樣的格式對於直接拿來在unity中使用的開發者當然沒有影響,但是遇到素材本身不是完全符合需求,需要做一些修
將圖片轉成二進位制並生成Base64編碼,可以在網頁中通過url檢視圖片
data格式的Url最直接的好處是,這些Url原本會引起一個新的網路訪問,因為那裡是一個網頁的地址,現在不會有新的網路訪問了,因為現在這裡是網頁的內容。這樣做,會減少伺服器的負載,當然同時也增加了當前網頁的大小。所以對“小”資料特別有好處。 另外聽說這種
java使用SWFTools將PDF轉成swf並使用flexpaper播放PDF
前導:1、 將PDF轉換為swf檔案java程式碼如下windows執行轉換命令方式: 第一種:windowsD:\\Program Files (x86)\\SWFTools\\pdf2swf.ex
將PDF格式檔案轉成二進位制並生成Base64編碼,將Base64編碼轉成PDF檔案
// 為工程新增 sun.misc.BASE64Encoder和sun.misc.BASE64Decoder包: //右鍵專案》屬性》Java Build Path》jre System Library 》access rules》resolution選擇accessi
PDF檔案轉成PNG圖片
一、安裝imagick擴充套件,過程不贅述 PS:安裝出現一個奇怪的錯誤: checking ImageMagick MagickWand API configuration program... configure: error: not found. Please pr
[大型網站優化技術] -- 減少HTTP請求之將圖片轉成二進位制並生成Base64編碼,可以在網頁中通過url檢視圖片
1 <?php 2 $pathinfo = pathinfo($_SERVER['SCRIPT_FILENAME']); 3 define('ROOT', $pathinfo['dirname']); 4 5 function generateIcon_
ffmpeg將rgba資料轉成png圖片
最近在做熱區圖分析,需要對視訊中的一些熱區資訊產生熱區圖,併疊加到視訊背景圖上,主要工作有兩部分: 1.分析熱區資料,生成rgba資料(本文暫時先不講具體實現); 2.用ffmepg將rgba資料生成png圖(主要講這部分內容); 具體實現程式碼如下: bool sav
easyUI的表單查詢(轉成json並繫結到datagrid上)
在BOS專案學習過程中使用了easyUI框架,資料基於資料表格顯示出來 $('#grid').datagrid( { iconCls : 'icon-forward', fit : true, border : false, rownumb
java中將含有html標籤的字串轉成pdf並解決中文問題
private static void versionsone(String htmlCode, String pdfPath){Document document = new Document();try{StyleSheet st = new StyleSheet();st.loadTagStyle("b