My screenshot plugin is used by Gitee

Preface

Last Saturday, a group of friends @我说Gitee’s feedback module added a screenshot function, I went to experience it and found that they used my plug-in 😁, this article will share this plug-in with you, everyone is welcome to be interested Of developers read this article.

Plug-in address and implementation principle

This plug-in is implemented using native js and can be integrated in any web project. Please move to the npm address and GitHub address of the plug-in:

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

Please move to the implementation principle of the plug-in:

• Realize web-side custom screenshots
• Realize Web-side custom screenshots (JS version)

To experience this plug-in online, you can move to my open source project chat-system to experience it. For the running effect video of the plug-in, please move to realize the web-side custom screenshot function-effect video .

Gitee product manager's favor

At the beginning of the month, Gitee’s product manager saw my screenshot plug-in js-screen-shot thought it was pretty good. They were doing this feature recently, so they planned to integrate my plug-in directly and communicate with me. The following copyright related matters.

After the communication was completed, he asked me if I wanted to put a copy of the plug-in in Gitee, and he could recommend it for me. I hugged my thigh without hesitation, moved the plug-in over, and got a wave of homepage recommendations😂

Gitee needs to log in and click the send feedback icon on the right side of the page.

Some minor issues that affect the experience

Last Tuesday, a netizen came from GitHub, added me on WeChat, and raised two issues for my plug-in. Because there was no time to deal with these issues during the week, I planned to deal with the issues of the plug-in at the weekend.

Organize effective issues

Back in the morning of last Saturday, I opened GitHub and took a look at the issues. After a long time, there were already 19 issues.

After some sorting, some useless and modified ones were removed, and finally 4 items were determined:

• The caller can draw the question outside the framed area
• Delete the 8 operable points of the crop frame when the screenshot area toolbar is clicked for the first time
• Fix the problem that the toolbar moves when clicking on other positions after the frame selection is completed
• Add optional parameters to support one-click full screen capture

Resolve issues

The problem is sorted out, and the next step is to solve the problem.

Problems with drawing outside the constituency

Under normal circumstances, after the screenshot area is established, the user will draw in the crop box area, so I did not consider this boundary situation 🤥, after the plug-in uses more people, naturally someone will find this problem, we take the feedback from gitee Module example (gitee is currently using my old version of the plug-in, there must be this problem), as shown below, the four red boxes we drew are out of the crop box:

Realization ideas

This problem is relatively simple to solve. The crop box has been drawn, and we know its coordinate information. When drawing, we only need to judge whether the current mouse position exceeds the coordinate point area of the crop box. Part of the implementation code is as follows:

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

getDrawBoundaryStatus function is implemented as follows:

/**
 * 获取工具栏工具边界绘制状态
 * @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;
}

For specific code, please submit the record: fix: Fix the problem that the caller of the plug-in can draw outside the selected area

Achieve effect

The effect after implementation is as follows:

Toolbar moves with the mouse

This problem can be described as: After the crop box is confirmed, the toolbar has not been clicked. At this time, the mouse clicks on other positions, and the screenshot toolbar follows the mouse to recalculate the position. Let's continue to use Gitee as an example, as shown below:

Realization ideas

When the left mouse button is raised, if the toolbar has not been clicked, the position of the screenshot toolbar will be established according to the current mouse position and the size of the crop box. The user simply clicks anywhere in the crop box area, and the toolbar moves accordingly.

Solving this problem is also very simple, we only need to add a logo when the mouse is moved, and judge whether the logo is true when the mouse is raised. Part of the code is as follows:

  // 鼠标拖动状态
  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;
    }
  }

Please move to submit the record for the specific code: fix: After the box selection is completed, the mouse clicks on other positions to take screenshots and the toolbar follows the movement problem

Achieve results

The repaired effect is as follows:

Delete 8 operable points

Last year, when the screenshot plug-in was written, I discovered this problem. When the screenshot toolbar is clicked, the crop box is not allowed to be changed. If the 8 operable points still exist, it looks strange. The idea at that time was straightforward. Delete the 8 points of the frame, but these 8 points are all drawn up. After a long time of tossing, I put it aside without finding the solution. This problem is shown in the following figure:

Realization ideas

Today, a year later, I knew that the idea of deleting those 8 points would definitely not work. I would experience the screenshots of QQ over and over again and observe how he did it. Suddenly, I was inspired by it. Now that I have a crop frame. If I re-draw the cropping box, it’s fine. After deleting the 8 operable points around the cropping box, I can delete the calculation logic of optimizing those 8 points when generating the picture, resulting in the range Inaccuracy issues, so as to achieve perfect screenshots. Part of the implementation code is as follows:

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

For the specific code, please submit the record: fix: Delete the 8 operable points of the crop frame when the toolbar of the screenshot area is clicked for the first time

Achieve effect

Realize one-click full-screen screenshot function

The netizen who asked me about issues hoped that after the screenshot plug-in was loaded, the user would not drag and drop to generate a selection box, and just click with the left mouse button to capture the entire screen. I think there are not many people who need this requirement, so I made it. Optional parameters.

Realization ideas

This is also very simple. When the mouse is raised, if the click to take a full screen is enabled, draw a crop frame with the same size as the canvas from the coordinate (0, 0) position. Part of the code is as follows:

  // 鼠标抬起事件
  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;
    }
  }

For the specific code, please submit the record step by step: feat: Add optional parameters to support the click to take full screen function

Write at the end

At this point, the article is finished sharing.

I am magical programmer , a front-end development engineer.

If you are interested in me, please visit my personal website to learn more.

• If there is an error in the article, please correct it in the comment area. If this article helped you, please like and follow it😊
• This article was first published on magical programmer public account, reprinting without permission is prohibited 💌