淺入深出，原生API實現SVG 轉 BASE64

時間 2019-11-08

標籤原生 api 實現 svg base64 base 简体版

原文原文鏈接

使人髮指的構建包

看了不少相關的技術文章，大多數用 html2canvas.js 和 canvas.js 第三方包實現，有些用了像 D3.js 這樣更大型的構建包，而實際用到的功能，卻只是其中 1% 都不足，簡直就是使人髮指。javascript

綜合文章中轉換過程的設計思想，本身幹，10行代碼搞定！html

設計思路

svg 先轉 canvas 再轉 base64java

一：瞭解一下 canvas 轉 Base64

const canvas = document.getElementById('myCanvas');
 const ImgBase64 = canvas.toDataURL('image/png');
複製代碼

data:image/png;base64,xxx... 【格式爲 xxx.png】node

二：瞭解一下 svg 轉 .svg格式的 Base64 圖片

const svg = document.getElementById('mySvg');
  const s = new XMLSerializer().serializeToString(svg);
  const ImgBase64 = `data:image/svg+xml;base64,${window.btoa(s)}`;
複製代碼

data:image/svg+xml;base64,xxx... 【格式爲 xxx.svg】canvas

需求到這裏就行了。可是還想把 svg 轉成 png 的 base64 。瀏覽器

三：把【一】【二】糅合一下

把 svg 轉成 .svg 格式的 base64
建立一個圖片容器存放 ①
建立一個 canvas容器存放 ②
把 ③ 轉成 .png 格式的 base64

// ↓ 第一部分
     const svg = document.getElementById('mySvg');
     const s = new XMLSerializer().serializeToString(svg);
     const src = `data:image/svg+xml;base64,${window.btoa(s)}`;
     // ↓ 建立圖片容器並存放
     const img = new Image(); // 建立圖片容器承載過渡
     img.src = src;
     // 注意：須要在圖片onload方法中執行
     img.onload = () => {
       // ↓ 第二部分
       const canvas = document.createElement('canvas');
       canvas.width = img.width;
       canvas.height = img.height;
       const context = canvas.getContext('2d');
       context.drawImage(img, 0, 0);
       const ImgBase64 = canvas.toDataURL('image/png');
     }
複製代碼

data:image/png;base64,xxx... 【格式爲 xxx.png】svg

結語

很簡單吧！原生 API 11行代碼搞定！ui

大家說我要不要也去 node 上提交包呢！spa

哦~哈哈哈~設計

貼個完整版

<body>
  <div>
    <p>使用svg建立</p>
    <svg id="mySvg" width="200" height="200">
      <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(0, 255, 255); stroke-width: 5;" />
      <line x1="0" y1="200" x2="200" y2="0" style="stroke:rgb(255, 0, 255); stroke-width: 5;" />
    </svg>
  </div>
  <p></p>
  <div>
    <p>使用canvas建立</p>
    <canvas id="myCanvas" width="200" height="200">你的瀏覽器不支持canvas！</canvas>
  </div>
  <p></p>
  <div>
    <button onClick="canvasBase64()">Canvas 轉 Base64</button>
    <button onClick="svgBase64()">Svg 轉 Base64</button>
    <button onClick="svgPng()">Svg 轉 png</button>
  </div>
  <p></p>
  <div>
    <img id="myImg" src="xxx" />
    <p>右鍵保存看格式</p>
  </div>
  <script> { /** 注意順序：一、建立；二、設置屬性；三、渲染 **/ let can = document.getElementById('myCanvas'); // 獲取canvas容器 let ctx = can.getContext('2d'); // 建立一個畫布 let canWid = can.width; // canvas 的寬度 let canHei = can.height; // canvas 的高度 ctx.beginPath(); // 開始一條路徑 ctx.rect(0, 0, 100, 100); // 建立矩形：rect(x, y, w, h) ctx.fillStyle = '#0000ff'; // 畫布填充顏色 ctx.fill(); // 實心 ctx.beginPath(); // 開始一條路徑 ctx.rect(125, 25, 50, 50); // 建立矩形：rect(x, y, w, h) ctx.fillStyle = '#000000'; // 畫布填充顏色 ctx.fill(); // 實心 ctx.beginPath(); // 開始一條路徑 ctx.arc(50, 150, 25, 0, 2 * Math.PI); // 建立圓：rect(x, y, 半徑, 起始角, 結束角, 繪圖順序[可選, false順, true逆]) ctx.fillStyle = '#00ff00'; // 畫布填充顏色 ctx.fill(); // 實心 ctx.beginPath() // 開始一條路徑 ctx.rect(100, 100, 100, 100); // 建立矩形：rect(x, y, w, h) ctx.fillStyle = '#ff0000'; // 畫布填充顏色 ctx.fill(); // 實心渲染 } { const myImg = document.getElementById('myImg'); // 獲取Img // #### Canvas 轉 Base64 function canvasBase64() { const canvas = document.getElementById('myCanvas'); const ImgBase64 = canvas.toDataURL('image/png'); console.log(ImgBase64, 'Canvas 轉 Base64'); myImg.src = ImgBase64; } // #### Svg 轉 Base64 function svgBase64() { const svg = document.getElementById('mySvg'); const s = new XMLSerializer().serializeToString(svg); const ImgBase64 = `data:image/svg+xml;base64,${window.btoa(s)}`; console.log(ImgBase64, 'Svg 轉 Base64'); myImg.src = ImgBase64; } // #### Svg 轉 png function svgPng() { const svg = document.getElementById('mySvg'); const s = new XMLSerializer().serializeToString(svg); const src = `data:image/svg+xml;base64,${window.btoa(s)}`; const img = new Image(); // 建立圖片容器承載過渡 img.src = src; img.onload = () => { // 圖片建立後再執行，轉Base64過程 const canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; const context = canvas.getContext('2d'); context.drawImage(img, 0, 0); const ImgBase64 = canvas.toDataURL('image/png'); console.log(ImgBase64, 'Svg 轉 png'); myImg.src = ImgBase64; } } } </script>
</body>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。