今天这个仇先记下来

[hutchins]

引言

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

实现

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

最后

体验地址 项目地址

[hutchins]

@mejee 唉，有道理！

[hutchins]

@ob 唉！更有道理！

[hutchins]

@yamedie 哈哈哈哈哈，好玩

[hutchins]

@Twinkle 额刚看到，他好像也都压缩了，看不到咋实现的😂😂

[hutchins]

更新了一下。取消了自动下载，添加了当前日期和上传自定义图片

[mejee]

升级的很快啊，那么再刚一波需求:
1,文字可以通过鼠标擦掉
2,添加的文字可以自定义位置

[xuanyuanaosheng]

不错，6666

[Cytion]

投了铜币，楼主别记仇（逃

[hutchins]

@Cytion 一起学习一起快乐就好 哈哈哈

[hutchins]

@mejee 哇，一看就是有想法的大佬，这周有实验，更新往后拖一拖~

[xshwy]

请问可以用在自己的网站吗？没有盈利，会标注项目地址

[hutchins]

@xshwy 完全可以的

[Oo0]

还以为真记谁的仇

[Lanke0]

恩，不错

[xshwy]

@hutchins 好的 谢谢楼主~~

[wjm2038]

请问一下 canvas 的边界是在哪里设置的啊,发现如果点击的时候下滑屏幕会出黑框

[polarbearn]

@wjm2038 这个边框就是包住图片和文字的 div 的边框

[hutchins]

@wjm2038 已修复，清空下缓存试试看

[wjm2038]

@hutchins 感谢

[liudanning]

@hutchins btn.onclick 里面加一句 window.scrollTo(0, 0) 似乎就好了。