
受网上的一张图感染,做了一个生成器。
代码很简单,用了 Vue + Canvas 纯前端实现。
第一次接触多语言和 Canvas,还是踩了不少坑的,目前前端图片下载的部分可能还是有兼容性问题,在各种内置浏览器都没法正常打开......

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