单 html 静态文件实现在头像右上角添加 "1 message" 的角标（使用 canvas）
sandtears 2014-08-26 18:55:00 +08:00 7822 次点击这是一个创建于 4112 天前的主题，其中的信息可能已经有所发展或是发生改变。
昨天看到 /t/129776 中分享了一个在头像右上角添加 "1 message" 角标的应用。
其中 est 提到 “这玩意不要服务器都可以。。。canvas直接本地修改本地保存。。。。”
于是趁着外卖还没来用 canvas 写了一个单 html 文件的实现。
演示： http://sandtearsstatic.sinaapp.com/one_message.html
源码： https://github.com/Sandtears/one_message
小白一个，不怎么会写前端，欢迎各位大大拍砖。
自己在 PC 和 Android 上用 Chrome 测试通过。
其中 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 的表现是下载图片。
iOS 下 Safari 的表现是打开一个新的图片页面；
Android 下 Chrome 的表现是下载图片。
 | 1 faceair 2014-08-26 19:00:30 +08:00  1 你们打算组队逼死处女座么。。。 |
 | 2 sandtears OP 现在存在这样一个问题，因为没有服务器，单 HTML 文件实现。 所以使用 canvas 生成的图片想要保存只能使用 DataURL 的形式。 但是 DataURL 保存时我并不知道怎么才能指定后缀名，搜索了一下也没有找到解决方案。 有没有哪位大大可以来给我指点下方向。 |
 | 3 CDuXZMAPgHp1q9ew 2014-08-26 19:46:42 +08:00 参考迅雷离线助手到处到idm的功能，他们是可以指定文件名的，在firefox下 @sandtears |
 | 4 lightening 2014-08-26 19:47:58 +08:00 拉黑拉黑，全都拉黑！！！！ |
 | 5 qq529633582 2014-08-26 20:03:08 +08:00 |
 | 7 goodbest 2014-08-26 20:51:50 +08:00 最近刚想写一个，赞 |
| 8 sandtears OP @wujichao @qq529633582 @yangff 感谢建议，我最后用的是 yangff 的方法，将 DataURI 作为 a 标签的 href 属性，然后在 js 中指定 a 标签的 download 属性为 'one_message.png'，这样下载的图片就会自动命名为 one_message.png 了。 |
 | 9 aa65535 2014-08-26 21:38:21 +08:00 呃，我昨天就写了一个，也是单文件的 http://rpi.aa65535.com/wxhead.html |
 | 10 asca 2014-08-27 08:50:05 +08:00 强迫症晚期患者表示，我已经强迫通讯录中的好友全部把头像改回原来的了。 |
 | 12 bzw875 2014-08-27 12:38:23 +08:00 不错，canvas画画好费劲，不过挺好玩的。 |
 | 13 goldenlove 2014-08-27 12:47:51 +08:00 99+， 或者直接 ... 我的强迫症都被你们治好了.... |
Select Language