node-canvas 字体

2024-09-08

node-canvas

1.使用之前需要预先安装 Cairo 本人安装遇到各种各样的坑,可以参考这里来填坑:https://github.com/Automattic/node-canvas/wiki/Installation---OSX 2.npm install canvas 安装过程遇到问题,参照第一条填坑的方式继续... 3.安装中文字体包,我用的是微软雅黑的字体 linux 与 mac 字体包的安装方式不同,具体可搜索一下使用方式 4.终于可以愉快编码了 var Canvas = require('canv

Node.js 字体格式转换 ttf2eot ttf2woff ttf2svg

前几天为了查找字体转换工具网上搜索,既然用 Node.js 来做的工具. https://github.com/fontello/ttf2eot https://github.com/fontello/ttf2woff https://github.com/qdsang/ttf2svg https://github.com/fontello/svg2ttf 先安装 node https://nodejs.org/en/ npm install -g ttf2eot npm install -g

微信小程序 canvas 字体自动换行（支持换行符）

微信小程序 canvas 自动适配自动换行,保存图片分享到朋友圈 https://github.com/richard1015/News 微信IDE演示代码https://developers.weixin.qq.com/s/WCkpsTm97M7p function findBreakPoint(text, width, context) { var min = 0; var max = text.length - 1; while (min <= max) { var middle =

浏览器指纹 - HTTP cookie 浏览器指纹欺诈检测浏览器id hash 浏览器插件信息 canvas 字体信息

详解浏览器cookie和浏览隐私之间的关系http://www.iefans.net/cookie-yinsi-guanxi/ 详解浏览器cookie和浏览隐私之间的关系浏览器相关互联网 2013-07-05 阅读(6104) 本文所说的"cookie",指的是浏览器相关的 cookie(也叫"HTTP cookie"). 浏览器 cookie 的主要功能是:帮助网站保存一些小片段的信息.比如,你曾经在自己的浏览器上登录过某个论坛,下次你再打开论坛的登录页面

Loading加载小插件,用户可以选择html格式或canvas格式，自定义loading图片，canvas色彩搭配可根据个人喜好

