利用JS将图标字体渲染为图片的方法详解

2024-03-22 17:14:38

前言

在软件开发中肯定要用到图标，比如下图的 Groove 音乐中就用到了许多图标。一种获取这些图标的方法是把 Groove 音乐截个图，然后熟练地开启 Photoshop，开始抠图。这种方式很逊，效率也很低（虽然我刚开始就是这么干的）。

如果打开 C:/Program File/WindowsApps（需要修改权限才能进入），可以发现几个名字里带 ZuneMusic 的文件夹，其中的某一个文件夹中会有字体文件 SegMVR2.ttf。这是一个图标字体文件，双击安装之后，打开 Windows 自带的字符映射表应用，将字体换为 Segoe MVR MDL2 Assets，可以看到里面的字符其实就是图标。其实可以用 Metro Studio 将这些字体导出为 png、svg 等格式的图片，但是 Metro Studio 导出的字符看起来很细，也无法分别控制上下和左右的内边距，所以这里改用 Javascript 操作 canvas 绘制图标，然后导出为 png。

实现方式

在 CodePen 上已经有人给出了将 Microsoft 开源的 Fabric UI Icon 渲染为 png 图片的 demo，效果很不错。阅读源代码之后可以发现，他在 getFontIconCharacter() 先创建了一个临时的元素，根据想要的图标的名字设置元素的 className，获取::before伪元素的 content 中字符的 Unicode，接着在 drawIcon() 中使用 context.fillText() 方法绘制字符，最后 canvas.toDataURL() 就能将 canvas 的内容转换为 base64 格式的图片。

可以看到，对于自定义的的字体，我们只需知道字符的 Unicode，就能实现导出功能。

html

html 和 coepen 中的几乎完全一样，唯一不同的地方就是将 font-class 换成了 font-unicode，因为我们只有字符的 unicode。

<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="index.css" rel="external nofollow" >
    <title>iconfont to png</title>
</head>

