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

爱意满满的作品展示区。

This topic created in 4327 days ago, the information mentioned may be changed or developed.

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

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

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

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

Supplement 1 · Aug 26, 2014

现已支持 iOS 和 Android

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

canvas

HTML

message

14 replies • 2014-08-27 12:49:02 +08:00

faceair

Aug 26, 2014

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

sandtears

Aug 26, 2014

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

CDuXZMAPgHp1q9ew

Aug 26, 2014

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

lightening

Aug 26, 2014

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

qq529633582

Aug 26, 2014

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

yangff

Aug 26, 2014 via Android

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

goodbest

Aug 26, 2014

最近刚想写一个，赞

sandtears

Aug 26, 2014

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