单 html 静态文件实现在头像右上角添加 "1 message" 的角标（使用 canvas）

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3733 天前的主题，其中的信息可能已经有所发展或是发生改变。

昨天看到 /t/129776 中分享了一个在头像右上角添加 "1 message" 角标的应用。
其中 est 提到 “这玩意不要服务器都可以。。。canvas直接本地修改本地保存。。。。”
于是趁着外卖还没来用 canvas 写了一个单 html 文件的实现。

演示： http://sandtearsstatic.sinaapp.com/one_message.html
源码： https://github.com/Sandtears/one_message

小白一个，不怎么会写前端，欢迎各位大大拍砖。

自己在 PC 和 Android 上用 Chrome 测试通过。

第 1 条附言 · 2014-08-26 21:36:17 +08:00

现已支持 iOS 和 Android

iOS 下 Safari 的表现是打开一个新的图片页面；
Android 下 Chrome 的表现是下载图片。

canvas

HTML

message

14 条回复 • 2014-08-27 12:49:02 +08:00

faceair

2014-08-26 19:00:30 +08:00

你们打算组队逼死处女座么。。。

sandtears

2014-08-26 19:07:19 +08:00

现在存在这样一个问题，因为没有服务器，单 HTML 文件实现。
所以使用 canvas 生成的图片想要保存只能使用 DataURL 的形式。
但是 DataURL 保存时我并不知道怎么才能指定后缀名，搜索了一下也没有找到解决方案。
有没有哪位大大可以来给我指点下方向。

CDuXZMAPgHp1q9ew

2014-08-26 19:46:42 +08:00

参考迅雷离线助手到处到idm的功能，他们是可以指定文件名的，在firefox下 @sandtears

lightening

2014-08-26 19:47:58 +08:00

拉黑拉黑，全都拉黑！！！！

qq529633582

2014-08-26 20:03:08 +08:00

@sandtears https://github.com/eligrey/FileSaver.js

yangff

2014-08-26 20:21:47 +08:00 via Android

@sandtears 塞进a标签然指定文件名模拟click我记得是这样的。

goodbest

2014-08-26 20:51:50 +08:00

最近刚想写一个，赞

sandtears

2014-08-26 21:34:40 +08:00

@wujichao
@qq529633582
@yangff
感谢建议，我最后用的是 yangff 的方法，将 DataURI 作为 a 标签的 href 属性，然后在 js 中指定 a 标签的 download 属性为 'one_message.png'，这样下载的图片就会自动命名为 one_message.png 了。