<body>
    <div class="ms-Grid" dir="ltr">
        <h1 class="ms-font-su">Render Office Fabric UI Icons into Canvas</h1>
        <p>This is a simple tool to render an icon from the <a class="ms-fontColor-blueLight"
                href="https://developer.microsoft.com/en-us/fabric#/styles/icons" rel="external nofollow" >Office Fabric UI icon font</a> into an
            HTML <code>&lt;canvas&gt;</code> with a background color. Right-click and save the image to use it.</p>
        <div class="ms-Grid-row">
            <div class="ms-Grid-col ms-sm12 ms-lg6">
                <h2 class="ms-font-xxl">Icon/Canvas Specifications</h2>
                <form id="form">
                    <div class="ms-Grid">
                        <div class="ms-Grid-row">
                            <div class="ms-Grid-col ms-md6">
                                <label for="font-unicode">Icon unicode</label>
                                <input type="text" name="fontClass" id="font-unicode"
                                    placeholder="e.g. ms-Icon ms-Icon-Warning" value="E768">
                            </div>
                            <div class="ms-Grid-col ms-md6">
                                <label for="font-size">Font size (px)</label>
                                <input type="number" step="1" min="1" name="fontSize" id="font-size"
                                    placeholder="e.g. 60" value="56">
                            </div>
                        </div>
                        <div class="ms-Grid-row">
                            <div class="ms-Grid-col ms-md6">
                                <label for="image-width">Image width (px)</label>
                                <input type="number" step="1" min="0" name="imageWidth" id="image-width"
                                    placeholder="e.g. 80" value="92">
                            </div>
                            <div class="ms-Grid-col ms-md6">
                                <label for="image-height">Image height (px)</label>
                                <input type="number" step="1" min="0" name="imageHeight" id="image-height"
                                    placeholder="e.g. 80" value="92">
                            </div>
                        </div>
                        <div class="ms-Grid-row">
                            <div class="ms-Grid-col ms-md6">
                                <label for="left-offset">Left offset</label>
                                <input type="number" step="1" name="leftOffset" id="left-offset" placeholder="e.g. 40"
                                    value="46">
                            </div>
                            <div class="ms-Grid-col ms-md6">
                                <label for="top-offset">Top offset</label>
                                <input type="number" step="1" name="topOffset" id="top-offset" placeholder="e.g. 40"
                                    value="46">
                            </div>
                        </div>
                        <div class="ms-Grid-row">
                            <div class="ms-Grid-col ms-md6">
                                <label for="bg-color">Background color</label>
                                <input type="text" name="bgColor" id="bg-color" placeholder="e.g. #777777"
                                    value=#777777>
                            </div>
                            <div class="ms-Grid-col ms-md6">
                                <label for="icon-color">Icon color</label>
                                <input type="text" name="iconColor" id="icon-color" placeholder="e.g. #FFFFFF"
                                    value=#FFFFFF>
                            </div>
                        </div>
                        <div class="ms-Grid-row">
                            <div class="ms-Grid-col ms-sm12">
                                <label><input type="checkbox" checked name="shape" id="shape"> Use a circle as the
                                    background fill</label>
                            </div>
                        </div>
                    </div>

                    <input type="submit"
                        class="ms-button ms-bgColor-themeDark ms-bgColor-themeDarker--hover ms-fontColor-white"
                        value="Render Font Icon">

                    <p>If the icon does not render immediately, wait a few seconds and press the <b>Render</b> button
                        again; the webfont may still be loading.</p>

                </form>
            </div>
            <div class="ms-Grid-col ms-sm12 ms-lg6">
                <h2 class="ms-font-xxl">Result</h2>

                <div class="canvas-container">
                    <canvas id="canvas" width="92" height="92"></canvas>
                </div>

                <p><a id="download-link"
                        class="ms-button ms-bgColor-themeDark ms-bgColor-themeDarker--hover ms-fontColor-white"
                        target="_blank"><i class="ms-Icon ms-Icon--Download"></i> Download the image</a></p>
                <label for="dataURL">Data URL</label>
                <input id="dataURL" type="text">
            </div>
        </div>
    </div>
</body>
<script src="index.js"></script>

</html>

css

与 codepen 中的代码相比，这里只是多了一个 @font-face 声明要使用的字体。图标的下载地址,提取码：1234

@import url(https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css);

@font-face {
    font-family: 'Segoe MVR MDL2 Assets';
    src: url('SegoeMVRMDL2Assets.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    background-color: #0078d4;
    color: white;
}

.ms-Grid {
    margin: 0 auto;
    padding: 0 16px;
    max-width: 1280px;
}

.ms-Grid-row {
    margin-left: -16px;
    margin-right: -16px;
}

.ms-Grid-col {
    padding: 0 16px;
}

label {
    display: block;
    margin-bottom: 0.5em;
}

input {
    border: none;
    display: block;
    margin-bottom: 2em;
    padding: 5px;
    width: 100%;
    font-size: 16px;
}

input[type="checkbox"] {
    display: inline-block;
    padding: 0;
    width: auto;
}

input[type="button"],
input[type="submit"],
.ms-button {
    cursor: pointer;
    display: inline-block;
    padding: 0.75em 2em;
    text-decoration: none;
    width: auto;

}

.ms-button .ms-Icon {
    transform: translateY(2px);
}

.canvas-container {
    background-color: white;
    display: inline-block;
    margin-bottom: 1em;
    padding: 10px;
    width: auto;
}

#canvas {
    color: black;
    font-family: FabricMDL2Icons;
}

js

这里我们主要修改了 getFontIconCharacter() 函数，直接根据输入框的内容返回字符的 Unicode。

const form = document.getElementById("form");
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const download = document.getElementById("download-link");
const dataURL = document.getElementById("dataURL");
const fontFamily = "Segoe MVR MDL2 Assets";

function getFontIconCharacter(unicode) {
    return String.fromCharCode(parseInt(unicode, 16));
}

