V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
sandtears
V2EX  ›  分享创造

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

  •  
  •   sandtears · 2014-08-26 18:55:00 +08:00 · 7336 次点击
    这是一个创建于 3729 天前的主题,其中的信息可能已经有所发展或是发生改变。
    昨天看到 /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 的表现是下载图片。
    14 条回复    2014-08-27 12:49:02 +08:00
    faceair
        1
    faceair  
       2014-08-26 19:00:30 +08:00   ❤️ 1
    你们打算组队逼死处女座么。。。
    sandtears
        2
    sandtears  
    OP
       2014-08-26 19:07:19 +08:00
    现在存在这样一个问题,因为没有服务器,单 HTML 文件实现。
    所以使用 canvas 生成的图片想要保存只能使用 DataURL 的形式。
    但是 DataURL 保存时我并不知道怎么才能指定后缀名,搜索了一下也没有找到解决方案。
    有没有哪位大大可以来给我指点下方向。
    CDuXZMAPgHp1q9ew
        3
    CDuXZMAPgHp1q9ew  
       2014-08-26 19:46:42 +08:00
    参考迅雷离线助手到处到idm的功能,他们是可以指定文件名的,在firefox下 @sandtears
    lightening
        4
    lightening  
       2014-08-26 19:47:58 +08:00
    拉黑拉黑,全都拉黑!!!!
    qq529633582
        5
    qq529633582  
       2014-08-26 20:03:08 +08:00
    yangff
        6
    yangff  
       2014-08-26 20:21:47 +08:00 via Android   ❤️ 1
    @sandtears 塞进a标签然指定文件名模拟click我记得是这样的。
    goodbest
        7
    goodbest  
       2014-08-26 20:51:50 +08:00
    最近刚想写一个,赞
    sandtears
        8
    sandtears  
    OP
       2014-08-26 21:34:40 +08:00
    @wujichao
    @qq529633582
    @yangff
    感谢建议,我最后用的是 yangff 的方法,将 DataURI 作为 a 标签的 href 属性,然后在 js 中指定 a 标签的 download 属性为 'one_message.png',这样下载的图片就会自动命名为 one_message.png 了。
    aa65535
        9
    aa65535  
       2014-08-26 21:38:21 +08:00
    呃,我昨天就写了一个,也是单文件的 http://rpi.aa65535.com/wxhead.html
    asca
        10
    asca  
       2014-08-27 08:50:05 +08:00
    强迫症晚期患者表示,我已经强迫通讯录中的好友全部把头像改回原来的了。
    JungleHi
        11
    JungleHi  
       2014-08-27 09:20:07 +08:00
    @aa65535 你这个最好用了 手机电脑都行 还能修改显示数字
    bzw875
        12
    bzw875  
       2014-08-27 12:38:23 +08:00
    不错,canvas画画好费劲,不过挺好玩的。
    goldenlove
        13
    goldenlove  
       2014-08-27 12:47:51 +08:00
    99+, 或者直接 ...

    我的强迫症都被你们治好了....
    sandtears
        14
    sandtears  
    OP
       2014-08-27 12:49:02 +08:00
    @aa65535 啊。。实现的我比强多了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2714 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 11:49 · PVG 19:49 · LAX 03:49 · JFK 06:49
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.