react-image-crop

react-image-crop

React轻量级图片裁剪组件 功能全面且易于集成

react-image-crop是一个专为React设计的图片裁剪组件。它支持响应式布局、触控操作、自由或固定比例裁剪以及键盘无障碍访问。该组件无外部依赖,体积小巧(gzip后小于5KB),可设置裁剪尺寸限制,且不局限于图片裁剪。适用于现代浏览器,为开发者提供了简洁灵活的图片处理方案。

React图像裁剪前端开发开源库响应式Github开源项目

React 图像裁剪

一个无依赖的 React 图像裁剪工具。

React Image Crop 在 NPM 上

CodeSandbox 演示

ReactCrop GIF

目录

  1. 特性
  2. 安装
  3. 使用
  4. 示例
  5. CDN
  6. 属性
  7. 常见问题
    1. 如何在浏览器中生成裁剪预览?
    2. 如何纠正图像 EXIF 方向/旋转?
    3. 如何滤镜、旋转和注释?
    4. 如何使裁剪居中?
  8. 贡献/开发

特性

  • 响应式(可使用像素或百分比)。
  • 支持触摸。
  • 自由形状或固定宽高比裁剪。
  • 完全支持键盘操作(无障碍)。
  • 无依赖/占用空间小(<5KB gzip)。
  • 最小/最大裁剪尺寸。
  • 可裁剪任何内容,不仅限于图像。

如果 React Crop 不能满足您的需求,可以看看 Pintura(我们的赞助商)。它具有裁剪、旋转、滤镜、注释等更多功能。

在此了解更多关于 Pintura 的信息

安装

npm i react-image-crop --save
yarn add react-image-crop
pnpm add react-image-crop

该库适用于所有现代浏览器。不支持 IE。

使用

引入主 js 模块:

import ReactCrop from 'react-image-crop'

引入 dist/ReactCrop.cssReactCrop.scss

import 'react-image-crop/dist/ReactCrop.css' // 或 scss: import 'react-image-crop/src/ReactCrop.scss'

示例

import ReactCrop, { type Crop } from 'react-image-crop' function CropDemo({ src }) { const [crop, setCrop] = useState<Crop>() return ( <ReactCrop crop={crop} onChange={c => setCrop(c)}> <img src={src} /> </ReactCrop> ) }

查看 sandbox 演示 获取更完整的示例。

CDN

<link href="https://unpkg.com/react-image-crop/dist/ReactCrop.css" rel="stylesheet" /> <script src="https://unpkg.com/react-image-crop/dist/index.umd.cjs"></script>

注意,使用 <script> 标签全局导入脚本时,需要通过 ReactCrop.Component 访问组件。

属性

onChange: (crop: PixelCrop, percentCrop: PercentCrop) => void

每次裁剪变化时的回调函数(即在拖动/调整大小时会多次触发)。传递当前裁剪状态对象。

注意,您 必须 实现此回调并更新裁剪状态,否则不会有任何变化!

<ReactCrop crop={crop} onChange={(crop, percentCrop) => setCrop(crop)} />

croppercentCrop 可以互换。crop 使用像素,percentCrop 使用百分比来定位和调整大小。百分比裁剪对图像/媒体调整大小具有抗性。

crop?: Crop

从无裁剪开始:

const [crop, setCrop] = useState<Crop>() <ReactCrop crop={crop} onChange={c => setCrop(c)}> <img src={src} /> </ReactCrop>

从预选裁剪开始:

