今天这个仇先记下来

[MLuminary]

引言

最近这个记仇图片在我的一些群里出现次数相当高，朋友们都会去用修图软件去改下面的文字，作为一个前端党就在想能不能更加便利一点，一开始想用 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;
});

还有老哥说在 btn.onclick 里面加一句 window.scrollTo(0, 0) 似乎就好了。

[Sonic853]

我可以在你项目的基础上再多加一些功能吗？比如图片大小、导出格式，文字样式以及大小，位置什么的。。。

[MLuminary]

@Sonic853 可以，标明原项目地址就可以的。如果自己写着玩的话无所谓