function drawCircle() {
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    var radius = canvas.width / 2;
    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    context.fillStyle = document.getElementById("bg-color").value || "#777777";
    context.fill();
}

function drawRect() {
    context.fillStyle = document.getElementById("bg-color").value || "#777777";
    context.fillRect(0, 0, canvas.width, canvas.height);
}

function drawIcon() {
    canvas.width = parseInt(document.getElementById("image-width").value, 10) || 92;
    canvas.height = parseInt(document.getElementById("image-height").value, 10) || 92;
    context.clearRect(0, 0, canvas.width, canvas.height);
    if (document.getElementById("shape").checked) {
        drawCircle();
    } else {
        drawRect();
    }
    context.fillStyle = document.getElementById("icon-color").value || "#FFFFFF";
    let fontUnicode = document.getElementById("font-unicode").value,
        fontSize = document.getElementById("font-size").value || 280,
        topOffset = document.getElementById("top-offset").value || 210,
        leftOffset = document.getElementById("left-offset").value || 210;
    context.font = `${fontSize}px ${fontFamily}`;
    context.textAlign = "center";
    context.textBaseline = "middle";
    context.fillText(getFontIconCharacter(fontUnicode), parseInt(leftOffset, 10), parseInt(topOffset, 10));
    dataURL.value = canvas.toDataURL();

}

window.addEventListener('load', function () {
    drawIcon();
});

document.addEventListener('DOMContentLoaded', function () {
    context.font = "10px " + fontFamily;
    context.fillText("...", 0, 0);
});

form.addEventListener("submit", function (event) {
    event.preventDefault();
    drawIcon();
});

download.addEventListener("click", function (event) {
    if (typeof this.download !== "undefined") {
        this.href = canvas.toDataURL();
        this.download = `${document.getElementById("font-unicode").value}.png`;
    } else {
        event.preventDefault();
        alert("Your browser does not support downloading a canvas image. Please right-click on the image to save it.");
    }
});

dataURL.addEventListener("focus", function (event) {
    dataURL.select();
});

效果

打开 html 之后如下图所示，只需修改 Icon unicode，再点击 Render Font Icon 按钮，就能在右侧的画布中看到图标，点击 Download the image 按钮就能下载图标了。

到此这篇关于利用JS将图标字体渲染为图片的方法详解的文章就介绍到这了,更多相关JS图标字体渲染内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

mustache.js实现首页元件动态渲染的示例代码

前言在项目开发过程中,特别是OA类软件,会针对邮件/待办/公告等模块在主页面进行快捷查看的元件展示要求,类似效果如下针对框架层面,我们可以进行后台的可视化配置,使用mustache.js在主页面进行动态渲染,避免了对主页面的繁琐的硬编码工作,同时针对每个信息展示的元件进行内部个性化处理表结构包含了元件名称,元件模板路径,元件列表数据路由,查看更多路由,启用/禁用等可视化配置模板定义这里的模板直接使用的html文件,方便css与js的修改,简单的使用了mustache
深入了解JavaScript阻塞渲染

目录到底几个线程主线程的任务 Parse HTML Recaculate Style Layout Update Layer Tree Paint JS为啥阻塞渲染总结前言: 在中文社区,这么多年一直流传一个说法:JS线程负责执行JS,GUI渲染线程负责渲染,这两者是互斥的,所以JS执行时会阻塞渲染.但随着Dev Tools使用的增多,逐渐开始怀疑以上说法.本文会以实际案例来解释为什么JS阻塞渲染. 到底几个线程在讲解JS线程与GUI线程互斥的文章中,通常会列出渲染进程包含的线程,比如
渲染函数 & JSX详情

目录一.基础二.节点.树以及虚拟 DOM 1.虚拟 DOM 三.createElement 参数 1.深入数据对象 2.完整示例 3.约束四.使用 JavaScript 代替模板功能 1.v-if 和 v-for 2.v-model 3.事件 & 按键修饰符 4.插槽五.JSX 六.函数式组件 1.向子元素或子组件传递 attribute 和事件 2.slots() 和 children 对比七.模板编译一.基础 Vue 推荐在绝大多数情况下使用模板来创建你的 HTML.然而在一些场
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例