;(function($) { $.Loading = function(options) { //暴漏插件默认值 $.Loading.defaults = { speed: 200, //弹出层淡出速度 bgcolor: 'rgba(0,0,0,.7)', //遮罩层颜色,需要rgba格式,默认黑色0.5透明度 type: "html", //默认html样式,也可以是canvas msg: '正在加载...', //默认加载信息 loadPicNum: 2, //为html时loa

vue + canvas 图片加水印

思路:将两张图片绘制为一张目标:输入的文字,绘制到图片上,简单实现图片水印效果:输入的文字1: ‘你猜猜’ + 图片2 = 图片3(不要看清除水印的按钮,本人垃圾没实现) 选择图片 html <input type="file" id="uploadFile" class="clip" accept="image/*" @change="chooseImg"> js // 上传图片 cho

使用node+puppeteer+express搭建截图服务

使用node+puppeteer+express搭建截图服务转载请注明出处https://www.cnblogs.com/funnyzpc/p/14222807.html 写在之前一开始我们的需求是打开报表的某个页面然后把图截出来,然后调用企业微信发送给业务群这中间我尝试了多种技术,比如html2image,pdf2image.selenium这些,这其中截图比体验较好的也就selenium了,不过我们有些页面加载的时间较长,selenium似乎对html互操作性也不是很完美(通过Th

web实时长图实践--摘抄

背景简介全民K歌专辑发布新玩法,传统宣传专辑战绩的流程,从获取数据,到制作海报,到传播,周期长运营成本高,如何快速分享战绩进行荣誉感的传播成为一个亟待解决的问题. 产品:能不能在专辑大事件触发时,自动生成一个大事件长图,供粉丝分享传播? 开发:理论上没问题,尝试下吧… 浏览器端实现方案开发:大事件长图和专辑详情页大事件tab的视觉效果基本一致,如果能复用可以减少开发时间. 开发:怎么复用呢? 于是便有了下面在浏览器端尝试dom转图片的两种方案: html2canvas html2canvas

数据可视化(5)--jqplot经典实例

本来想把实例也写到上篇博客里,最后发现太长了,拆成两篇博客了. 实例来源于官方文档:http://www.jqplot.com/tests/ 这篇博客主要是翻译了官方文档关于经典实例的解说,并在相应代码中添加注释. 写到后面的时候,感觉有点心不在焉,如果有错误,或者看不懂的,欢迎留言. Line charts, scatter plots and series options(线图,散点图和系列选项) 该类型图表可能依赖于以下插件 <script type="text/javascript

silverlight 控件自定义样式实现方法

1:在app.xaml中加入需实现的样式,如: <Application.Resources> <Style x:Key="NodeStyle" TargetType="VectorModel:Node"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="VectorModel:Node

unity assetStore 常用插件

常用插件 20180723============= 教程类 =============<Mecanim Example Scenes > 官方示例场景<Surivial Shooter><2D Platformer><2D UFO Tutorial> ============= 脚本 =============<iTween><DOTween> 比iTween功能更丰富,支持组合动画.富文本动画.搭配协程一起使用等<Photo

cc.Component

组件入口函数1: onLoad: 组件加载的时候调用, 保证了你可以获取到场景中的其他节点,以及节点关联的资源数据;2: start: 也就是第一次执行 update 之前触发;3: update(dt):组件每次刷新的时候调用,距离上一次刷新的时间(会在所有画面更新前执行);4: lateUpdate(dt) 刷新完后调用(会在所有画面更新后执行);5: onEnable: 启用这个组件的时候调用;6: onDisable: 禁用这个组件的时候调用;7: onDestroy: 组件实例销毁的时

python graphviz的使用(画图工具)

参考文章1 参考文章2 一.graphviz安装及配置 graphviz实际上是一个绘图工具,可以根据dot脚本画出树形图等. 1.windows安装安装graphviz软件:https://graphviz.gitlab.io/_pages/Download/Download_windows.html 配置环境变量:把bin文件夹的路径加入到环境变量path里安装python的graphviz模块:pip install graphviz 2.linux centos7安装 yum下载gr

babeljs源码

babel.min.js!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Babel=t():e.Babel=t

css字体转换程序(Node.js)

我下载的是ttf文件,css导入的文件有多种格式:eot,woff,svg 在windows下,需要寻找相应的exe文件来处理或者node.js来处理: ttf2eot: https://github.com/fontello/ttf2eot (node.js) ttf2woff: http://wizard.ae.krakow.pl/~jb/ttf2woff/ (exe) https://github.com/fontello/ttf2woff (node.js) ttf2svg: https

解决html5 canvas 绘制字体、图片与图形模糊问题

html5 canvas 绘制字体.图片与图形模糊问题发生情况多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canvas在浏览器中的缩放原理如果没有设置style那么就以html的属性width,height作为尺寸. 如果设置了style中的width.height,那么以其style设置为最终绘制到浏览器的尺寸. 也就是说,属性中的宽高并不代表实际宽高,所以高dpi下会放大canvas,导致模糊. canva

html5 canvas在线文本第二步设置（字体边框）等我全部写完，我会写在页面底部

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

canvas使用自定义字体没有效果

字体样式没有显示主要是因为字体还没有加载完成~ css @font-face { font-family: myFont; src: local('sen.ttf'), url("sen.ttf");} html <canvas id="can" width="300px" height="300px"></canvas> js window.onload = function () { let el

WebStorm 在 Mac 版本的基本设置，包括 ES6、Node.js、字体大小等

WebStorm 在 Mac 和 win 的设置有区别,便于以后用到快速查找,记之. 要设置先点击 WebStorm 字样如下图: 后点击 Preferences 字样如下图: 设置 es6 语法, 先点击左侧 JavaScript 字样后, 在右侧红色区域选中 ECMAScript 6 即可如下图: 设置 Node.js 如下图所示(先选中左侧区域,后选中右侧区域即可): 设置字体大小如下图所示(先选中左侧区域,后选中右侧区域即可): 末尾的分号设置(先选中左侧区域,后选中右侧区域即可):

HTML5 Canvas绘文本动画（使用CSS自定义字体）

一.HTML代码: <!DOCTYPE html> <html> <head> <title>Matrix Text - HTML5 Canvas Demo</title> <script type="text/javascript" src="matrixtext.js"></script> <style> @font-face { font-family: 'Matr

html5 canvas 绘制上下浮动的字体

绘制上下浮动的字体主要思想为先绘制好需要的字体,每隔一定的时间将画布清空,然后再将字体位置改变再绘制上去如此循环即可. (function(window) { var flowLogo = function(logo, x, font) { this.logo = logo; this.x = x; this.font = font || "25px Verdana"; } flowLogo.prototype.flow = function(start, min, max, inc

node-canvas 字体

热门专题