Skip to content

Latest commit

 

History

History
145 lines (120 loc) · 3.93 KB

README.md

File metadata and controls

145 lines (120 loc) · 3.93 KB
Raw

react-screenshots

a screenshot cropper tool by react

Install

NPM

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={{
        operation_undo_title: 'Undo',
        operation_mosaic_title: 'Mosaic',
        operation_text_title: 'Text',
        operation_brush_title: 'Brush',
        operation_arrow_title: 'Arrow',
        operation_ellipse_title: 'Ellipse',
        operation_rectangle_title: 'Rectangle'
      }}
      onSave={onSave}
      onCancel={onCancel}
      onOk={onOk}
    />
  )
}
  1. 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 {
  magnifier_position_label: string
  operation_ok_title: string
  operation_cancel_title: string
  operation_save_title: string
  operation_redo_title: string
  operation_undo_title: string
  operation_mosaic_title: string
  operation_text_title: string
  operation_brush_title: string
  operation_arrow_title: string
  operation_ellipse_title: string
  operation_rectangle_title: 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

screenshot

Icons

Iconfont