【亲测免费】 js-screen-shot 项目教程

1、项目介绍

js-screen-shot 是一个基于原生 JavaScript 开发的 Web 端自定义截图插件。该插件不依赖任何第三方库，可以在任何支持 JavaScript 的设备上运行。它提供了丰富的功能，包括自定义截图、裁剪、涂鸦、文本添加等，适用于各种 Web 应用场景。

2、项目快速启动

安装

你可以通过 npm 或 yarn 来安装 js-screen-shot 插件：

yarn add js-web-screen-shot
# 或者
npm install js-web-screen-shot --save

使用

1. 导入插件

在需要使用截图功能的业务代码中导入插件：

import ScreenShot from "js-web-screen-shot";

2. 实例化插件

在业务代码中实例化插件，并确保在 DOM 加载完成后进行实例化：

document.addEventListener("DOMContentLoaded", () => {
  const screenShot = new ScreenShot();
});

3. CDN 形式使用

如果你不想通过 npm 安装，也可以直接使用 CDN 引入插件：

<script src="/path/to/screenShotPlugin.umd.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", () => {
    const screenShot = new screenShotPlugin();
  });
</script>

3、应用案例和最佳实践

案例1：Web 端截图工具

在 Web 应用中，用户可能需要对页面内容进行截图并保存。js-screen-shot 插件可以帮助你轻松实现这一功能。

import ScreenShot from "js-web-screen-shot";

document.addEventListener("DOMContentLoaded", () => {
  const screenShot = new ScreenShot({
    completeCallback: ([base64, cutInfo]) => {
      console.log(base64, cutInfo);
      // 在这里可以将 base64 图片保存到服务器或本地
    },
    closeCallback: () => {
      console.log("截图窗口关闭");
    }
  });
});

案例2：Electron 环境下的截图

在 Electron 环境下，由于无法直接调用 WebRTC 获取屏幕流，需要进行一些额外的处理。以下是一个简单的示例：

// 主线程
import { desktopCapturer, webContents } from "electron";

ipcMain.handle("get-sources", async () => {
  return await desktopCapturer.getSources({ types: ["window", "screen"] });
});

// 渲染线程
import { ipcRenderer } from "electron";
import ScreenShot from "js-web-screen-shot";

const getSources = async () => {
  return await ipcRenderer.invoke("get-sources");
};

const doScreenShot = async () => {
  const sources = await getSources();
  const stream = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: {
      mandatory: {
        chromeMediaSource: "desktop",
        chromeMediaSourceId: sources[0].id
      }
    }
  });

  new ScreenShot({
    enableWebRtc: true,
    screenFlow: stream
  });
};

4、典型生态项目

1. Electron 截图工具

结合 js-screen-shot 插件，可以开发一个功能强大的 Electron 截图工具，支持全屏截图、窗口截图、区域截图等功能。

2. Web 端在线编辑器

在 Web 端在线编辑器中，用户可能需要对编辑内容进行截图并保存。js-screen-shot 插件可以帮助你实现这一功能，提升用户体验。

3. 移动端截图工具

虽然 js-screen-shot 主要针对 PC 端设计，但它也对移动端进行了兼容处理。你可以在移动端应用中使用该插件，实现截图功能。

通过以上教程，你可以快速上手 js-screen-shot 插件，并在各种应用场景中实现自定义截图功能。