这里记录一下使用antd的Upload上传组件和react-cropper实现图片裁剪上传功能。

cropperjsreact-croppercropperjs翻译文档：cropper.js裁剪图片并上传（文档翻译+demo）installyarnaddreact-cropperimportCropperfrom'react-cropper'import'cropperjs

应用技术：reacthook，ant-design，react-cropper（插件）项目中需要安装插件:npminstallreact-cropper--save-dev注：这里用的react-crooper

React-Cropper实现图片裁剪文章目录React-Cropper实现图片裁剪在使用时遇到的问题1.this.cropper.getCroppedCanvasisnotafunction2.加载需要裁剪图片问题

因业务需求，需要用户自定义个人头像（图片剪切上传）；调研了之后，决定使用react-cropper插件来实现头像上传功能！react-cropper插件还是很全面不错的，满足了功能的需要。

实现方式在Upload的beforeUpload中调起react-cropper进行图片裁剪；将拿到的图片传给react-cropper；利用react-cropper进行裁剪；将裁剪后的图片交给Upload

装在哪都不所谓devDependencies主要是开发时用的，dependencies主要是线上或者其它项目安装这个包，依然需要安装的比如有个自己封装的截图组件A，这个组件使用react写的，引用了一个截图库react-cropper

在写项目的时候需要用到图片裁剪功能，使用react-cropper1.安装yarnaddreact-cropper2.组件中引入importCropperfrom‘react-cropper’3,使用{

脚手架创建antd开发,并引入react-cropper.js,将生成的截图上传至ossnpminstall--savereact-cropper在项目中引入importCropperDivfrom'react-cropper

由于实在太多人遇到了问题,特意提供了一个小demo供大家参考,demo中分别用React的classcomponent形式和Hooks形式实现了两个同样功能的图片裁剪弹窗.参考代码地址:https://github.com/qhwc2009/copper-learn你可以把demo工程clone下来到本地,然后执行$yarn,执行完毕后再执行$yarnstart启动项目.用到的组件实现图片裁切并上

react-cropper+antdesign+dva实现裁剪图片并上传的功能一.首先安装react-cropper插件npminstall--savereact-cropper执行该命令以后，下载react-cropper

react+antd+react-cropper+lrz实现图片剪裁后压缩上传需要安装的依赖npminstallreact-cropper图片裁剪npminstalllrz图片压缩关于react-cropper

在使用React开发中我们经常会遇到上传图片的情况，如果要使的上传的图片符合一定的规格，那么便要在客户端对上传的图片进行一定的裁剪，这个时候我么便可以使用到react-cropper这个图片裁剪组件，可以帮助我们轻松的实现图片裁剪功能