線上SVG轉換，支援SVG to PNG、SVG to JPEG、SVG to WEBP 圖片轉換操作-toolfk程式設計師線上工具網

王三金發表於2019-01-07
SVGWeb程式設計師

  本文要推薦的[ToolFk]是一款程式設計師經常使用的線上免費測試工具箱，ToolFk 特色是專注於程式設計師日常的開發工具，不用安裝任何軟體，只要把內容貼上按一個執行按鈕,就能獲取到想要的內容結果。ToolFk還支援 BarCode條形碼線上生成、 QueryList採集器、 PHP程式碼線上執行、 PHP混淆、加密、解密、 Python程式碼線上執行、JavaScript線上執行、YAML格式化工具、HTTP模擬查詢工具、HTML線上工具箱、JavaScript線上工具箱、CSS線上工具箱、JSON線上工具箱、Unixtime時間戳轉換、Base64/URL/Native2Ascii轉換、CSV轉換工具箱、XML線上工具箱、WebSocket線上工具、Markdown 線上工具箱、Htaccess2nginx 轉換、進位制線上轉換、線上加密工具箱、線上偽原創工具、線上APK反編譯、線上網頁截圖工具、線上隨機密碼生成、線上生成二維碼Qrcode、線上Crontab表示式生成、線上短網址生成、線上計算器工具、Linux常用命令大全、線上文字比較工具、線上思維導圖工具、線上資料庫設計工具、免費CDN加速服務、線上壓力測試工具、地圖拾取座標工具、線上SQL轉換工具。等20多個日常程式設計師開發工具，算是一個非常全面的程式設計師工具箱網站。


網站名稱：ToolFk
網站鏈結：www.toolfk.com/
工具連結：www.toolfk.com/tool-conver…

程式碼教學

本工具[線上SVG轉換，支援SVG to PNG、SVG to JPEG、SVG to WEBP]依賴developer.mozilla.org/zh-CN/docs/… 庫

STEP 1

svg.png


STEP 2

核心程式碼如下

var openFile = function(event) {
    var input = event.target;

    var reader = new FileReader();
    reader.onload = function(){
        var dataURL     = reader.result;
        var output      = document.getElementById('output');
        output.src      = dataURL;
        $("#hidden_val").val(dataURL);
    };
    reader.readAsDataURL(input.files[0]);
};
function exportImage(ext,type){
    var dataUrl     =  $("#hidden_val").val();
    var canvas      = document.createElement('canvas');
    canvas.width    = $('#output').width();
    canvas.height   = $('#output').height();

    var image       = new Image();
    image.src       = dataUrl;
    var context     = canvas.getContext('2d');
    image.onload    = function() {
        context.drawImage(image, 0, 0);
        var a       = document.createElement("a");
        a.download  = "toolfk-"+Math.random()+ext;
        a.href      = canvas.toDataURL(type);
        a.click();
    };
}
$("#export").click(function() {
    var modules     =   $("#modules");
    var pdfFileURL  = $('#svg').val();
    if(!pdfFileURL){
        layer.msg("@lang('toolfk.lang_convert_svg_upload').");
        return false;
    }

    var module_val  =   modules.val();
    if(!module_val){
        layer.msg("@lang('toolfk.lang_convert_svg_convert').");
        return false;
    }

    if(module_val == "png"){
        exportImage(".png","image/png");
    }else if(module_val == "jpeg"){
        exportImage(".jpeg","image/jpeg");
    }else if(module_val == "webp"){
        exportImage(".webp","image/webp");
    }else{
        layer.msg("@lang('toolfk.lang_convert_svg_convert').");
        return false;
    }
});複製程式碼

值得一試的三個理由：

  1. 整合各種程式設計師開發中經常使用的開發測試工具。

  2. 簡潔美觀大氣的網站頁面

  3. 支援 線上格式化執行程式碼、APK線上反編譯、線上高強度密碼生成、線上網頁截圖 等二十多種工具服務

  4. 同時還推薦一下它的姐妹網 www.videofk.com 視訊下載工具箱 


相關文章