font-awesome圖標轉爲圖片

時間 2019-11-09

標籤 font awesome 圖標轉爲圖片简体版

原文原文鏈接

1、圖標的本質

font-awesome圖標是字體，專業術語叫 Icon Font，本質上是使用 PUA （ Private Unicode Area ）碼位 Unicode 編碼的字符，因此font-awesome圖標、Bootstrap 的圖標和 Wingdings 字體都是同樣的，不同的無非是編碼。javascript

2、繪製圖片

理解了圖標的本質，那圖標轉成文本就有了一個思路，把文本繪製到canvas上，就能夠輕鬆獲取到圖片了css

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);

3、應用擴展

理解原理後，咱們就能夠進行不少應用操做，這裏舉個例子，更換光標樣式html

//建立一個圖標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";

相關標籤/搜索

每日一句

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