首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
这是一个专门讨论 idea 的地方。

每个人的时间,资源是有限的,有的时候你或许能够想到很多 idea,但是由于现实的限制,却并不是所有的 idea 都能够成为现实。

那这个时候,不妨可以把那些 idea 分享出来,启发别人。
V2EX  ›  奇思妙想

今天这个仇先记下来

  •  
  •   hutchins · 8 天前 · 5894 次点击

    引言

    jichou

    最近这个记仇图片在我的一些群里出现次数相当高,朋友们都会去用修图软件去改下面的文字,作为一个前端党就在想能不能更加便利一点,一开始想用 canvas 去画文字,后来就偶然搜到了 html2canvas,是一款截图工具,那这样就方便多了。

    实现

    anpai

    具体实现方式就是利用 html2canvas 对一个 Div 进行截图,在这个 Div 里有记仇的图片和可编辑的文本框,然后再在下面展示并下载下来就阔以了,这部分涉及到了 base64 图片的下载,也是借用了 segmentFault 上大神的代码

    最后

    体验地址 项目地址

    第 1 条附言  ·  7 天前

    2018年5月19日

    • 增加当前时间
    • 取消自动下载功能
    • 可以自定义上传图片
    第 2 条附言  ·  4 天前

    2018年5月23日

    • 修复屏幕出现滚动条后,截图不完全

    措施

    需要修改 html2canvas 的源码, 具体源码就不放出来,在 github 中有 commit 记录。

    另外新版 html2canvas 最新版已经改为 promise 模式,本来想用最新版的,但是一直报下面的错误

    Invalid value given for Length: "auto"
    

    到官方 github 中也没有找到解决措施,因此还是用了以前版本的 html2canvas

    第 3 条附言  ·  4 天前

    2018年5月23日

    还是把解决措施贴出来吧 😂

    把项目文件 html2canvas.js 第 942 行代码

    return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then(function(canvas) {
       if (typeof(options.onrendered) === "function") {
          log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
          options.onrendered(canvas);
      }
      return canvas;
    });
    

    替换为

    var width = options.width != null ? options.width : node.ownerDocument.defaultView.innerWidth;
    var height = options.height != null ? options.height : node.ownerDocument.defaultView.innerHeight;
    return renderDocument(node.ownerDocument, options, width, height, index).then(function (canvas) {
    
        if (typeof(options.onrendered) === "function") {
            log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
            options.onrendered(canvas);
        }
        return canvas;
    });
    
    41 回复  |  直到 2018-05-23 16:56:15 +08:00
        1
    Mogugugugu   8 天前 via Android
    大神 666,不过手机用 via 浏览器无法下载或者保存图片,提示仅支持 http/https
        2
    cai314494687   8 天前
    @Mogugugugu 微信长按图片,保存?
        3
    Mogugugugu   8 天前 via Android
    不是微信,手机上用 via 浏览器打开,都无法保存的
        4
    qof3990   8 天前 via Android
    有趣,赶紧记下来。
    再做个表情包自定义文字吧。虽然已经有人做了一些。不过你可以做个裁剪图片上的文字再重新添加的。
        5
    abcde51111   8 天前 via Android
    试了下 可以 大神 666
        6
    hutchins   8 天前 via Android
    @cai314494687 这个还没实现,明天搞一搞
        7
    hutchins   8 天前 via Android
    @qof3990 好的。感谢支持!
        8
    hutchins   8 天前 via Android
    @Mogugugugu 现在保存是直接下载,还没弄长按保存
        9
    youngxu   8 天前 via Android
    666
        10
    fe619742721   8 天前 via iPhone
    想法不错啊,用过很多次 html2canvas,也用过很多表情编辑器,我咋没想到弄一个这个。。666,明天我也尝试写个玩玩
        11
    Trim21   8 天前
    建议不要点保存的同时自动下载,用电脑时想要发表情直接就复制了...
        12
    Twinkle   8 天前
    https://lab.bangbang93.com/jichou

    他们可能是用了这个
        13
    FrankFang128   8 天前
    想要报存图片还是搞个后端服务器吧
        14
    pkookp8   8 天前 via Android
    顺便可以加
    别说 18 号,19,20,21 也不会有,直接记下来
        15
    ssrtree   8 天前 via Android
    手机 UC 可以保存。但是图片不居中,偏上了。下面一截黑色的。
        16
    mejee   8 天前 via Android
    真好玩,感谢楼主,建议日期可以用当前时间自动生成
        17
    ob   8 天前
    接下来,就开始要自己上传图片了。。
        18
    yamedie   8 天前 via Android   ♥ 1
    我也做过很多类似的,比如“我想对你说”
    http://mayao.qiniudn.com/tell-u/
        19
    hutchins   8 天前 via Android
    @Trim21
        20
    hutchins   8 天前 via Android
    @ssrtree 刚开始我的浏览器也出现下面是黑色的,然后我把上面整个 div 背景调成白色就好了
        21
    hutchins   8 天前 via Android
    @mejee 唉,有道理!
        22
    hutchins   8 天前 via Android
    @ob 唉!更有道理!
        23
    hutchins   8 天前 via Android
    @yamedie 哈哈哈哈哈,好玩
        24
    hutchins   8 天前 via Android
    @Twinkle 额刚看到,他好像也都压缩了,看不到咋实现的😂😂
        25
    hutchins   7 天前
    更新了一下。取消了自动下载,添加了当前日期和上传自定义图片
        26
    mejee   7 天前 via Android
    升级的很快啊,那么再刚一波需求:
    1,文字可以通过鼠标擦掉
    2,添加的文字可以自定义位置
        27
    xuanyuanaosheng   7 天前 via Android
    不错,6666
        28
    Cytion   7 天前 via Android
    投了铜币,楼主别记仇(逃
        29
    hutchins   7 天前
    @Cytion 一起学习一起快乐就好 哈哈哈
        30
    hutchins   7 天前
    @mejee 哇,一看就是有想法的大佬,这周有实验,更新往后拖一拖~
        31
    xshwy   6 天前
    请问可以用在自己的网站吗?没有盈利,会标注项目地址
        32
    hutchins   5 天前 via Android
    @xshwy 完全可以的
        33
    Oo0   5 天前 via iPhone
    还以为真记谁的仇
        34
    Lanke0   5 天前
    恩,不错
        35
    xshwy   5 天前
    @hutchins 好的 谢谢楼主~~
        36
    wjm2038   5 天前
    请问一下 canvas 的边界是在哪里设置的啊,发现如果点击的时候下滑屏幕会出黑框
        37
    rolitter   4 天前
    @wjm2038 这个边框就是包住图片和文字的 div 的边框
        38
    hutchins   4 天前
    @wjm2038 已修复,清空下缓存试试看
        39
    wjm2038   4 天前 via Android
    @hutchins 感谢
        40
    liudanning   4 天前
    @hutchins btn.onclick 里面加一句 window.scrollTo(0, 0) 似乎就好了。
        41
    hutchins   3 天前 via Android
    @liudanning 等回去试下,感谢😘😚😗😙
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   鸣谢   ·   1715 人在线   最高记录 3541   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.1 · 18ms · UTC 05:21 · PVG 13:21 · LAX 22:21 · JFK 01:21
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1