今天这个仇先记下来

2018 年 5 月 18 日
 hutchins

引言

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

实现

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

最后

体验地址 项目地址

11925 次点击
所在节点    奇思妙想
42 条回复
hutchins
2018 年 5 月 19 日
@mejee 唉，有道理！
hutchins
2018 年 5 月 19 日
@ob 唉！更有道理！
hutchins
2018 年 5 月 19 日
@yamedie 哈哈哈哈哈，好玩
hutchins
2018 年 5 月 19 日
@Twinkle 额刚看到，他好像也都压缩了，看不到咋实现的😂😂
hutchins
2018 年 5 月 19 日
更新了一下。取消了自动下载，添加了当前日期和上传自定义图片
temp178
2018 年 5 月 19 日
升级的很快啊，那么再刚一波需求:
1,文字可以通过鼠标擦掉
2,添加的文字可以自定义位置
xuanyuanaosheng
2018 年 5 月 19 日
不错，6666
Cytion
2018 年 5 月 19 日
投了铜币，楼主别记仇（逃
hutchins
2018 年 5 月 19 日
@Cytion 一起学习一起快乐就好 哈哈哈
hutchins
2018 年 5 月 19 日
@mejee 哇，一看就是有想法的大佬，这周有实验，更新往后拖一拖~
xshwy
2018 年 5 月 21 日
请问可以用在自己的网站吗？没有盈利，会标注项目地址
hutchins
2018 年 5 月 21 日
@xshwy 完全可以的
Oo0
2018 年 5 月 21 日
还以为真记谁的仇
Lanke0
2018 年 5 月 21 日
恩，不错
xshwy
2018 年 5 月 22 日
@hutchins 好的 谢谢楼主~~
wjm2038
2018 年 5 月 22 日
请问一下 canvas 的边界是在哪里设置的啊,发现如果点击的时候下滑屏幕会出黑框
polarbearn
2018 年 5 月 22 日
@wjm2038 这个边框就是包住图片和文字的 div 的边框
hutchins
2018 年 5 月 23 日
@wjm2038 已修复，清空下缓存试试看
wjm2038
2018 年 5 月 23 日
@hutchins 感谢
uniuni
2018 年 5 月 23 日
@hutchins btn.onclick 里面加一句 window.scrollTo(0, 0) 似乎就好了。

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://v2ex.xtra.eu.org/t/455984

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX