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

在前端开发的过程中, 我们经常遇到文件上传或者图片上传的需求, 有些场景中可能还会要求上传图片后对图片进行裁切, 压缩. 对于不想加班的程序员来说, 第一要义就是使用斯第三方库. 虽然像我们熟悉的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. 一文轻松了解Graph Neural Networks
  2. 业务智能 ETL 设计实施策略(转载)
  3. ARM嵌入式编程之STM32的命名方法 STM32F103VET6命名解释
  4. PyCharm出现module ‘matplotlib’ has no attribute ‘verbose问题
  5. [Python人工智能] 二十四.易学智能GPU搭建Keras环境实现LSTM恶意URL请求分类
  6. 多窗口管理器Tmux - 从入门到精通
  7. 接口报Provisional headers are shown原因和解决方法
  8. c iostream.源码_通达信指标公式源码精准买卖主图指标公式免费分享
  9. 通过Redis的Pub/Sub实现对服务器群的监控管理
  10. php+flash实现转盘抽奖(加源代码)
  11. Numpy——数组合并
  12. HW Eth-Trunk链路聚合
  13. 使用安卓的http进行数据的发送需要做的首先就是授权
  14. CSS 居中 可随着浏览器变大变小而居中
  15. MacOS:Shell工具-Royal TSX
  16. java ruby 比较_java和ruby的一些比较
  17. 魔兽地图编辑器--人物自定义语音的方法和进入游戏自定义语音不能播放的问题
  18. [技术随笔(一)] 文件分割的两种方法
  19. 计算机硬盘的报废处理,计算机硬盘和内存存储器的安全销毁与资源化处理
  20. 深度长文:AMD的崛起、衰落与复兴

热门文章

  1. 游戏建模:模型场景制作过程分享
  2. myexcel初步使用
  3. 时寒冰说经济大棋局我们怎么办_女王的棋局:艺术才华是闯天下的最佳武器
  4. 《GPU编程与CG语言之阳春白雪下里巴人》 读书笔记3 漫反射与Lambert光照模型
  5. JavaEE:Cookie和Session
  6. 海尔集团CEO张瑞敏演讲《人不成熟的几大特征》
  7. 第三方支付API支付宝支付申请流程 支付宝新老版本
  8. 计算机xp怎么做备份,xp系统如何备份系统呢,详细教您如何备份
  9. python的shape和reshape_一文浅显易懂:Python中shape()和reshape()的用法和区别
  10. mysql怎么初始化自增值_MySql中重新设置AUTO_INCREMENT自增值方法