瞎逛逛发现一个神奇的网站

[Macv1994]

http://koalastothemax.com/

请问各位大佬这网站是怎么实现的呀?感觉好神奇~

[Ritter]

好玩

[endershadow]

牛逼

[cslive]

挺好玩的，可以画画

[Leprax]

密集恐惧症预警 强迫症预警

[cslive]

玩到最后才发现是个考拉

[Peterey]

玩到一半发现是一只考拉，这个要是能自定义图片就超级牛逼了

[liufish]

理论上是不是所有的图片都可以做成这样

[sikariba]

好神奇

[barrelsoil]

可以自定义图片

[liyang5945]

NB，感觉可以用来做博客头像之类的

[kisshere]

上次看见这个特效的时候，秦始皇还没统一六国吧，我记得当时是一个 js 特效下载的网站提供的 demo，最终形成的是一个蒙娜丽莎的像素图

[devwolf]

仿佛刮刮乐，svg 可以这样玩的嘛，我也要学

[jfzhangak]

强迫症慎入，不划出全图 ，不全部划开的话 心里难受

[Woood]

function basicLoad(location) {
var possible = ['koalas', 'koalas1', 'koalas2', 'koalas3'];
var file = 'img/' + possible[Math.floor(Math.random() * possible.length)] + '.jpg'
return {
file: file,
shownFile: location.protocol + '//' + location.host + location.pathname + file
};
}
替换代码，应该就可以

[zhaokun]

https://i.loli.net/2021/03/09/haw5zUltprf96Kj.png
画到这地方卡住了，没反应

[Pogbag]

强迫症患者的福音

[Macv1994]

@Ritter
@endershadow
@cslive 哈哈哈哈 确实很好玩 我也玩了很久 就是想知道实现原理

[Macv1994]

@cslive
@Peterey 这个应该是宣传保护考拉的网站

[Macv1994]

@sikariba
@liyang5945
@devwolf 是啊 我也感觉好神奇

[Macv1994]

@Leprax
@jfzhangak
@Pogbag 哈哈哈哈 我也是强迫症之一

[tutustream]

都点完会跳出一个成就，大家加油！

[YAR]

我还以为自己乱画画出了一只考拉, 后来才发现是底图

[kop1989]

https://github.com/vogievetsky/KoalasToTheMax

[copper20]

f12 可看源码

[Ginray]

哈哈，把考拉的图换成妹子的 QQ 头像，高中的时候我就用过这招了

[chocovon]

按现在的技术，应该可以配合机器识图，玩“你刮我猜”了

[imgbed]

http://koalastothemax.com/img/koalas.jpg

[chiu]

考拉：你在看什么。。。

[HiShan]

哈哈哈 有意思

[stephenxiaxy]

好家伙

[zhangyangkam1]

我记得之前碰到一个一样的网站，不过每次进去都是一张随机图片

[hugsky]

验证码的新思路

[YulChigga]

@imgbed hhh

[Macv1994]

@HiShan 哈哈哈哈😄强迫症患者福音 摸鱼又多了一个站点

[itowei]

HTML 的网页特效，估计是作者展示特效用的

[FaiChou]

我是有多无聊..

M1 无压力

[KouShuiYu]

可以换图片
https://s3.ax1x.com/2021/03/09/61H4eg.png

[Phariel]

牛逼 冬天可以用这个迅速暖手 🐶

[CallMeReznov]

爷回青,GGMM 们都再网上冲浪吗

[RealKela]

浪费了我 10 分钟(ｰ ｰ;)

[crab]

@Peterey 底部不是可以输入图片链接吗

[lyqqqq]

我以为刮完会提示你说 第 XXXX 名无聊的人。
结果是自定义图片
“Awesome stuff! Now make your own and share the link.
Paste an image URL bellow and press enter.”

[rootmaster]

看来大家都是和我那么无聊，都这样搞出考拉

[icyalala]

很早以前记得有个用 Adobe AIR 做的 iOS App 完全一致。。

[Ultraman]

看域名啊兄弟们，koala

[SbloodyS]

好玩

[Macv1994]

@chiu 我在看这个强迫症长啥样 哈哈哈

@Phariel 春天来了 冬天还会远吗?

@RealKela 手速不行啊 大兄弟 hhh

@SbloodyS 哈哈哈 看到各位玩的这么开心 我的分享才有意义

@Ultraman 嗯 应该是个宣传考拉保护的网站吧

[Macv1994]

@crab 哪里啊 没看到呀

[Macv1994]

好像图片就这么几张
https://7.dusays.com/2021/03/09/a89af92e1ace6.png

[crab]

@Macv1994 操作完一次后，下面就会出现一个图片链接输入框。

