svg轉成png並下載

阿新 • • 發佈：2019-01-20

要實現點選一個按鈕，將介面上相應的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

svg轉成png並下載

相關推薦