font-awesome圖示轉為圖片
阿新 • • 發佈：2019-08-05
一、圖示的本質
font-awesome圖示是字型，專業術語叫 Icon Font，本質上是使用 PUA （ Private Unicode Area ）碼位 Unicode 編碼的字元，所以font-awesome圖示、Bootstrap 的圖示和 Wingdings 字型都是一樣的，不一樣的無非是編碼。
二、繪製圖片
理解了圖示的本質，那圖示轉成文字就有了一個思路，把文字繪製到canvas上，就可以輕鬆獲取到圖片了
1.首先，建立一個html模板，引人font-awesome
<html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.css"/> </head> <body> <i class="fa fa-address-book"></i> <canvas id="canvas"></canvas> </body> <script src="index.js" type="text/javascript" charset="utf-8"></script> </html>
2.獲取到圖示，並繪製到canvas上
//獲取圖示的位元組編碼 const icon = document.getElementsByClassName("fa-address-book"); const character = window.getComputedStyle(icon[0],":before").getPropertyValue('content').replace(/\"/g,""); //在canvas上繪製圖標 const canvas2 = document.getElementById("canvas"); canvas2.width = 200; canvas2.height = 500; const ctx2 = canvas2.getContext("2d"); ctx2.fillStyle = "#000000"; ctx2.font = "24px FontAwesome"; ctx2.textAlign = "center"; ctx2.textBaseline = "middle"; ctx2.fillText(character, 50, 100); //獲取圖片base64編碼格式的圖片 const dataURL = canvas.toDataURL("image/png"); document.getElementsByTagName("img")[0].setAttribute("src",dataURL);
三、應用擴充套件
理解原理後，我們就可以進行很多應用操作，這裡舉個例子，更換游標樣式
//建立一個圖示dom元素，獲取到圖示的位元組編碼後移除圖示dom元素
const icon = "fa fa-address-card-o";
const tempElement = document.createElement("i");
tempElement.className = icon;
document.body.appendChild(tempElement);
const character = window.getComputedStyle(document.querySelector('.fa-address-card-o'), ':before').getPropertyValue(
'content').replace(/\"/g, "");
tempElement.remove();
//建立一個canvas元素
var canvas = document.createElement("canvas");
canvas.width = 24;
canvas.height = 24;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#000000";
ctx.font = "24px FontAwesome";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(character, 12, 12);
const dataURL = canvas.toDataURL('image/png');
canvas.remove();
//更改游標樣式
document.querySelector('body').style.cssText = "cursor:url(" + dataURL + "),auto";