网页自由截图

image.png

在反馈组件中，需要一个网页自由截图功能。
现成的轮子，没有找到合适的。可能因为自由截图的需求比较少。
想到了比较常用的html2canvas:

take "screenshots" of webpages or parts of it, directly on the users browser.

使用html2canvas，只要搞定用户需要的是哪个部分，就可以完成自由截图了。

最终的目的是拿到截取图片的宽高和xy偏移量。

思路：通过监听mousedown mousemove mouseup事件，记录起始点坐标。
细节 1. mousemove需要防抖处理。
2. 需要考虑结束点在起始点上下左右各个方位的情况。
3. 截取时，需要高亮选中区域，用起始点坐标确定四个遮罩区域进行拼接。
4. 截取完成，需要显示controls，要根据起始点与页面边缘的距离考虑controls的显示位置。

  const [clipStartPoint, setClipStartPoint] = useState({});//起点
  const [clipEndPoint, setClipEndPoint] = useState({});//终点
  const [showClipPart,setShowClipPart]= useState(false);//是否显示遮罩区域（高亮）
  const [configVisible,setConfigVisible]= useState(false);//是否显示controls
  const [makingImg,setMakingImg]= useState(false);//生成截图

        html2canvas(document.body,{
            width:width,
            height:height,
            x:x,
            y:y
        }).then(function(canvas) {
            onSuccess(canvas.toDataURL('image/png'));
        });

后续，可以结合Canvas绘图功能，在controls中增加绘制功能，类似常用的微信截图功能。