爱意满满的作品展示区。
sandtears

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

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

    我的强迫症都被你们治好了....
    sandtears
        14
    sandtears  
    OP
       Aug 27, 2014
    @aa65535 啊。。实现的我比强多了
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5399 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 189ms · UTC 09:13 · PVG 17:13 · LAX 02:13 · JFK 05:13
    ♥ Do have faith in what you're doing.