本站的文章封面图就是用该工具实现的,使用tailwindCss
构建样式,使用html2canvasJs
生成图片。
操作界面如下
![纯前端文章封面图在线生成工具.jpeg 纯前端文章封面图在线生成工具.jpeg](https://store.typecho.work/usr/uploads/2023/09/1222381167.jpeg)
使用
将压缩包中的文件解压到服务器上访问即可。
然后在页面中输入想要的标题(支持回车换行),作者昵称(可以为空),图标。
在之后选择或者上传个背景图,设置好封面比例以及透明度。
最后点击下载即可下载生成好的封面图。
介绍
- 支持自定义标题/昵称
- 封面支持多种比例
- 支持调节背景图透明度
- 内置多平台图标,也可上次自定义图标
- 背景图支持自定义上传,同时也可以直接填写图片地址
- 可在本地直接用浏览器打开
index.html
直接运行
注意事项
- 技术架构原因本工具不支持手机端
- 背景图填写图片网址的方式,前提是图片网址允许跨域请求,测试 unsplash.com 图站图片完全没有问题。
- 本地使用浏览器打开时,候选图标选择后会不生效,可使用上传自定义图标的方式进行解决。
下载
版权属于:泽泽社长
本文链接:https://store.typecho.work/archives/cover-image-tool.html
本站未注明转载的文章均为原创,并采用
CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!
已卖,期待发货
感谢支持![傻笑](https://store.typecho.work/Plain/biaoqing/%E5%82%BB%E7%AC%91.png)
虽未买,但期待收货![害羞](https://store.typecho.work/Plain/biaoqing/%E5%AE%B3%E7%BE%9E.png)
今天能打开我站了?![被打](https://store.typecho.work/Plain/biaoqing/%E8%A2%AB%E6%89%93.png)
速度还行![吃瓜](https://store.typecho.work/Plain/biaoqing/%E5%90%83%E7%93%9C.png)