const [crop, setCrop] = useState<Crop>({ unit: '%', // 可以是 'px' 或 '%' x: 25, y: 25, width: 50, height: 50 }) <ReactCrop crop={crop} onChange={c => setCrop(c)}> <img src={src} /> </ReactCrop>

⚠️ 手动设置时,必须确保裁剪在边界内并符合宽高比。使用百分比时,宽高比可能会很棘手。您可以使用 centerCropmakeAspectCrop 辅助函数。查看 如何使裁剪居中?CodeSanbox 演示 获取示例。

aspect?: number

裁剪的宽高比,例如 1 表示正方形,16 / 9 表示横向。省略/传递 undefined 表示自由形状裁剪。

minWidth?: number

最小裁剪宽度,以像素为单位。

minHeight?: number

最小裁剪高度,以像素为单位。

maxWidth?: number

最大裁剪宽度,以像素为单位。

maxHeight?: number

最大裁剪高度,以像素为单位。

keepSelection?: boolean 如果传入true,则当用户点击选择区域外部时,无法禁用选择。

disabled?: boolean

如果为true,则用户无法调整大小或绘制新的裁剪区域。容器还会添加"ReactCrop--disabled"类以供用户样式设置。

locked?: boolean

如果为true,则用户无法创建或调整裁剪区域大小,但仍可拖动现有的裁剪区域。容器还会添加"ReactCrop--locked"类以供用户样式设置。

className?: string

要添加到主ReactCrop元素的类名字符串。

style?: React.CSSProperties

要传递给图像包装器元素的内联样式对象。

onComplete?: (crop: PixelCrop, percentCrop: PercentCrop) => void

在调整大小、拖动或微调后触发的回调。传递当前的裁剪状态对象。

percentCrop是百分比形式的裁剪。典型用例是保存它,以便无论图像大小如何(例如在桌面上保存,然后在图像较小的移动设备上使用),都可以恢复用户的裁剪。

onDragStart?: (e: PointerEvent) => void

用户开始拖动或调整大小时触发的回调。适用于操作此组件外部的元素。

onDragEnd?: (e: PointerEvent) => void

用户在拖动或调整大小后释放光标或触摸时触发的回调。

renderSelectionAddon?: (state: ReactCropState) => React.ReactNode

在裁剪选择区域内渲染自定义元素。

ruleOfThirds?: boolean

在裁剪区域显示三分法线。默认为false

circularCrop?: boolean

将裁剪区域显示为圆形。如果aspect不是1(正方形),则圆形会变形为椭圆形。默认为false

常见问题

如何在浏览器中生成裁剪预览?

这不是库的一部分,但这里有一个示例 CodeSandbox 演示

如何纠正图像EXIF方向/旋转?

你可能会发现某些图像旋转不正确。很遗憾,这是一个浏览器范围的问题,与本库无关。你需要在传入图像之前修复它。

你可以使用以下库来加载图像,它会为你纠正旋转:https://github.com/blueimp/JavaScript-Load-Image/

你可以在这里阅读有关此主题的问题:https://github.com/sekoyo/react-image-crop/issues/181

如果你正在寻找一个完整的开箱即用的图像编辑器,它已经处理了EXIF旋转,可以考虑使用 Pintura

<h3>如何过滤、旋转和注释?</h3>

这个库deliberately轻量级和简约,以便你可以在其基础上构建功能。如果你希望开箱即用地执行更高级的图像编辑,可以考虑使用 Pintura

Pintura 演示

如何居中裁剪?

最简单的方法是使用百分比单位:

crop: { unit: '%', width: 50, height: 50, x: 25, y: 25 }

居中一个纵横比裁剪更棘手,特别是在处理%时。不过,提供了两个辅助函数:

  1. 监听媒体的加载事件以获取其大小:
<ReactCrop crop={crop} aspect={16 / 9}> <img src={src} onLoad={onImageLoad} /> </ReactCrop>
  1. 使用makeAspectCrop创建所需的纵横比,然后使用centerCrop将其居中:
function onImageLoad(e) { const { naturalWidth: width, naturalHeight: height } = e.currentTarget const crop = centerCrop( makeAspectCrop( { // 你不需要传递完整的裁剪到 // makeAspectCrop 或 centerCrop。 unit: '%', width: 90, }, 16 / 9, width, height ), width, height ) setCrop(crop) }

同时记得在更改时使用percentCrop设置你的裁剪:

const onCropChange = (crop, percentCrop) => setCrop(percentCrop)

你的aspect属性应设置为相同的值:<ReactCrop aspect={16 / 9} ... />

贡献 / 开发

要进行开发,运行pnpm install && pnpm dev并在浏览器中打开localhost服务器。更新代码后它将重新加载。准备好后,打开一个拉取请求。

编辑推荐精选

Trae

Trae

字节跳动发布的AI编程神器IDE

Trae是一种自适应的集成开发环境(IDE),通过自动化和多元协作改变开发流程。利用Trae,团队能够更快速、精确地编写和部署代码,从而提高编程效率和项目交付速度。Trae具备上下文感知和代码自动完成功能,是提升开发效率的理想工具。

AI工具TraeAI IDE协作生产力转型热门
问小白

问小白

全能AI智能助手,随时解答生活与工作的多样问题

问小白,由元石科技研发的AI智能助手,快速准确地解答各种生活和工作问题,包括但不限于搜索、规划和社交互动,帮助用户在日常生活中提高效率,轻松管理个人事务。

热门AI助手AI对话AI工具聊天机器人
Transly

Transly

实时语音翻译/同声传译工具

Transly是一个多场景的AI大语言模型驱动的同声传译、专业翻译助手,它拥有超精准的音频识别翻译能力,几乎零延迟的使用体验和支持多国语言可以让你带它走遍全球,无论你是留学生、商务人士、韩剧美剧爱好者,还是出国游玩、多国会议、跨国追星等等,都可以满足你所有需要同传的场景需求,线上线下通用,扫除语言障碍,让全世界的语言交流不再有国界。

讯飞智文

讯飞智文

一键生成PPT和Word,让学习生活更轻松

讯飞智文是一个利用 AI 技术的项目,能够帮助用户生成 PPT 以及各类文档。无论是商业领域的市场分析报告、年度目标制定,还是学生群体的职业生涯规划、实习避坑指南,亦或是活动策划、旅游攻略等内容,它都能提供支持,帮助用户精准表达,轻松呈现各种信息。

AI办公办公工具AI工具讯飞智文AI在线生成PPTAI撰写助手多语种文档生成AI自动配图热门
讯飞星火

讯飞星火

深度推理能力全新升级,全面对标OpenAI o1

科大讯飞的星火大模型,支持语言理解、知识问答和文本创作等多功能,适用于多种文件和业务场景,提升办公和日常生活的效率。讯飞星火是一个提供丰富智能服务的平台,涵盖科技资讯、图像创作、写作辅助、编程解答、科研文献解读等功能,能为不同需求的用户提供便捷高效的帮助,助力用户轻松获取信息、解决问题,满足多样化使用场景。

热门AI开发模型训练AI工具讯飞星火大模型智能问答内容创作多语种支持智慧生活
Spark-TTS

Spark-TTS

一种基于大语言模型的高效单流解耦语音令牌文本到语音合成模型

Spark-TTS 是一个基于 PyTorch 的开源文本到语音合成项目,由多个知名机构联合参与。该项目提供了高效的 LLM(大语言模型)驱动的语音合成方案,支持语音克隆和语音创建功能,可通过命令行界面(CLI)和 Web UI 两种方式使用。用户可以根据需求调整语音的性别、音高、速度等参数,生成高质量的语音。该项目适用于多种场景,如有声读物制作、智能语音助手开发等。

咔片PPT

咔片PPT

AI助力,做PPT更简单!

咔片是一款轻量化在线演示设计工具,借助 AI 技术,实现从内容生成到智能设计的一站式 PPT 制作服务。支持多种文档格式导入生成 PPT,提供海量模板、智能美化、素材替换等功能,适用于销售、教师、学生等各类人群,能高效制作出高品质 PPT,满足不同场景演示需求。

讯飞绘文

讯飞绘文

选题、配图、成文,一站式创作,让内容运营更高效

讯飞绘文,一个AI集成平台,支持写作、选题、配图、排版和发布。高效生成适用于各类媒体的定制内容,加速品牌传播,提升内容营销效果。

热门AI辅助写作AI工具讯飞绘文内容运营AI创作个性化文章多平台分发AI助手
材料星

材料星

专业的AI公文写作平台,公文写作神器

AI 材料星,专业的 AI 公文写作辅助平台,为体制内工作人员提供高效的公文写作解决方案。拥有海量公文文库、9 大核心 AI 功能,支持 30 + 文稿类型生成,助力快速完成领导讲话、工作总结、述职报告等材料,提升办公效率,是体制打工人的得力写作神器。

openai-agents-python

openai-agents-python

OpenAI Agents SDK,助力开发者便捷使用 OpenAI 相关功能。

openai-agents-python 是 OpenAI 推出的一款强大 Python SDK,它为开发者提供了与 OpenAI 模型交互的高效工具,支持工具调用、结果处理、追踪等功能,涵盖多种应用场景,如研究助手、财务研究等,能显著提升开发效率,让开发者更轻松地利用 OpenAI 的技术优势。

下拉加载更多