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

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

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

今天这个仇先记下来

  •  
  •   hutchins · 150 天前 · 7143 次点击
    这是一个创建于 150 天前的主题,其中的信息可能已经有所发展或是发生改变。

    引言

    jichou

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

    实现

    anpai

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

    最后

    体验地址 项目地址

    第 1 条附言  ·  149 天前

    2018年5月19日

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

    2018年5月23日

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

    措施

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

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

    Invalid value given for Length: "auto"
    

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

    第 3 条附言  ·  146 天前

    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;
    });
    
    42 回复  |  直到 2018-05-31 18:20:34 +08:00
        1
    Mogugugugu   150 天前 via Android
    大神 666,不过手机用 via 浏览器无法下载或者保存图片,提示仅支持 http/https
        2
    cai314494687   150 天前
    @Mogugugugu 微信长按图片,保存?
        3
    Mogugugugu   150 天前 via Android
    不是微信,手机上用 via 浏览器打开,都无法保存的
        4
    qof3990   150 天前 via Android
    有趣,赶紧记下来。
    再做个表情包自定义文字吧。虽然已经有人做了一些。不过你可以做个裁剪图片上的文字再重新添加的。
        5
    abcde51111   150 天前 via Android
    试了下 可以 大神 666
        6
    hutchins   150 天前 via Android
    @cai314494687 这个还没实现,明天搞一搞
        7
    hutchins   150 天前 via Android
    @qof3990 好的。感谢支持!
        8
    hutchins   150 天前 via Android
    @Mogugugugu 现在保存是直接下载,还没弄长按保存
        9
    youngxu   150 天前 via Android
    666
        10
    fe619742721   150 天前 via iPhone
    想法不错啊,用过很多次 html2canvas,也用过很多表情编辑器,我咋没想到弄一个这个。。666,明天我也尝试写个玩玩
        11
    Trim21   150 天前
    建议不要点保存的同时自动下载,用电脑时想要发表情直接就复制了...
        12
    Twinkle   150 天前
    https://lab.bangbang93.com/jichou

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