今天这个仇先记下来

[hutchins]

引言

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

实现

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

最后

体验地址 项目地址

2018年5月19日

• 增加当前时间
• 取消自动下载功能
• 可以自定义上传图片

2018年5月23日

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

措施

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

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

Invalid value given for Length: "auto"

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

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;
});

[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 背景调成白色就好了

[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) 似乎就好了。

[hutchins]

@liudanning 等回去试下，感谢😘😚😗😙

[ubuntullmx]

不错啊