大厂技术  坚持周更  精选好文

在前端开发的过程中, 我们经常遇到文件上传或者图片上传的需求, 有些场景中可能还会要求上传图片后对图片进行裁切, 压缩. 对于不想加班的程序员来说, 第一要义就是使用斯第三方库. 虽然像我们熟悉的antd, element等库提供了上传组件:

image.png

但是这些第三方UI库一方面体积比较庞大, 不够轻量, 另一方面不支持裁切, 压缩等功能, 所以还是需要自己实现或者整合第三方库实现, 当然 antd 提供了一个图片裁切的库 antd-img-crop, 但是使用上极度“难受”(受限), 无法自由裁切图片, 同时也无法提供压缩能力:

image.png

所以这个方案也直接pass.  最终为了实现想要的效果,我还是决定牺牲自己, 手动实现一个支持上传裁切并压缩的组件, 并取名为react-cropper-pro.

2022-07-16 16.02.04.gif

react-cropper-pro 使用介绍

react-cropper-pro是一款简单轻量的图片上传 + 裁切 + 压缩 组件, 不依赖antd / element等第三方UI, 快速实现图片处理相关操作, 底层依赖react-cropper.

安装

yarn add react-cropper-pro

使用

import CropperPro from 'react-cropper-pro';export default () => <CropperPro defaultImg="" onChange={(file) => console.log(file)} onDel={(image) => console.log('remove', image)} />;

image.png

API介绍

image.png

技术实现

技术上主要有以下几个核心点:

  1. 实现文件上传组件样式(主要是覆盖原生input[file]的“纯洁UI”)

  2. 实现突图片裁切

  3. 实现图片压缩

  4. 包装成react组件并发布到npm

接下来和大家简单介绍一下实现细节.

1. 实现文件上传组件样式

image.png

我们都知道元素的input文件上传组件采用的默认样式非常简陋, 所以我们需要通过某种方式替换原生样式, 这里和大家分享一下我实现的方式.

image.png

其实很简单, 就是用定位的方式将一个同样大小的div覆盖在input上面, 然后把让div事件穿透, 能响应input的事件即可. 核心代码如下:

<div className="xi-cropper-upload"><input type="file" onChange={handleChange} accept="image/gif,image/jpeg,image/jpg,image/png" /><div className="xi-cropper-file"></div>
</div>

其次就是需要用户在上传完图片之后, 图片能展示在上传区域, 如下:

image.png

这块的完整代码如下:

<div className="xi-cropper-upload"><input type="file" onChange={handleChange} accept="image/gif,image/jpeg,image/jpg,image/png" /><div className="xi-cropper-file">{cropData ? <img src={cropData} /> : '+'}{!!cropData && <span className="xi-cropper-del" onClick={handleDel}>✕</span> }</div></div>

2. 实现突图片裁切

图片裁切这里我采用了 react-cropper 这个库, 虽然不能直接实现图片上传, 但是它的图片裁切能力还是很强大的. 我们需要实现的效果是图片上传后会出现上传弹窗, 显示裁切区域, 如下:

2022-07-16 16.02.04.gif

这里弹窗的实现我采用了React-Dom的createPortal API, 它可以实现弹窗dom挂载在指定的容器上, 很多组件库的组件比如抽屉, Modal, DropDown都采用了类似的实现原理, 我之前也写了一篇文章来介绍如何使用 createPortal 的, 感兴趣的朋友可以学习参考一下:

《精通react/vue组件设计》之配合React Portals实现一个功能强大的抽屉(Drawer)组件

这块的核心源码可以参考github仓库对应的第134行.

文件路径如下: https://github.com/MrXujiang/react-cropper-pro/tree/main/src/crop

3. 实现图片压缩

图片压缩这块主要是基于产品业务场景来设计, 这里我分了4个档:

  • 不压缩

如下:

image.png

这一块主要是利用了canvascropper 的能力, 我们通过控制canvas对象的宽高比例, 和canvas提供的toBlob 来实现图片的压缩, 核心代码如下:

if (typeof cropper !== "undefined") {setCropData(cropper.getCroppedCanvas().toDataURL());const rate = 1 / (4 - imgLevel);const { width, height } = cropper.getCropBoxData();cropper.getCroppedCanvas({width: width * rate,height: height * rate,imageSmoothingQuality: imgLevelValueMap[imgLevel],fillColor: 'transparent',}).toBlob((blob: Blob) => {if(blob) {const time = Date.now();let croppedFile:any = new File([blob], fileRef.current.name, {type: fileRef.current.type,lastModified: Date.now(),});croppedFile.uid = time;onChange && onChange(croppedFile)}else {new Error('图片裁切失败');}}, fileRef.current.type, rate)}

当然有关 canvastoBlob API不熟悉的朋友可以移步MDN:

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob

4. 包装成react组件并发布到npm

有关如何实现组件库以及如何优雅发布到NPM公仓的技术我之前在《趣谈前端》 也分享过, 感兴趣的朋友可以参考一下:

从0到1教你搭建前端团队的组件系统(高级进阶必备)

应用场景

最后再来看看应用场景, 目前 react-cropper-pro 已经应用于H5-Dooring 可视化搭建平台中, 来实现图片更精准的控制:

image.png

感兴趣的朋友可以体验一下, 当然还有很多内容平台, 因为有富文本或者md等编辑器的写作能力, 所以也会涉及到对图片的控制, 所以这些都是 react-cropper-pro 的应用领域.

最后

开源不易, 欢迎搭建一起共建, 点个 star, 让生活更美好.

以上便是本次分享的全部内容,希望对你有所帮助^_^

喜欢的话别忘了 分享、点赞、收藏 三连哦~。

欢迎关注公众号 趣谈前端 收货大厂一手好文章~

从零搭建全栈可视化大屏制作平台V6.Dooring

从零设计可视化大屏搭建引擎

Dooring可视化搭建平台数据源设计剖析

可视化搭建的一些思考和实践

基于Koa + React + TS从零开发全栈文档编辑器(进阶实战

点个在看你最好看

推荐! 使用react-cropper-pro实现图片裁切压缩上传相关推荐

  1. 图片裁切,上传,自动匹配颜色。

    图片裁切,上传,自动匹配颜色. photoclip插件学习. https://github.com/baijunjie/PhotoClip.js是官方文档. 使用方法很简单.不过我在使用的过程中遇到几 ...

  2. ie js html 压缩,H5图片裁剪-压缩-上传-神奇的Croppie.js

    Croppie.js之图片裁剪压缩上传 h5图片裁剪, 压缩, 上传, 预览是常见功能, 幸运的是我们有cropp.js这款利器. 1. style .actions button, .actions ...

  3. CANVAS运用-对图片的压缩上传(仅针对移动浏览器)

    最近在移动端设计头像上传功能时,原本是以<input type="file">直接通过formData上传,然而实际使用情况是:对于过大的图片(高像素手机所拍摄的照片等 ...

  4. uniapp小程序图片前端压缩上传

    目录 1,前言 2,实现代码 1,前言 这次项目中做了一个图片上传,要求是大于2MB的就压缩成2MB一下的再上传,我这边利用了uniapp的文件接口,使用canvas做了一个压缩上传的功能,目前已上线 ...

  5. 前台图片Canvas压缩上传小结

    需求来源:之前有个提交审核表单的业务,表单中含有大量附件图片,大约有20多张吧,为了省事,采用的同步上传,一次需要上传很多照片,本来单张图片限制为200KB,这样子总图片大小约为5MB左右,想想也可以 ...

  6. jquery获取图片并压缩上传

    话不多说,直接上代码: <input id="input-file" type="file" multiple="multiple" ...

  7. 前端实现图片压缩上传功能

    以移动端为例,在H5上传图片时,由于机型 / 网速 / 流量等限制,在低版本机型上经常会出现上传的图片太大导致上传很慢甚至崩溃的情况,所以需要对在某些情况下需要对上传的图片进行压缩上传. 以下以移动端 ...

  8. 基于cropper和sweetalert的简单图片/头像裁剪上传

    基本功能 前端基本样式: 进行图片裁剪及上传: 点击上传后,js会将截取到的数据转为图片数据利用ajax发送给后台进行存储.存储成功后,刷新前端页面,头像改变. 上传成功后:自动刷新网页,更改头像 基 ...

  9. layui实现文件压缩上传_基于SSM框架、Layui的多文件上传、包括图片,压缩包,音频等文件(与数据库挂钩) - 爱秧博客...

    写在前面:当初为了实现一个多文件上传可是费了一番功夫,经过我日日夜夜的百度咨询,写了好几种方法,最终还是没能解决问题.我可以很负责任的告诉你,你去百度上不管你形容有多好,只要是涉及多文件,就会查到Mu ...

  10. React native 照片压缩上传

    在用React native做项目的时候,遇到了照片的压缩上传问题.在很多RN技术交流群中,询问到的结果也是让用原生.但这里就遇到了RN和原生之间的兼容问题. 在不懈努力之下,终于找到了一个Image ...

最新文章

  1. ImportError: cannot import name ‘image‘ from ‘PIL‘ (C:\ProgramData\Anaconda3\lib\site-packages\PIL\_
  2. Interface classes
  3. java20 创建服务器:ServerSocket
  4. test title
  5. Audacity Mac版(音频录制编辑合成工具)中文版
  6. STC学习:看谁手速快
  7. 使用idea导入远程git版本库项目
  8. Linux 安装 RMVB,rm,ape文件 解码器
  9. ubuntu kernel panic查看源文件
  10. GoJS学习-节点渐变背景色
  11. 美国国家安全局发布零信任安全模型指南
  12. android 4.4 录屏方法,android 4.4 录屏方法
  13. python实现数字规律_从学习python总结语言规律
  14. 鞋长度和欧美的标准宽度换算表
  15. ”好奇号“一切准备就绪即将开始探测火星之旅
  16. 如何用cmd命令进入mysql
  17. Apollo学习(一)Apollo初学入门
  18. 什么样的企业/单位需要圣天诺LDK?
  19. Samsung手机常用工程命令
  20. ZCMU 1600: 卡斯丁狗要吃糖葫芦

热门文章

  1. python爬取二手房信息,基于python爬取链家二手房信息代码示例
  2. python 身份证实名认证
  3. 转专业申请麦吉尔大学计算机,加拿大大学转专业申请秘籍
  4. Google引擎搜索技巧
  5. HTML技巧篇——禁止网页元素被右击、拖动、选中、复制
  6. windows10去桌面图标小箭头和恢复小箭头
  7. 爬取链家任意城市租房数据(北京朝阳)
  8. 数字化转型之道:谈谈企业如何落地数据治理
  9. WEB 安全之 SQL注入 二 暴库
  10. springboot打包-依赖包到单独文件夹并微缩原有jar包体积