V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
ddiu8081
V2EX  ›  分享创造

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

  ddiu8081 ·
ddiu8081 · 2019-01-09 11:30:45 +08:00 · 18187 次点击
这是一个创建于 2136 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

截图

ScreenShot

演示&链接

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

实现过程:博客

Github:ddiu8081/oreooo

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