V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
爱意满满的作品展示区。
ddiu8081

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

  ddiu8081 ·
ddiu8081 · Jan 9, 2019 · 19119 views
This topic created in 2666 days ago, the information mentioned may be changed or developed.

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

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

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

截图

ScreenShot

演示&链接

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

实现过程:博客

Github:ddiu8081/oreooo

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