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

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

  ddiu8081 · 39 天前 · 9826 次点击
这是一个创建于 39 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

截图

ScreenShot

演示&链接

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

实现过程:博客

Github:ddiu8081/oreooo

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