本文实例讲述了jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作.分享给大家供大家参考,具体如下: 1.先给json格式的数据: [ {"id":1,"name":"stan"}, {"id":2,"name":"jack"}, {"id":3,"name":"lucy"}, {"id&quo
nuxt.js服务端渲染中axios和proxy代理的配置操作

需要npm axios? 刚开始,我以为需要像普通的vue SPA开发那样,需要npm axios,这种方式的确可以生效.但在使用时并不方便.尤其是设置代理比较麻烦,而且在asyncData里与在普通methods里使用方式不一样. 后来在nuxt的github上发现了nuxt是默认集成了axios的,所以不需要npm axios,但是需要进行适当的配置. 以上是百度到的,发现老是报错,现在网上的教程完全是在扯淡,npm axios 是不需要安装了,但是 @nuxtjs/axios 要安装啊第
JS实现数据动态渲染的竖向步骤条

本文实例为大家分享了JS实现数据动态渲染竖向步骤条的具体代码,供大家参考,具体内容如下实现以下效果: 运用的知识点主要是html的伪元素.然后步骤条通过js动态渲染.最后一条数据的状态颜色状态为高亮状态. 直接上代码 html部分: <ul class="progress_box"> </ul> css部分: * { margin: 0; padding: 0; } ul { width: 360px; margin:100px auto; } li { po
爬虫进阶-JS自动渲染之Scrapy_splash组件的使用

目录 1. 什么是scrapy_splash? 2. scrapy_splash的作用 3. scrapy_splash的环境安装 3.1 使用splash的docker镜像 3.2 在python虚拟环境中安装scrapy-splash包 4. 在scrapy中使用splash 4.1 创建项目创建爬虫 4.2 完善settings.py配置文件 4.3 不使用splash 4.4 使用splash 4.5 分别运行俩个爬虫,并观察现象 4.6 结论 5. 了解更多 6. 小结 1. 什么是s
利用JS将图标字体渲染为图片的方法详解

目录前言实现方式 html css js 效果前言在软件开发中肯定要用到图标,比如下图的 Groove 音乐中就用到了许多图标.一种获取这些图标的方法是把 Groove 音乐截个图,然后熟练地开启 Photoshop,开始抠图.这种方式很逊,效率也很低(虽然我刚开始就是这么干的). 如果打开 C:/Program File/WindowsApps(需要修改权限才能进入),可以发现几个名字里带 ZuneMusic 的文件夹,其中的某一个文件夹中会有字体文件 SegMVR2.ttf.这是一个
利用JS hash制作单页Web应用的方法详解

前言本文主要给大家介绍了关于利用JS hash制作单页Web应用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.何为hash 这里要讲的hash(也叫哈希),指的是JS中location对象的hash属性,它返回的是URL中#后所跟的零个或多个字符.通常,我们可以通过location.hash的方式获取哈希值或设置哈希值.当然,我们也可以通过设置a标签的href属性来设置哈希值,当用户点击该a标签时即可改变页面的哈希值. 例如: /** JS方式 **/ lo
Python实现向PPT中插入表格与图片的方法详解

目录插入表格插入图片上一章节学习了如何在 PPT 中添加段落以及自定义段落(书写段落的内容以及样式的调整),今天的章节将学习在 PPT 中插入表格与图片以及在表格中插入内容. 废话不多说了,直接进入主题. 插入表格首先还是要生成 PPT 对象: ppt = Presentation() 通过 Presentation() 实例化一个 ppt 对象(Presentation 可以通过 python-pptx 直接拿过来使用) 选择布局: layout = ppt.slide_layout[
JS合并两个数组的3种方法详解

这篇文章主要介绍了JS合并两个数组的3种方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下需要将两个数组合并成为一个的情况.比如: var a = [1,2,3]; var b = [4,5,6]; 有两个数组a.b,需求是将两个数组合并成一个.方法如下: 1.concat js的Array对象提供了一个叫concat()方法,连接两个或更多的数组,并返回结果. var c = a.concat(b); //c=[1,2,3,4,5,6]
Python批量生成字幕图片的方法详解

目录说明前提放码说明视频剪辑时需要为视频添加字幕,添加字幕方法之一:根据字幕文本文件批量生成透明底只有字幕内容的图片文件,如下图,然后将这些图片文件添加到视频剪辑软件轨道中. 于是用pillow这Python图片工具库执行本次批量生成工作. 前提 pip intall pillow 放码 from PIL import Image, ImageDraw, ImageFont import os imageWidth, imageHeight = 1920, 1080 fontsFold
JS实现获取GIF总帧数的方法详解

目录前言写在前面思路分析什么是Gif 组成结构解析原理数据块分析 Header Block Logical Screen Descriptor Global Color Table Graphics Control Extension Image Descriptor Image Data 实现代码测试用例插件地址前言有一个Gif图片,我们想要获取它的总帧数,超过一定帧数的图片告知用户不可上传,在服务端有很多现成的库可以使用,这种做法不是很友好,前端需要先将gif上传至服务端
在js里怎么实现Xcode里的callFuncN方法(详解)

本人使用的WebStorm编辑器,里面没有callFuncN, 不记得Lua是否支持callFuncN,如果不支持相信应该能用同样的方法做到. 废话不多说,贴代码: loadDown : function () { var dis = this.left_move.getPositionY() - this.left.getPositionY(); // 得到一个距离 var act1 = new cc.moveBy(0.5,cc.p(0,-dis)); var act2 = cc.callFu
利用FlubuCore用C#来写DevOps脚本的方法详解

前言随着近些年微服务的流行,有越来越多的开发者和团队所采纳和使用,它的确提供了很多的优势也解决了很多的问题,但是我们也知道也并不是银弹,提供优势的同时它也给我们的开发人员和团队也带来了很多的挑战. 为了迎接或者采用这些新技术,开发团队需要更加注重一些流程或工具的使用,这样才能更好的适应这些新技术所带来的一些问题. 对于流程行问题,敏捷的Scrum能够很好的提升产品开发团队之间的协作问题,那么对于应用变的越来越复杂这种情况,它最直接的问题就是带来了开发运维的复杂性,这个时候我们就需要使用工具来解
Node.js 中的 fs 模块与Path模块方法详解

概述: 文件系统模块是一个简单包装的标准 POSIX 文件 I/O 操作方法集.可以通过调用 require("fs") 来获取该模块.文件系统模块中的所有方法均有异步和同步版本. 文件系统模块中的异步方法需要一个完成时的回调函数作为最后一个传入形参. 回调函数的构成由调用的异步方法所决定,通常情况下回调函数的第一个形参为返回的错误信息. 如果异步操作执行正确并返回,该错误形参则为null或者undefined.如果使用的是同步版本的操作方法,一旦出现错误,会以通常的抛出错误的形式返回
利用Python上传日志并监控告警的方法详解

目录 1.准备 2.使用阿里云SDK上传Python日志 3.配置日志告警在我们的日常生活工作中,经常会遇到需要上传日志的场景,比如多台机器运行同一个程序,并且需要记录每台机器程序产生的日志,根据相关关键词告警,或者进行无数据告警,如果自己搭建这套系统需要耗费不少时间,因此如果能使用市面上现成的系统会很方便. 本文将教你如何通过阿里云日志服务搭建一套通过Python上传日志.配置日志告警的监控服务. 1.准备开始之前,你要确保Python和pip已经成功安装在电脑上,如果没有,可以访问这篇文

利用JS将图标字体渲染为图片的方法详解

目录

前言

实现方式

html

css

js

效果

相关推荐

随机推荐