react-screenshots

a screenshot cropper tool by react

Install

Usage

1. web 中使用

import React, { ReactElement, useCallback } from 'react'
import Screenshots, { Bounds } from 'react-screenshots'
import url from './image.jpg'

interface Bounds {
  x: number
  y: number
  width: number
  height: number
}

export default function App(): ReactElement {
  const onSave = useCallback((blob: Blob, bounds: Bounds) => {
    console.log('save', blob, bounds)
    console.log(URL.createObjectURL(blob))
  }, [])
  const onCancel = useCallback(() => {
    console.log('cancel')
  }, [])
  const onOk = useCallback((blob: Blob, bounds: Bounds) => {
    console.log('ok', blob, bounds)
    console.log(URL.createObjectURL(blob))
  }, [])

  return (
    <Screenshots
      url={url}
      width={window.innerWidth}
      height={window.innerHeight}
      lang={{
        operationUndoTitle: 'Undo',
        operationMosaicTitle: 'Mosaic',
        operationTextTitle: 'Text',
        operationBrushTitle: 'Brush',
        operationArrowTitle: 'Arrow',
        operationEllipseTitle: 'Ellipse',
        operationRectangleTitle: 'Rectangle'
      }}
      onSave={onSave}
      onCancel={onCancel}
      onOk={onOk}
    />
  )
}

2. electron 中使用

• electron 中使用可直接加载渲染进程的页面，页面路径为require.resolve('react-screenshots/electron/electron.html')，不推荐自己手动开发主进程，推荐直接使用electron-screenshots模块

interface ScreenshotsData {
  bounds: Bounds
  display: Display
}

interface GlobalScreenshots {
  ready: () => void
  reset: () => void
  save: (arrayBuffer: ArrayBuffer, data: ScreenshotsData) => void
  cancel: () => void
  ok: (arrayBuffer: ArrayBuffer, data: ScreenshotsData) => void
  on: (channel: string, fn: ScreenshotsListener) => void
  off: (channel: string, fn: ScreenshotsListener) => void
}

// 需要在electron的preload中提前初始化这个对象，用于渲染进程与主进程通信
window.screenshots: GlobalScreenshots

Props

interface Bounds {
  x: number
  y: number
  width: number
  height: number
}

interface Lang {
  magnifierPositionLabel: string
  operationOkTitle: string
  operationCancelTitle: string
  operationSaveTitle: string
  operationRedoTitle: string
  operationUndoTitle: string
  operationMosaicTitle: string
  operationTextTitle: string
  operationBrushTitle: string
  operationArrowTitle: string
  operationEllipseTitle: string
  operationRectangleTitle: string
}

| 名称 | 说明 | 类型 | 是否必选 | | -------- | -------------------- | -------------------------------------- | -------- | | url | 要编辑的图像资源地址 | string | 是 | | width | 画布宽度 | number | 是 | | height | 画布宽度 | number | 是 | | lang | 多语言支持，默认中文 | Partial<Lang> | 否 | | onSave | 保存按钮回调 | (blob: Blob, bounds: Bounds) => void | 否 | | onCancel | 取消按钮回调 | () => void | 否 | | onOk | 取消按钮回调 | (blob: Blob, bounds: Bounds) => void | 否 |

example

import React from 'react'

function App() {
  return (
    <Screenshot
      url="./example.png"
      width={window.innerWidth}
      height={window.innerHeight}
      onSave={() => {}}
      onCancel={() => {}}
      onOk={() => {}}
    />
  )
}

Screenshot

Icons

Iconfont