制作一张词云图片
起因
由于装了Google的BlockStite插件，在打开不应该打开的页面时会跳转到一张照片，但是照片都比较单调，不适合我。又刚好发现了可以设置重定向网址，就想着搞一个只显示某张能警醒自己的图片的网站
一些有趣的词云网站
微词云
优点
- 可以自定义上传字体，并对每个词设置单独的字体
- 可以导入导出词库
- 可以选择形状/面罩(mask)
- 自定义词权重
- 自定义每个词的倾斜角度
- 可以设置渐变色，让整张图片看起来更加的好看
- 自定义插图
缺点
- 需要登录
- 普通会员智能下载低分辨率版本，高分辨率版本需要付费
WordClouds
优点
- 可以导入导出词库
- 可以选择形状/面罩(mask)
- 自定义词权重
- 可以设置渐变色，让整张图片看起来更加的好看
- 无需注册即可导出
缺点
- 图片大小固定，为1024*1024
- 对中文支持不好，不能上传字体
WordArt
优点
- 可以自定义上传字体
- 可以导入导出词库
- 可以选择形状/面罩(mask)
- 自定义词权重
- 随机倾斜角度
缺点
- 导出图片分辨率低，高分辨率导出需要付费
WordCloud2.js
来自于Github，项目地址
优点
- 代码开源
- 自定义配置信息
- 自定义上传字体
- 导入导出词库
- 可以选择形状/面罩(mask)
- 自定义词权重
- 随机倾斜角度
- 自定义到处图片大小
缺点
- 代码虽然比较简单，但是由于不是前端，搞清楚代码还是优点困难
结果
在WordCloud2.js尝试几次过后，不断的调试参数，最终找到了适合自己的照片
参数
网页字体
https://blog-xiw-world.oss-cn-hangzhou.aliyuncs.com/sth/%E7%94%B0%E8%8B%B1%E7%AB%A0%E9%92%A2%E7%AC%94%E8%A1%8C%E4%B9%A6%E7%AE%80.ttfDemission
宽度1920
高度1080
设备像素密度 （dppx） 2配置
{
gridSize: 11,
weightFactor: function (size) {
return size *18;
},
fontFamily: '田英章行书',
color: function (word, weight) {
return (weight >15) ? '#f02222' : '#c09292';
},
rotateRatio: 0,
rotationSteps: 1,
backgroundColor: 'rgba(0, 0, 0, 0)'
}词
25 自律
14 克制
12 坚持
11 乐观
10 忍耐
8 专注
8 付出
8 信义
8 光彩
8 单纯
8 奇迹
8 奋发
8 守信
8 惬意
8 愉快
8 感恩
8 振奋
8 热忱
8 理想
8 理解
8 童真
8 自信
7 光明
7 努力
7 友善
7 和谐
7 奋斗
7 安康
7 安详
7 尊重
7 慷慨
7 欢快
7 欣喜
7 清新
7 爱护
7 畅快
7 祝福
7 顺利
7 魅力
7 鼓舞
6 信任
6 创新
6 合作
6 善良
6 团结
6 希望
6 幸运
6 忠诚
6 悠闲
6 敬业
6 梦想
6 欣慰
6 淳朴
6 爱
6 繁荣
6 荣耀
6 谦卑
5 丰收
5 互敬
5 亲切
5 健康
5 公正
5 助人
5 厚道
5 和善
5 奉献
5 安宁
5 宽容
5 幸福
5 康健
5 得意
5 快乐
5 愉悦
5 感动
5 成功
5 成就
5 成长
5 温暖
5 激昂
5 热爱
5 生机
5 福气
5 积极
5 耐心
5 自由
5 舒适
4 丰盛
4 仁爱
4 优雅
4 健全
4 充实
4 兴奋
4 勤奋
4 包容
4 和睦
4 坚毅
4 安全
4 开怀
4 开朗
4 感激
4 执着
4 机智
4 欢乐
4 独立
4 真情
4 祥和
4 精进
4 耐性
4 诚心
3 信赖
3 光辉
3 创造
3 勇气
3 友情
3 坚决
3 坚强
3 坚持
3 奋进
3 平和
3 恬静
3 敬重
3 智慧
3 欣赏
3 满足
3 热情
3 爱心
3 祥瑞
3 稳定
3 纯洁
3 聪明
3 胜利
3 诚实
3 诚恳
3 进步
2 互助
2 公平
2 关怀
2 关爱
2 分享
2 勇敢
2 卓越
2 友谊
2 向上
2 和平
2 喜悦
2 宽厚
2 尊严
2 崇高
2 微笑
2 支持
2 温厚
2 温情
2 激励
2 珍贵
2 畅想
2 美好
2 诚挚
2 轻松
2 鼓励
1 乐观
1 优良
1 信心
1 光荣
1 友好
1 回忆
1 坚韧
1 宁静
1 守望
1 宽心
1 敬爱
1 明朗
1 温柔
1 温馨
1 珍惜
1 真挚
1 真诚
1 睿智
1 谦和
1 谦逊
1 赞美
1 坚强
1 勇敢
1 自信
1 坚韧
1 勤奋
1 梦想
1 持续
1 感恩
1 拼搏
1 进步
1 奋斗
1 挑战
1 耐心
1 乐观
1 积极向上
1 持之以恒
1 激情
1 热爱生活
1 自强不息
1 追求卓越
1 勇往直前
1 热情洋溢
1 活力四射
1 励志
1 阳光
1 温暖
1 真诚
1 善良
1 宽容
1 乐于助人
1 爱心
1 美好
1 幸福
1 快乐
1 愉快
1 安心
1 平静
1 宁静
1 自由
1 自在
1 惬意
1 舒适
1 美满
1 成功
1 成就
1 优秀
1 杰出
1 出色
1 完美
1 精彩
1 精湛
1 极致
1 尽善尽美
1 独具匠心
1 独树一帜
1 独领风骚
1 无与伦比
1 非同凡响
1 超群绝伦
1 卓尔不群
1 鹤立鸡群
1 独占鳌头
1 龙飞凤舞
1 鹰击长空
1 鱼跃龙门
1 虎啸山林
1 马到成功
1 一帆风顺
1 风起云涌
1 云淡风轻
1 风和日丽
1 阳光明媚
1 雨过天晴
1 金榜题名
1 一举成名
1 扬眉吐气
1 气壮山河
1 气贯长虹
1 气宇轩昂
1 威震四海
1 雄视天下
1 一统天下
1 横扫千军
1 纵横天下
1 破釜沉舟
1 一鼓作气
1 旗开得胜
1 势如破竹
1 高歌猛进
1 勇攀高峰
1 一往无前
1 勇冠三军
1 无坚不摧
1 无往不胜
1 所向披靡
1 战无不胜
1 攻无不克
1 百战百胜
1 举世无敌
1 一代宗师修改
在这个基础上，我对源码进行了修改，直接做成了一个页面并且部署在了netlify
