Перед вами текст на языке TypeScript.

Он представляет собой фрагмент кода, который выполняет следующие действия:

1. Импортирует необходимые модули.
2. Определяет функцию doScreenShot, которая асинхронно делает снимок экрана с помощью плагина js-web-screen-shot.
3. Описывает параметры функции doScreenShot и их значения.
4. Упоминает о демоверсии, которая может помочь в использовании плагина в среде Electron.
5. Рассказывает о совместимости плагина с мобильными устройствами.
6. Предоставляет информацию о том, как использовать плагин в проекте Vue при возникновении проблем с кодировкой.

В тексте также есть комментарии, которые описывают некоторые особенности использования плагина.

Текст содержит код на языке TypeScript, но не содержит специальных тегов форматирования. wrcImgPosition: в режиме webrtc необходимо ли обрезать изображение, значение имеет тип { x: number; y: number; w: number; h: number }, по умолчанию обрезка не выполняется.

noScroll: можно ли прокручивать снимок контейнера, значение имеет тип boolean, по умолчанию прокрутка включена.

maskColor: цвет маски, значение имеет тип { r: number; g: number; b: number; a: number }, по умолчанию: { r: 0; g: 0; b: 0; a: 0.6 }.

toolPosition: положение панели инструментов, значение имеет строковый тип, по умолчанию панель инструментов центрирована, доступны три опции:

• left: выравнивание по левому краю относительно области обрезки;
• center: центрирование относительно области обрезки;
• right: выравнивание по правому краю относительно области обрезки.

writeBase64: следует ли записывать содержимое снимка в буфер обмена, значение имеет логический тип, по умолчанию включено.

wrcWindowMode: следует ли использовать режим окна для создания снимков, значение имеет логический тип, по умолчанию отключено (используется текущий тег страницы). Если содержимое тега страницы имеет полосы прокрутки или нижний пробел, можно рассмотреть использование этого режима.

hiddenScrollBar: скрывает ли полосы прокрутки. Используется при создании снимков в режиме WebRTC на Chrome версии 112 на некоторых системах. Если появляются полосы прокрутки, можно попробовать исправить это с помощью этого параметра. Значение имеет объектный тип и включает четыре свойства:

• state: логическое значение, включено по умолчанию;
• fillState?: логическое значение;
• color?: строковое значение;
• fillWidth?: числовое значение;
• fillHeight?: числовое значение.

Использование текущего тега страницы для создания снимков обеспечивает наилучший пользовательский опыт. Однако из-за ошибки в Chrome версии 112 содержимое может быть сжато, что приводит к неполному захвату изображения. В этом случае приходится использовать другие решения. Варианты wrcWindowMode и hiddenScrollBar могут помочь решить эту проблему.

• Вариант wrcWindowMode более совершенен, но при авторизации пользователя могут появляться дополнительные опции приложений, что ухудшает пользовательский опыт.
• Вариант hiddenScrollBar также использует текущий тег страницы, но может привести к сжатию содержимого и появлению нижнего пробела.

Оба варианта имеют свои преимущества и недостатки. Лучше всего надеяться, что Chrome исправит эту ошибку в будущих обновлениях.

В типах, указанных выше, знак вопроса (?) обозначает необязательный тип в TypeScript. Это означает, что ключ является необязательным и его можно передать, если это необходимо.

Если изображение загружается из другого домена, необходимо разрешить междоменные запросы на сервере изображений. То же самое относится к настройке loadCrossImg, которая должна быть установлена в true, когда изображение загружается из другого домена.

Горячие клавиши

Плагин отслеживает три горячие клавиши:

• Esc — нажатие клавиши Esc на клавиатуре аналогично нажатию кнопки закрытия на панели инструментов.
• Enter — нажатие клавиши Enter на клавиатуре аналогично нажатию кнопки подтверждения на панели инструментов.
• Ctrl/Command + z — одновременное нажатие этих двух комбинаций клавиш аналогично нажатию кнопки отмены на панели инструментов.

Дополнительные API

Плагин предоставляет некоторые внутренние переменные для удобства модификации в соответствии с требованиями вызывающей стороны.

getCanvasController

Эта функция используется для получения DOM области создания снимка. Возвращаемое значение имеет тип HTMLCanvasElement.

Пример кода:

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

const screenShotHandler = new ScreenShot();
const canvasDom = screenShotHandler.getCanvasController();

Обратите внимание, что если область создания снимка ещё не загружена полностью, полученное содержимое может быть нулевым.

destroyComponents

Эта функция используется для уничтожения области создания снимка без возвращаемого значения.

Пример кода:

import ScreenShot from "js-web-shot";

const screenshotHandler = new Screenshot();
screenshotHandler.destroyComponents()

completeScreenshot

Эта функция записывает содержимое области создания снимка в буфер обмена без возвращаемого значения.

Эту функцию можно комбинировать с параметром cropBoxInfo для реализации автоматического создания снимков в заданной области. Содержимое по умолчанию записывается в буфер обмена. Если вы хотите получить base64-контент созданного снимка, вы можете использовать параметр completeCallback или напрямую получить его из sessionStorage.

Пример кода:

      const plugin = new screenShotPlugin(
        {
          clickCutFullScreen:true,
          wrcWindowMode: true,
          cropBoxInfo:{x:350, y:20, w:300, h:300},
          completeCallback: ({base64, cutInfo}) => {
            console.log(base64, cutInfo);
          },
          triggerCallback:() => {
            // 截图组件加载完毕调用此方法来完成框选区域的截图
            plugin.completeScreenshot()
          }
        });

Настройка панели инструментов

Если вам нужно изменить значки на панели инструментов, вы можете сделать это, переопределив классы CSS элементов. Все классы значков панели инструментов перечислены ниже:

• square — значок в виде прямоугольника;
• round — круглый значок;
• right-top — значок со стрелкой;
• brush — инструмент «кисть»;
• mosaicPen — инструмент «мозаика»;
• text — текстовый инструмент;
• save — кнопка сохранения;
• close — кнопка закрытия;
• undo — кнопка отмены;
• confirm — кнопка подтверждения.

Например, чтобы изменить значок square, просто добавьте следующий код в свой проект:

  .square {
    background-image: url("ваш путь к значку") !important;
    
    &:hover {
      background-image: url("ваш путь к значку") !important;
    }
    
    &:active {
      background-image: url("ваш путь к значку") !important;
     }
 }

Заключение

На этом мы завершили описание всех методов использования плагина. Существует версия этого плагина для Vue3.