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

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

  ddiu8081 · 9 天前 · 8639 次点击

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

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

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

截图

ScreenShot

演示&链接

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

实现过程:博客

Github:ddiu8081/oreooo

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