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

[sandtears]

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

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

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

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

[faceair]

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

[sandtears]

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

[wujichao]

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

[lightening]

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

[qq529633582]

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

[yangff]

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

[goodbest]

最近刚想写一个，赞

[sandtears]

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

[aa65535]

呃，我昨天就写了一个，也是单文件的 http://rpi.aa65535.com/wxhead.html

[asca]

强迫症晚期患者表示，我已经强迫通讯录中的好友全部把头像改回原来的了。

[JungleHi]

@aa65535 你这个最好用了 手机电脑都行 还能修改显示数字

[bzw875]

不错，canvas画画好费劲，不过挺好玩的。

[goldenlove]

99+， 或者直接 ...

我的强迫症都被你们治好了....

[sandtears]

@aa65535 啊。。实现的我比强多了