今天这个仇先记下来 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
这是一个专门讨论 idea 的地方。

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

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

今天这个仇先记下来

  •  
  •   hutchins 2018-05-18 18:54:29 +08:00 11466 次点击
    这是一个创建于 2705 天前的主题,其中的信息可能已经有所发展或是发生改变。

    引言

    jichou

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

    实现

    anpai

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

    最后

    体验地址 项目地址

    第 1 条附言    2018-05-19 15:35:05 +08:00

    2018年5月19日

    • 增加当前时间
    • 取消自动下载功能
    • 可以自定义上传图片
    第 2 条附言    2018-05-23 00:07:44 +08:00

    2018年5月23日

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

    措施

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

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

    Invalid value given for Length: "auto" 

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

    第 3 条附言    2018-05-23 00:15:47 +08:00

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

    他们可能是用了这个
    FrankFang128
        13
    FrankFang128  
       2018-05-19 00:53:32 +08:00
    想要报存图片还是搞个后端服务器吧
    pkookp8
        14
    pkookp8  
       2018-05-19 01:55:39 +08:00 via Android
    顺便可以加
    别说 18 号,19,20,21 也不会有,直接记下来
    ssrtree
        15
    ssrtree  
       2018-05-19 03:16:46 +08:00 via Android
    手机 UC 可以保存。但是图片不居中,偏上了。下面一截黑色的。
    temp178
        16
    temp178  
       2018-05-19 06:38:05 +08:00 via Android
    真好玩,感谢楼主,建议日期可以用当前时间自动生成
    ob
        17
    ob  
       2018-05-19 07:08:14 +08:00
    接下来,就开始要自己上传图片了。。
    yamedie
        18
    yamedie  
       2018-05-19 07:15:28 +08:00 via Android   1
    我也做过很多类似的,比如“我想对你说”
    http://mayao.qiniudn.com/tell-u/
    hutchins
        19
    hutchins  
    OP
       2018-05-19 08:07:14 +08:00 via Android
    @Trim21
    hutchins
        20
    hutchins  
    OP
       2018-05-19 08:08:49 +08:00 via Android
    @ssrtree 刚开始我的浏览器也出现下面是黑色的,然后我把上面整个 div 背景调成白色就好了
    hutchins
        21
    hutchins  
    OP
       2018-05-19 08:09:09 +08:00 via Android
    @mejee 唉,有道理!
    hutchins
        22
    hutchins  
    OP
       2018-05-19 08:09:31 +08:00 via Android
    @ob 唉!更有道理!
    hutchins
        23
    hutchins  
    OP
       2018-05-19 08:10:09 +08:00 via Android
    @yamedie 哈哈哈哈哈,好玩
    hutchins
        24
    hutchins  
    OP
       2018-05-19 08:11:10 +08:00 via Android
    @Twinkle 额刚看到,他好像也都压缩了,看不到咋实现的
    hutchins
        25
    hutchins  
    OP
       2018-05-19 15:33:47 +08:00
    更新了一下。取消了自动下载,添加了当前日期和上传自定义图片
    temp178
        26
    temp178  
       2018-05-19 17:44:51 +08:00 via Android
    升级的很快啊,那么再刚一波需求:
    1,文字可以通过鼠标擦掉
    2,添加的文字可以自定义位置
    xuanyuanaosheng
        27
    xuanyuanaosheng  
       2018-05-19 18:54:42 +08:00 via Android
    不错,6666
    Cytion
        28
    Cytion  
       2018-05-19 19:08:41 +08:00 via Android
    投了铜币,楼主别记仇(逃
    hutchins
        29
    hutchins  
    OP
       2018-05-19 19:47:33 +08:00
    @Cytion 一起学习一起快乐就好 哈哈哈
    hutchins
        30
    hutchins  
    OP
       2018-05-19 19:48:33 +08:00
    @mejee 哇,一看就是有想法的大佬,这周有实验,更新往后拖一拖~
    xshwy
        31
    xshwy  
       2018-05-21 12:51:33 +08:00
    请问可以用在自己的网站吗?没有盈利,会标注项目地址
    hutchins
        32
    hutchins  
    OP
       2018-05-21 15:09:39 +08:00 via Android
    @xshwy 完全可以的
    Oo0
        33
    Oo0  
       2018-05-21 16:25:06 +08:00 via iPhone
    还以为真记谁的仇
    Lanke0
        34
    Lanke0  
       2018-05-21 19:09:56 +08:00
    恩,不错
    xshwy
        35
    xshwy  
       2018-05-22 11:05:07 +08:00
    @hutchins 好的 谢谢楼主~~
    wjm2038
        36
    wjm2038  
       2018-05-22 12:30:48 +08:00
    请问一下 canvas 的边界是在哪里设置的啊,发现如果点击的时候下滑屏幕会出黑框
    polarbearn
        37
    polarbearn  
       2018-05-22 14:42:16 +08:00
    @wjm2038 这个边框就是包住图片和文字的 div 的边框
    hutchins
        38
    hutchins  
    OP
       2018-05-23 00:01:44 +08:00
    @wjm2038 已修复,清空下缓存试试看
    wjm2038
        39
    wjm2038  
       2018-05-23 00:12:59 +08:00 via Android
    @hutchins 感谢
    liudanning
        40
    liudanning  
       2018-05-23 10:23:42 +08:00
    @hutchins btn.onclick 里面加一句 window.scrollTo(0, 0) 似乎就好了。
    hutchins
        41
    hutchins  
    OP
       2018-05-23 16:56:15 +08:00 via Android
    @liudanning 等回去试下,感谢
    ubuntullmx
        42
    ubuntullmx  
       2018-05-31 18:20:34 +08:00/span>
    不错啊
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     2909 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 32ms UTC 14:07 PVG 22:07 LAX 07:07 JFK 10:07
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86