受网上的一张图感染,做了一个生成器。
代码很简单,用了 Vue + Canvas 纯前端实现。
第一次接触多语言和 Canvas,还是踩了不少坑的,目前前端图片下载的部分可能还是有兼容性问题,在各种内置浏览器都没法正常打开......
Demo:在这里(国内) 和 这里(gh-pages)
实现过程:博客
Github:ddiu8081/oreooo
1
nullornull 2019-01-09 11:52:28 +08:00 22
|
2
deadEgg 2019-01-09 11:53:44 +08:00
过于沙雕,收藏了
|
3
wispx 2019-01-09 12:03:38 +08:00 via iPhone
啥呀这是,莫名喜感,哈哈哈哈哈
|
4
silencefent 2019-01-09 12:06:36 +08:00 1
夹心还小一点薄一点
|
5
ZhaoMiing 2019-01-09 12:13:18 +08:00
哈哈哈哈
|
6
barryng67 2019-01-09 12:23:47 +08:00 via iPhone
哈哈哈哈哈,什么鬼
|
7
xujinkai 2019-01-09 12:26:00 +08:00 via Android 2
看到一楼想到 弄个莫尔斯电码转换吧 输入字母 输出你的奥利奥
|
8
dapang1221 2019-01-09 12:28:42 +08:00
过于沙雕,star 了
|
9
ddiu8081 OP |
10
chotow 2019-01-09 12:48:22 +08:00
Loading 和普通页面的切换过程中,滚动条时不时出现导致页面时不时左移,有点难受。
|
11
May725 2019-01-09 13:21:40 +08:00
过于沙雕,哈哈哈哈
|
12
zhang1215 2019-01-09 13:37:49 +08:00
刚点开还不知道沙雕在哪里,结果被一楼吓一跳
|
13
Donne 2019-01-09 13:41:19 +08:00
看到一楼,我真切的感觉到了沙雕的气息
|
14
molvqingtai 2019-01-09 13:44:33 +08:00 via Android
QQ 内置浏览器下载报错有解决吗
|
15
5CanTell 2019-01-09 14:23:00 +08:00
已 star
|
16
wsyzzz 2019-01-09 14:50:29 +08:00
我好像在即刻见过你,是一个人吗
|
18
youcall911 2019-01-09 14:57:32 +08:00
哈哈哈哈哈
|
20
nosky 2019-01-09 15:26:46 +08:00 via Android
夸克浏览器没法保存图片诶,微信内置浏览器也不行。
|
21
xiusheji 2019-01-09 15:51:32 +08:00
哭笑不得~~
|
22
gaolycn 2019-01-09 15:58:50 +08:00
我的第二个奥利奥没有钢印
https://i.loli.net/2019/01/09/5c35a92f33159.png |
23
ddiu8081 OP @molvqingtai #14 @nosky #20 纯前端实现图片下载有点困难😪目前只有 Chrome 是测试通过的...
@gaolycn #22 这是 feature ...因为考虑这是一个整体所以只有顶层有图案.. |
24
KDr2 2019-01-09 16:52:15 +08:00
怎么生成 奥地利?
|
25
feehey 2019-01-09 17:05:28 +08:00
强👍
|
26
youcall911 2019-01-09 18:26:43 +08:00
微博火了
|
27
C2G 2019-01-09 18:48:59 +08:00 via Android
|
28
ddiu8081 OP @youcall911 #26 妈耶..搜到了🌚
|
29
XXXXXDDDDD 2019-01-09 19:09:16 +08:00
哈哈哈莫名的喜感
|
31
journey 2019-01-09 19:28:23 +08:00
够沙雕,star 了
|
32
Hypn0s 2019-01-09 19:38:35 +08:00 via Android
笑死我了
|
33
hflyf123 2019-01-09 19:42:59 +08:00
我直接修改 input 框里内容点生成不行哎~
|
34
HarveyJ 2019-01-09 20:53:35 +08:00
够沙雕,收藏了
|
35
ddiu8081 OP @hflyf123 #33 是的,它不是按照 input 内容生成的,是在点按钮的时候生成一个数组,根据这个数组来显示文字和画图的
|
36
zhangxiaogang 2019-01-10 00:15:16 +08:00 via iPhone
有意思哈哈
|
37
mario85 2019-01-10 00:59:29 +08:00 via iPhone
我觉得可以搞一个只使用“奥”“利”和“与”三个字的沙雕语言,然后用这个语言写一个 hello world
|
38
sdijeenx 2019-01-10 01:00:43 +08:00 1
|
39
kingandyoga 2019-01-10 04:28:29 +08:00
等一个麦辣鸡。。。。 辣鸡
|
40
azicat 2019-01-10 08:51:35 +08:00
JOJO ?オラオラオラオラオラオラオラオラ
|
41
Telegram 2019-01-10 09:14:54 +08:00 via iPhone
够沙雕,我喜欢
|
42
ShuoHui 2019-01-10 09:38:58 +08:00 via iPhone
哈哈哈哈哈好沙雕收藏了
|
43
Phariel 2019-01-10 09:44:29 +08:00 via iPhone
一楼那个我第一反应是摩尔斯电码
(*≧▽≦) |
44
laoganbu 2019-01-10 10:54:39 +08:00 1
鼠标坏了,赔我
|
45
uTuw2C6uf964Kx6o 2019-01-10 12:08:36 +08:00
html2canvas 生成图片?
|
47
sdijeenx 2019-01-10 13:18:37 +08:00 1
又写了个转换代码,可以配合网页一起食用。比如:
鲁迅:奥利奥不是用来玩的。 $ 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 |
48
sdijeenx 2019-01-10 13:20:08 +08:00 1
要把返回结果粘贴到浏览器控制台里。
|
49
sdijeenx 2019-01-10 13:24:35 +08:00 1
|
50
STRRL 2019-01-10 13:32:53 +08:00 1
希望加个键盘事件,O 和 R 这两个键,就可以更方便无脑沙雕了。
手动狗头 |
53
mmtromsb456 2019-01-10 16:53:33 +08:00 1
哈哈哈哈哈哈哈哈太可爱了...
顺便报个 bug.Safari For Mac 12.0.2 生成的图片名字过长无法发送至 qq |
55
xiaoluoboding 2019-01-10 18:27:51 +08:00 1
内容过于沙雕,收藏
|
56
warkbox 2019-01-10 18:30:45 +08:00 1
在微博看到了,是不是访问人数太多了,一下午都没进去!
|
57
ddiu8081 OP @warkbox #56 是的,今天访问量太大了,我刷了一遍微博评论,自己也是一个晚上没进去后台...
现在已经重定向到 Github Pages 了,再看看怎么样吧... |
58
bluepikachu 2019-01-10 19:53:11 +08:00
太沙雕了,收藏起来
|
59
leiuu 2019-01-10 19:55:56 +08:00 via Android
求字体配置...挺好玩哈哈...
|
61
leiuu 2019-01-10 20:00:59 +08:00 via Android
可以 @奥利奥官方,这可以当一个的营销创意...
|
62
susucoolsama 2019-01-10 20:09:27 +08:00 via iPhone
哈哈哈哈,楼主这个创意不错,够沙雕,喜欢。
|
63
3img 2019-01-10 20:24:01 +08:00 1
建议找个语音素材,鼠标划过每一块时,发出声音
奥奥奥奥利利利利奥奥利利奥奥利利奥奥利利 |
65
hellojinjie 2019-01-10 21:32:10 +08:00
年纪大了,已经看不懂你们在玩什么了
|
66
master13 2019-01-11 08:28:39 +08:00
认真读了开源的代码,又来评价。非常赞,教科书级的 coding 甚至可以进 vue 官方 demo。从多国语言设定到 canvas 绘制和保存图片,很有学习的价值。只是 loadimages 用了一个无参定长的 callback 函数,这个地方似乎还有改进的空间,但瑕不掩瑜,还是手动赞一下这个项目。
|
68
OldPanda 2019-01-12 08:32:28 +08:00
蛤蛤蛤,前些天在推特上看到了这个奥利奥生成器的演示,楼主那是不是你?
|
70
chuxiakeji 2019-01-12 09:53:41 +08:00 via Android 1
过于沙雕,战略性 mark,star 已经送上
|
71
yangheng4922 2019-01-12 21:34:50 +08:00 1
|
73
Shook 2019-01-13 09:41:24 +08:00
这个挺好玩的
|
74
ddiu8081 OP @yangheng4922 #71 会玩😅
|
75
Shook 2019-01-13 16:58:11 +08:00 1
提个建议:
按住按钮能不能添加多个? |
80
hutchins 2019-01-15 19:09:34 +08:00
主播狠沙雕,关注了
|
83
wadezhao 2019-01-18 15:04:29 +08:00
玩了 10 分钟之后,围观的刘先生表示自己活了四十多年从来没见过这么沙雕的事~~~~
|
84
GiantHard 2019-01-19 21:45:01 +08:00 via Android 1
我用这个生成的图把 ipad 上的 edge 弄崩溃了,现在一打开就闪退
|
85
ddiu8081 OP @GiantHard #84 打不开 Edge 么?抱歉没有 iPad 不清楚要怎么清除数据或者恢复...
下载图片的问题我不好判断,可能是因为图片名过长,这点做了一点改进 |
86
HeiXiaoBai 2019-01-21 14:08:43 +08:00
哈哈哈够沙雕,顺带问一下,"与"是用来干啥的?
|
87
ddiu8081 OP @HeiXiaoBai #86 就是空格,根据这张图来的
|
88
HeiXiaoBai 2019-01-22 10:05:43 +08:00
@ddiu8081 #87 我本来以为是弄多个,譬如"奥利奥与奥利奥",然后发现这样中间奥没有图案,没想到原来是这样
|