前端实现类似QQ截图功能中，鼠标选中区域输入文字

Question

现在有一个需求，需要做一个视频截图功能，并且需要在选中的区域内添加说明文字。

已经解决的技术点：
利用HTML5的canvas+JS可以保存视频某一帧为一张图片

问题:
怎么在刚刚保存的那张图上。鼠标拖动选中一区域可以输入文字。然后再保存为图片。

Answer 1

创建一个 DOM ，输入文字，然后这个 DOM 可以转到 canvas ： https://developer.mozilla.org...

这个 canvas 跟你视频截的那个 canvas 叠在一起，再转成图。

Answer 2

先说一下思路：
第一步：先利用canvas视频截图，生成图片并创建DOM；
第二步：当被创建的DOM被按下鼠标时，开始创建文字输入的DOM，并跟随鼠标拖动改变该DOM大小；
第三步：当鼠标松开时使文字DOM获得焦点；
第四部：输入完成，再次截图保存；

关于第四步截图会有点麻烦，这里有一个库比较好用
html2canvas