今天这个仇先记下来

[hutchins]

引言

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

实现

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

最后

体验地址 项目地址

[Mogugugugu]

大神 666，不过手机用 via 浏览器无法下载或者保存图片，提示仅支持 http/https

[cai314494687]

@Mogugugugu 微信长按图片，保存？

[Mogugugugu]

不是微信，手机上用 via 浏览器打开，都无法保存的

[qof3990]

有趣，赶紧记下来。
再做个表情包自定义文字吧。虽然已经有人做了一些。不过你可以做个裁剪图片上的文字再重新添加的。

[abcde51111]

试了下 可以 大神 666

[hutchins]

@cai314494687 这个还没实现，明天搞一搞

[hutchins]

@qof3990 好的。感谢支持！

[hutchins]

@Mogugugugu 现在保存是直接下载，还没弄长按保存

[youngxu]

666

[fe619742721]

想法不错啊，用过很多次 html2canvas，也用过很多表情编辑器，我咋没想到弄一个这个。。666，明天我也尝试写个玩玩

[Trim21]

建议不要点保存的同时自动下载,用电脑时想要发表情直接就复制了...

[Twinkle]

https://lab.bangbang93.com/jichou

他们可能是用了这个

[FrankFang128]

想要报存图片还是搞个后端服务器吧

[pkookp8]

顺便可以加
别说 18 号，19,20,21 也不会有，直接记下来

[ssrtree]

手机 UC 可以保存。但是图片不居中，偏上了。下面一截黑色的。

[mejee]

真好玩，感谢楼主，建议日期可以用当前时间自动生成

[ob]

接下来，就开始要自己上传图片了。。

[yamedie]

我也做过很多类似的，比如“我想对你说”
http://mayao.qiniudn.com/tell-u/

[hutchins]

@Trim21 好

[hutchins]

@ssrtree 刚开始我的浏览器也出现下面是黑色的，然后我把上面整个 div 背景调成白色就好了