关于前端:我的截图插件被Gitee使用了

前言

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

插件地址与实现原理

本插件采纳原生 js 实现，能够集成在任意一个 web 我的项目中，插件 npm 地址与 GitHub 地址请移步：

• js-screen-shot（npm）
• js-screen-shot（GitHub）

插件的实现原理请移步：

• 实现 Web 端自定义截屏
• 实现 Web 端自定义截屏(JS 版)

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

Gitee 产品经理的青眼

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

沟通实现后，他问我要不要把插件在 Gitee 也放一份，能够帮我举荐下，我毫不犹豫的抱住了大腿，就把插件搬过来了，失去一波首页举荐😂

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

影响体验的一些小问题

上周二，从 GitHub 来了个网友，加了我微信，给我的插件提了两个 issues，因为周内没工夫解决这些问题，就打算周末对立解决下插件的 issues。

整顿无效的 issues

工夫回到上周六早上，我关上 GitHub 瞅了一眼 issues，许久不看竟然曾经有 19 条了。

通过一番整顿，去掉一些无用的和曾经批改好了的，最终确定了 4 条：

• 调用者能够在框选区域外绘制问题
• 截图区域工具栏首次点击时删除裁剪框的 8 个可操作点
• 修复框选实现后，鼠标点击其余地位截图工具栏跟着挪动问题
• 增加可选参数反对单击截全屏性能

解决 issues

问题整顿实现，接下来就是解决问题环节了。

选区外绘制问题

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

实现思路

这个问题解决起来比较简单，裁剪框曾经绘制好了，晓得它的坐标信息，咱们在进行绘制时，只须要判断以后鼠标地位是否超出裁剪框的坐标点区域即可。局部实现代码如下所示：

// 获取裁剪框地位信息
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: 修复插件调用者能够在框选区域外绘制问题

实现成果

实现后的成果如下所示：

工具栏追随鼠标挪动问题

这个问题能够形容为：裁剪框确定后，工具栏尚未点击，此时鼠标点其余地位，截图工具栏就跟着鼠标从新计算了地位，咱们持续用 Gitee 来举例，如下所示：

实现思路

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

解决这个问题也很简略，咱们只须要在鼠标挪动时增加一个标识，鼠标抬起时判断这个标识是否为 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: 修复框选实现后，鼠标点击其余地位截图工具栏跟着挪动问题

实现后果

修复后的成果如下所示：

删除 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 个可操作点

实现成果

实现单击截全屏性能

给我提 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: 增加可选参数反对单击截全屏性能

写在最初

至此，文章就分享结束了。

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

如果你对我感兴趣，请移步我的集体网站，进一步理解。

• 文中如有谬误，欢送在评论区斧正，如果这篇文章帮到了你，欢送点赞和关注😊
• 本文首发于神奇的程序员公众号，未经许可禁止转载💌