我的截图插件被Gitee使用了

神奇的程序员

发布于 2022-04-10 09:47:40

4.5K1

发布于 2022-04-10 09:47:40

文章被收录于专栏：神奇的程序员的专栏神奇的程序员的专栏

前言

上周六有个群友@我说Gitee的反馈模块新增了截图功能，我就去体验了下，发现他们用的就是我的插件😁，本文就跟大家分享下这个插件，欢迎各位感兴趣的开发者阅读本文。

插件地址与实现原理

本插件采用原生js实现，可以集成在任意一个web项目中，插件npm地址与GitHub地址请移步：

js-screen-shot（npm）[1]
js-screen-shot（GitHub）[2]

插件的实现原理请移步：

实现Web端自定义截屏[3]
实现Web端自定义截屏(JS版)[4]

在线体验本插件，可移步我的开源项目chat-system[5]进行体验，插件的运行效果视频请移步实现web端自定义截屏功能-效果视频[6]。

Gitee产品经理的青睐

月初的时候，Gitee的产品经理在掘金看到我的截图插件js-screen-shot[7]觉得还不错，他们最近在做这方面的功能，就打算将我的插件直接集成进去，跟我沟通了下版权相关的事情。

image-20211129225953184

沟通完成后，他问我要不要把插件在Gitee也放一份，可以帮我推荐下，我毫不犹豫的抱住了大腿，就把插件搬过去了，得到一波首页推荐😂

image-20211129230823603

img

Gitee[8]的反馈模块需要登录后，点页面右侧的发送反馈图标。

gitee反馈

影响体验的一些小问题

上周二，从GitHub来了个网友，加了我微信，给我的插件提了两个issues，因为周内没时间处理这些问题，就计划周末统一处理下插件的issues。

image-20211129231616134

整理有效的issues

时间回到上周六早上，我打开GitHub瞅了一眼issues，许久不看居然已经有19条了。

image-20211129232250926

经过一番整理，去掉一些无用的和已经修改好了的，最终确定了4条：

调用者可以在框选区域外绘制问题
截图区域工具栏首次点击时删除裁剪框的8个可操作点
修复框选完成后，鼠标点击其他位置截图工具栏跟着移动问题
添加可选参数支持单击截全屏功能

解决issues

问题整理完成，接下来就是解决问题环节了。

选区外绘制问题

正常情况下，截图区域确立后，用户都会在裁剪框区域内进行绘制，所以我就没考虑这个边界情况🤥，插件用的人多了后，自然就有人发现了这个问题，我们拿gitee的反馈模块举例（gitee目前用的还是我的旧版插件，肯定存在这个问题），如下所示，我们绘制的4个红色方框都超出裁剪框了：

image-20211129234154073

实现思路

这个问题解决起来比较简单，裁剪框已经绘制好了，知道它的坐标信息，我们在进行绘制时，只需要判断当前鼠标位置是否超出裁剪框的坐标点区域即可。部分实现代码如下所示：

// 获取裁剪框位置信息
const cutBoxPosition = this.data.getCutOutBoxPosition();
// 绘制中工具的起始x、y坐标不能小于裁剪框的起始坐标
// 绘制中工具的起始x、y坐标不能大于裁剪框的结束坐标
// 当前鼠标的x坐标不能小于裁剪框起始x坐标，不能大于裁剪框的结束坐标
// 当前鼠标的y坐标不能小于裁剪框起始y坐标，不能大于裁剪框的结束坐标
if (
      !getDrawBoundaryStatus(startX, startY, cutBoxPosition) ||
      !getDrawBoundaryStatus(currentX, currentY, cutBoxPosition)
   )
      return;

getDrawBoundaryStatus函数实现如下所示：

/**
 * 获取工具栏工具边界绘制状态
 * @param startX x轴绘制起点
 * @param startY y轴绘制起点
 * @param cutBoxPosition 裁剪框位置信息
 */
export function getDrawBoundaryStatus(
  startX: number,
  startY: number,
  cutBoxPosition: positionInfoType
): boolean {
  if (
    startX < cutBoxPosition.startX ||
    startY < cutBoxPosition.startY ||
    startX > cutBoxPosition.startX + cutBoxPosition.width ||
    startY > cutBoxPosition.startY + cutBoxPosition.height
  ) {
    // 无法绘制
    return false;
  }
  // 可以绘制
  return true;
}

具体代码请移步提交记录: fix: 修复插件调用者可以在框选区域外绘制问题[9]

实现效果

实现后的效果如下所示：

工具栏跟随鼠标移动问题

这个问题可以描述为：裁剪框确定后，工具栏尚未点击，此时鼠标点其他位置，截图工具栏就跟着鼠标重新计算了位置，我们继续用Gitee来举例，如下所示：

10011

实现思路

当鼠标左键抬起时，如果工具栏尚未被点击，则会根据当前鼠标的位置结合裁剪框的大小确立截图工具栏的位置。用户只是单纯的点击了裁剪框区域的任意位置，工具栏就跟着移动了。

解决这个问题也很简单，我们只需要在鼠标移动时添加一个标识，鼠标抬起时判断这个标识是否为true即可。部分代码如下所示：

  // 鼠标拖动状态
  private dragFlag = false;

  // 鼠标移动事件
  private mouseMoveEvent = (event: MouseEvent) => {
     // 工具栏未选择且鼠标处于按下状态时
    if (!this.data.getToolClickStatus() && this.data.getDragging()) {
      // 修改拖动状态为true;
      this.dragFlag = true;
    }
  }
  
  // 鼠标抬起事件
  private mouseUpEvent = () => {
    // 鼠标尚未拖动且工具栏未选择则不修改工具栏位置
    if (!this.dragFlag && !this.data.getToolClickStatus()) {
      // 复原裁剪框的坐标
      this.drawGraphPosition.startX = this.drawGraphPrevX;
      this.drawGraphPosition.startY = this.drawGraphPrevY;
      // 显示截图工具栏
      this.data.setToolStatus(true);
      return;
    }
  }

具体代码请移步提交记录：fix: 修复框选完成后，鼠标点击其他位置截图工具栏跟着移动问题[10]

实现结果

修复后的效果如下所示：

工具栏跟着鼠标移动-修复后的.2021-11-30 21_08_28

删除8个可操作点

去年截图插件刚写好时，我就发现这个问题了，当截图工具栏点击后裁剪框就不允许更改了，如果8个可操作点依然存在的话，看起来很奇怪，当时想到的思路是直接删除边框的8点，但是这8个点都是绘制上去的，折腾了挺久没找到方案就搁置了，这个问题如下图所示：

删除8个可操作点

实现思路

一年后的今天，我知道删除那8个点的思路肯定行不通，我就一遍又一遍的体验QQ的截图，观察他是怎么做的，突然，我灵感惊现😼，我既然有裁剪框的坐标和大小信息，我重新绘制一下这个裁剪框不就好了🤒，裁剪框四周的8个可操作点删除后，我就可以删掉生成图片时优化那8个点的计算逻辑，导致范围不精确问题，从而实现完美截图。部分实现代码如下所示：

  // 工具栏尚未点击，当前属于首次点击，重新绘制一个无像素点的裁剪框
  if (!data.getToolClickStatus()) {
    // 获取裁剪框位置信息
    const cutBoxPosition = data.getCutOutBoxPosition();
    // 开始绘制无像素点裁剪框
    drawCutOutBox(
      cutBoxPosition.startX,
      cutBoxPosition.startY,
      cutBoxPosition.width,
      cutBoxPosition.height,
      screenShortCanvas,
      data.getBorderSize(),
      screenShortController as HTMLCanvasElement,
      ScreenShortImageController,
      false
    );
  }

具体代码请移步提交记录：fix: 截图区域工具栏首次点击时删除裁剪框的8个可操作点[11]

实现效果

删除8个可操作点-修复

实现单击截全屏功能

给我提issues的那个网友希望截图插件加载完毕后，用户不拖拽生成选框，直接鼠标左键单击就能截取整个屏幕，我觉得这个需求需要的人不多，就将其做成了可选参数。

实现思路

这个也很简单，鼠标抬起时，如果开启了单击截全屏，则从坐标(0，0)位置绘制一个与画布同等大小的裁剪框即可，部分代码如下所示：

  // 鼠标抬起事件
  private mouseUpEvent = () => {
    if (
      cutBoxPosition.width === 0 &&
      cutBoxPosition.height === 0 &&
      cutBoxPosition.startX === 0 &&
      cutBoxPosition.startY === 0 &&
      !this.dragFlag &&
      this.clickCutFullScreen
    ) {
      // 设置裁剪框位置为全屏
      this.tempGraphPosition = drawCutOutBox(
        0,
        0,
        this.screenShortImageController.width,
        this.screenShortImageController.height,
        this.screenShortCanvas,
        this.data.getBorderSize(),
        this.screenShortController,
        this.screenShortImageController
      ) as drawCutOutBoxReturnType;
    }
  }

具体代码请移步提交记录：feat: 添加可选参数支持单击截全屏功能[12]

写在最后

至此，文章就分享完毕了。

我是神奇的程序员，一位前端开发工程师。

参考资料

[1]js-screen-shot（npm）: https://www.npmjs.com/package/js-web-screen-shot

[2]js-screen-shot（GitHub）: https://github.com/likaia/js-screen-shot

[3]实现Web端自定义截屏: https://juejin.cn/post/6924368956950052877

[4]实现Web端自定义截屏(JS版): https://juejin.cn/post/6931901091445473293

[5]chat-system: https://kaisir.cn/chat-system

[6]实现web端自定义截屏功能-效果视频: https://www.bilibili.com/video/BV1Ey4y127cV

[7]js-screen-shot: https://github.com/likaia/js-screen-shot

[8]Gitee: gitee.com

[9]fix: 修复插件调用者可以在框选区域外绘制问题: https://github.com/likaia/js-screen-shot/commit/df6a4dd32448356543dae967ef3dd73d981a9c3c

[10]fix: 修复框选完成后，鼠标点击其他位置截图工具栏跟着移动问题: https://github.com/likaia/js-screen-shot/commit/d4a19f58d816134608c571fbe87851b20dfa3a67

[11]fix: 截图区域工具栏首次点击时删除裁剪框的8个可操作点: https://github.com/likaia/js-screen-shot/commit/2cec12e8c3cf1648cdd2a9d1d57d9cbc567cccd0

[12]feat: 添加可选参数支持单击截全屏功能: https://github.com/likaia/js-screen-shot/commit/f4af5a472e6924c271487efc9ecc9c899d5cc448

[13]个人网站: https://www.kaisir.cn/

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2021-11-30，如有侵权请联系 cloudcommunity@tencent.com 删除

https

本文分享自神奇的程序员微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度