[1507265844]

页面缩小狂甩鼠标，一分钟搞定 /doge

[18k]

竟然是考拉 最后不应该是一条鱼吗 真·摸鱼

[consul]

还挺流畅

[Biwood]

很多年前就有这效果了，用 D3.js ，页面底部有写

[ksedz]

有刮刮乐的感觉

[JoJoJoJ]

为啥我只看到个灰色圆圈，毫无互动

[Macv1994]

@JoJoJoJ 鼠标移到圆圈上

[ZRS]

https://i.loli.net/2021/03/09/qFDYofB7I5WHRKP.png

[FieldYu]

https://i.loli.net/2021/03/09/ZYlC9hR3guQp6FB.png
真是的

[orangeTop]

画多了 会卡

[learningman]

@Macv1994 居然没关 autoindex，有点离谱

[jfzhangak]

@barrelsoil 怎么实现替换自己想要的图片呢

[gaigechunfeng]

我还是第一次见到。很好玩收藏了。

[lizliz]

footer 里的 http://anniealbagli.com/打开吓我一跳，以为是鬼片

[CantSee]

[]( https://imgtu.com/i/63l0oT)

[awolfly9]

借楼非前端问一下，这个项目要怎么启动呢？
clone 项目后，直接点击 index 提示找不到 文件。

Sorry, KoalsToTheMax could not load the image 'img/koalas1.jpg'

[phony2r]

用 svg 的话 dom 节点太多, 一些配置不好的机器可能会卡, 还是 canvas 性能好

[onionKnight888]

难受

[silencelixing]

有没有大佬，搞出来一个可以显示任意图片的版本？

[jiurenbudai]

@silencelixing 本身就可以

[Macv1994]

@silencelixing 现在就可以 不过你要先把一张图画完 下面才会显示出来

[coalo]

https://github.com/vogievetsky/KoalasToTheMax

[silencelixing]

@Macv1994 我画完了还是没有

[silencelixing]

@jiurenbudai 怎么操作，画完吗

[xuAN111]

@Leprax 啥强迫症预警，强迫症不会有任何不舒服。这个东西和强迫症没关系

[silencelixing]

@jiurenbudai
@Macv1994
还真可以，一个点都不能留，出现了！

[Leprax]

@xuAN111 可不止我说强迫症呢

[xuAN111]

@Leprax 嗯，我指的是强迫症

[Geekerstar]

我太牛逼了，随手一画就画了个考拉😁

[ppxppx]

@Peterey 全部画完就可以粘贴图片链接生成了

[xavierskip]

N 年前玩过的网站又被人挖出来了。。我记得是可以自定义图片的。划完后就有一个自定义图片 url 的地方出现了。

[zgs1983]

有点意思.

[Hoshinokozo]

个人猜测，考拉图片是背景，圆圈更像是一个遮罩层。

可以反过来想，先准备一张图片，在上面生成一个遮罩层，遮罩层的每个像素点一开始是透明的，然后用鼠标的滑动事件设定通过某种算法生成 4 个更大的圆圈，如此往复，形成最开始的样子

[jamme]

emmm...感觉类似于 MipMap~

[beanrobbie]

哈哈，怎么都是考拉

[a0000]

@YAR 笑死我了。。233

[Macv1994]

@beanrobbie 看域名啊兄弟们，koala

[linhongye]

池化

[Latin]

https://bruno-simon.com 这个呢

[KouShuiYu]

@silencelixing https://github.com/chenkai0520/scratch-image

[KouShuiYu]

@silencelixing
任意图片的版本
https://chenkai0520.github.io/scratch-image/

[lvwzhen]

这个古早网站有快十年了吧，记得上大学时就有了。
用 「 http://koalastothemax.com/?image_url 」的格式可以访问其他图片。

[ganbuliao]

用的 d3 做的特效啊

[fanjianhang]

治好了我的鼠标手~

[adjusted]

https://dogecoin.caitouyun.com

[Molita]

哈哈哈哈哈哈哈哈

http://koalastothemax.com/?aHR0cDovL3MzLmF4MXguY29tLzIwMjEvMDMvMDkvNjNYTDdULmpwZw==

[fgk]

我的风扇♾

[GrayXu]

这不就是池化操作的反过程嘛

[lbyo]

下方这个链接点进去好阴森啊，生怕有个戴着类似哥布林大鼻子面具的人跳出来

[kuner0614]

http://koalastothemax.com/?aHR0cDovL3d4MS5zaW5haW1nLmNuL29yajM2MC9hNDU5NTI1N2d5MWdvZHJuODM3d3pqMjB1MDFoY2d5ZC5qcGc=