做了一个奥利奥沙雕图生成器

2019-01-09 11:30:45 +08:00
 ddiu8081

受网上的一张图感染,做了一个生成器。

代码很简单,用了 Vue + Canvas 纯前端实现。

第一次接触多语言和 Canvas,还是踩了不少坑的,目前前端图片下载的部分可能还是有兼容性问题,在各种内置浏览器都没法正常打开......

截图

演示&链接

Demo:在这里(国内)这里(gh-pages)

实现过程:博客

Github:ddiu8081/oreooo

18250 次点击
所在节点    分享创造
88 条回复
Telegram
2019-01-10 09:14:54 +08:00
够沙雕,我喜欢
ShuoHui
2019-01-10 09:38:58 +08:00
哈哈哈哈哈好沙雕收藏了
Phariel
2019-01-10 09:44:29 +08:00
一楼那个我第一反应是摩尔斯电码
(*≧▽≦)
laoganbu
2019-01-10 10:54:39 +08:00
鼠标坏了,赔我
uTuw2C6uf964Kx6o
2019-01-10 12:08:36 +08:00
html2canvas 生成图片?
ddiu8081
2019-01-10 12:09:56 +08:00
@mrant 是直接 canvas 绘图
sdijeenx
2019-01-10 13:18:37 +08:00
又写了个转换代码,可以配合网页一起食用。比如:
鲁迅:奥利奥不是用来玩的。
$ python3 jsoreo.py "lu xun ao li ao bu shi yong lai wan de"
app.oreoArr = ['O', 'R', 'O', 'O', '-', 'O', 'O', 'R', '-', 'R', 'O', 'O', 'R', '-', 'O', 'O', 'R', '-', 'R', 'O', '-', 'O', 'R', '-', 'R', 'R', 'R', '-', 'O', 'R', 'O', 'O', '-', 'O', 'O', '-', 'O', 'R', '-', 'R', 'R', 'R', '-', 'R', 'O', 'O', 'O', '-', 'O', 'O', 'R', '-', 'O', 'O', 'O', '-', 'O', 'O', 'O', 'O', '-', 'O', 'O', '-', 'R', 'O', 'R', 'R', '-', 'R', 'R', 'R', '-', 'R', 'O', '-', 'R', 'R', 'O', '-', 'O', 'R', 'O', 'O', '-', 'O', 'R', '-', 'O', 'O', '-', 'O', 'R', 'R', '-', 'O', 'R', '-', 'R', 'O', '-', 'R', 'O', 'O', '-', 'O', '-']

生成图片:
https://raw.githubusercontent.com/firedom/oreo-lang/master/Ore-reooo-reoreo-reoo.png
sdijeenx
2019-01-10 13:20:08 +08:00
要把返回结果粘贴到浏览器控制台里。
sdijeenx
2019-01-10 13:24:35 +08:00
STRRL
2019-01-10 13:32:53 +08:00
希望加个键盘事件,O 和 R 这两个键,就可以更方便无脑沙雕了。
手动狗头
cy97cool
2019-01-10 13:57:15 +08:00
@sdijeenx 再写个工具逆向回原文吧
ddiu8081
2019-01-10 16:48:28 +08:00
@STRRL 感谢,已经支持
o/r : 输入奥 /利
-/空格 : 输入与
回车 : 生成
退格 : 返回
mmtromsb456
2019-01-10 16:53:33 +08:00
哈哈哈哈哈哈哈哈太可爱了...
顺便报个 bug.Safari For Mac 12.0.2 生成的图片名字过长无法发送至 qq
sdijeenx
2019-01-10 16:56:08 +08:00
@ddiu8081 矮油不错哦~
xiaoluoboding
2019-01-10 18:27:51 +08:00
内容过于沙雕,收藏
warkbox
2019-01-10 18:30:45 +08:00
在微博看到了,是不是访问人数太多了,一下午都没进去!
ddiu8081
2019-01-10 19:14:18 +08:00
@warkbox #56 是的,今天访问量太大了,我刷了一遍微博评论,自己也是一个晚上没进去后台...
现在已经重定向到 Github Pages 了,再看看怎么样吧...
bluepikachu
2019-01-10 19:53:11 +08:00
太沙雕了,收藏起来
leiuu
2019-01-10 19:55:56 +08:00
求字体配置...挺好玩哈哈...
ddiu8081
2019-01-10 20:00:35 +08:00
@leiuu #59 用的是「瀨戶字型」,博客里面有提到,挺好看的一个字体

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/525308

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX