大厂技术 坚持周更 精选好文
在前端开发的过程中, 我们经常遇到文件上传或者图片上传的需求, 有些场景中可能还会要求上传图片后对图片进行裁切, 压缩...., 当然 antd 提供了一个图片裁切的库 antd-img-crop, 但是使用上极度“难受”(受限), 无法自由裁切图片, 同时也无法提供压缩能力:
image.png
所以这个方案也直接pass...API介绍
image.png
技术实现
技术上主要有以下几个核心点:
实现文件上传组件样式(主要是覆盖原生input[file]的“纯洁UI”)
实现突图片裁切
实现图片压缩
包装成react组件并发布到...我们需要实现的效果是图片上传后会出现上传弹窗, 显示裁切区域, 如下:
2022-07-16 16.02.04.gif
这里弹窗的实现我采用了React-Dom的createPortal API, 它可以实现弹窗..., 当然还有很多内容平台, 因为有富文本或者md等编辑器的写作能力, 所以也会涉及到对图片的控制, 所以这些都是 react-cropper-pro 的应用领域.