一个 React 组件,可以通过简单的交互来裁剪图像/视频

时间:2024-06-28 09:12:11
【文件属性】:

文件名称:一个 React 组件,可以通过简单的交互来裁剪图像/视频

文件大小:1.01MB

文件格式:ZIP

更新时间:2024-06-28 09:12:11

Image manipulation

react-easy-crop 一个 React 组件,可以通过简单的交互来裁剪图像/视频 演示 查看示例: 带有钩子的基本示例 带有类的基本示例 带有裁剪图像输出的示例 带有用户选择的图像的示例(+ 自动旋转手机图片) 圆形裁剪区域和无网格示例 没有限制位置的示例 保存/加载到/从本地存储的裁剪示例 视频示例 功能 支持拖动、缩放和旋转交互 以像素和百分比提供裁剪尺寸 支持任何图像格式 ( JPEG, PNG, 甚至 GIF) 作为 url 或 base64 字符串 支持 HTML5 支持的任何视频格式 移动友好 安装 yarn add react-easy-crop 或 npm install react-easy-crop --save 基本用法 裁剪器的样式带有位置:绝对占据其父级的全部空间。 因此,你需要用一个使用 position:relative 的元素来包装它,否则裁剪器将填满整个页面。 import Cropper from 'react-easy-crop' class App extends React.Component { state = { image:


【文件预览】:
react-easy-crop-main
----.babelrc(198B)
----docs()
--------package.json(1KB)
--------.prettierrc(89B)
--------gatsby-config.js(578B)
--------src()
--------tsconfig.json(142B)
--------typings()
--------.npmrc(36B)
--------yarn.lock(641KB)
----package.json(3KB)
----cypress()
--------plugins()
--------support()
--------integration()
----.eslintrc.json(426B)
----.github()
--------FUNDING.yml(67B)
--------PULL_REQUEST_TEMPLATE.md(253B)
--------ISSUE_TEMPLATE.md(771B)
--------ISSUE_TEMPLATE()
--------CONTRIBUTING.md(1KB)
----.prettierrc(89B)
----.codesandbox()
--------ci.json(93B)
----LICENSE(1KB)
----src()
--------helpers.ts(8KB)
--------helpers.test.ts(13KB)
--------styles.css(1KB)
--------types.ts(353B)
--------index.tsx(17KB)
--------declarations.d.ts(266B)
----tsconfig.json(254B)
----bili.config.ts(653B)
----examples()
--------src()
----.all-contributorsrc(6KB)
----.gitignore(122B)
----webpack.config.js(1KB)
----CHANGELOG.md(79B)
----.circleci()
--------config.yml(931B)
----CODE_OF_CONDUCT.md(3KB)
----cypress.json(66B)
----.npmrc(36B)
----README.md(29KB)
----yarn.lock(506KB)
----.eslintignore(22B)
----scripts()
--------copy-build-files.js(1KB)
----.vscode()
--------settings.json(56B)

网友评论