使用React-Cropper-Pro实现图片裁剪、压缩和上传

在前端开发的过程中，我们经常会遇到文件上传或者图片上传的需求。在某些场景下，可能需要在上传图片后进行裁剪。压缩。对于不想加班的程序员来说，首先要做的就是使用第三方库。虽然我们熟悉的antd、element等库提供上传组件：image.png，但是这些第三方UI库体积比较大，不够轻量，另一方面不支持裁剪、压缩等功能，所以还是需要自己实现或者集成第三方库。当然，antd提供了图片裁剪库antd-img-crop，但是极其“用”的不舒服（restricted），无法自由裁剪图片，也无法提供压缩能力：所以这个方案也是直接pass。最后，为了达到想要的效果，我决定牺牲自己，手动实现一个支持上传、裁剪、压缩的Component，并命名为react-cropper-pro。react-cropper-pro使用介绍react-cropper-pro是一个简单轻量级的图片上传+crop+压缩组件，不依赖antd/element等第三方UI，快速实现图片处理相关操作，底层依赖于react-cropper。使用importCropperProfrom'react-cropper-pro'安装yarnaddreact-cropper-pro；exportdefault()=>console.log(file)}onDel={(image)=>console.log('remove',image)}/>;image.pngAPI介绍技术技术实现主要有以下几个核心点：实现文件上传组件样式（主要覆盖原生input[file]“PureUI”）。实现图像突然裁剪。实现图像压缩。打包成react组件发布到npm。下面简单介绍一下实现细节。1.实现文件上传组件的样式我们都知道元素的输入文件上传组件默认的样式很简单，所以我们需要通过某种方式替换掉原来的样式，这里分享一下实现方式.其实很简单。就是通过定位在input上覆盖一个同样大小的div，然后让div事件穿透响应input事件。核心代码如下：/>