react+antd+react-cropper+lrz 实现图片剪裁后压缩上传

版权声明：原创不易，如需转载，请注明出处。有梦想地需要你的一个赞(顶)。 https://blog.csdn.net/genius_yym/article/details/82857907

react+antd+react-cropper+lrz 实现图片剪裁后压缩上传

需要安装的依赖

npm install react-cropper 图片裁剪
npm install lrz 图片压缩

---

关于 react-cropper 图片裁剪器

可参考官方文档https://github.com/roadmanfong/react-cropper，另外本文也会对其一些常用的功能进行注释

---

关于 lrz 图片压缩

// 1. 基本使用方式
lrz(src, {options});

// 1.1 其中，src为图片的路径或者是`base64`值

// 1.2 options为配置项，可忽略不写. 一般需要考虑 `quality` 值, 即图片压缩质量，取值 `0-1`, 默认为`0.7`. 详细看后面例子好吧。

// 2. `lrz(src, {options}).then((result) => { console.log(result) })` 返回的参数

// 2.1 返回结果 result 是一个object类型的参数

// result.base64 图片压缩后的base64

// result.base64Len 图片压缩后的base64的大小

// 还有其他的参数可自行log出来see see.

---

效果预览

---

具体使用（1） 引入

实现思路：使用Upload上传图片后, 将图片转成base64赋值到cropper的src中，通过cropper剪裁完成后，再通过lrz压缩图片，再传值给后台

import { Upload, Modal, message  } from 'antd';

import Cropper from 'react-cropper';
import '../../../../node_modules/cropperjs/dist/cropper.css'; //需要找到相对的 node_modules 路径，必须引入该css文件！

import lrz from 'lrz'

---

具体使用（2） render结构

render() {
 // loopImg遍历回显的图片
 const loopImg = (data = []) => ((data==null || data=='' || data=='null' || data.length==0) ? null : data.map((item, index) => {
  return (
	<div className="clearfix" style={{display:'inline-block', position: 'relative',border:'1px solid #d9d9d9',padding:8,width:197,height:96,margin: '0 8px 8px 0'}}>
	  <img src={"data:image/*;base64,"+item.imgbase+""} alt="" style={{height: '100%', width:'100%'}} />
	</div>
  );
}));
  return (
    <div>
	  <Row>
		{/* antd上传组件 */}
		<Upload
		  accept: "image/*" //文件类型
		  beforeUpload={::this.beforeUpload} //阻止自动上传
		  showUploadList={false} //不以默认的列表显示
		>
		</Upload>
	 </Row>
	{
	  // this.props.getImgListResult.data为已经上传的图片数据
	  this.props.getImgListResult.data && this.props.getImgListResult.data.length>0 ?
	  <Row>
	    <Col span={24}>
			<FormItem label="已上传图片" labelCol={{ span: 3 }} wrapperCol={{ span: 19 }}>
			  {
				//回显已经上传过的图片
				loopImg(this.props.getImgListResult.data)
			  }
		    </FormItem>
		  </Col>
		</Row>
		: <Row></Row>
	}

	{/* 弹窗裁剪图片*/}
	<Modal
	  key="cropper_img_modal_key"
	  visible={this.state.editImageModalVisible}
	  loading={this.props.loading}
	  footer={[
		<Button type="primary" onClick={::this.saveImg} loading={this.props.loading}>保存</Button>,
		<Button onClick={::this.handleCancel} loading={this.props.loading}>取消</Button>
	  ]}
		{/* Cropper图片裁剪器 */}
		<Cropper
		  src={this.state.srcCropper} //图片路径，即是base64的值，在Upload上传的时候获取到的
		  ref="cropper"
		  style={{ height: 400 }}
		  preview='.cropper-preview'
		  className="company-logo-cropper"
		  viewMode={1} //定义cropper的视图模式
		  zoomable={false} //是否允许放大图像
		  aspectRatio={75/32} //image的纵横比
		  guides={true} //显示在裁剪框上方的虚线
		  background={false} //是否显示背景的马赛克
		  rotatable={false} //是否旋转
		/>
	</Modal>
</div>
)}

---

具体使用（3） 相关的JS函数

// Upload上传之前函数
beforeUpload(file) {
  const isLt10M = file.size / 1024 / 1024 < 10;
  if (!isLt10M) { //添加文件限制
	MsgBox.error({content: '文件大小不能超过10M'});
	return false;
  }
  var reader=new FileReader();
  reader.readAsDataURL(file); //开始读取文件
  // 因为读取文件需要时间,所以要在回调函数中使用读取的结果
  reader.onload = (e) => {
	this.setState({
	  srcCropper: e.target.result, //cropper的图片路径
	  selectImgName: file.name, //文件名称
	  selectImgSize: (file.size / 1024 / 1024), //文件大小
	  selectImgSuffix: file.type.split("/")[1], //文件类型
	  editImageModalVisible: true, //打开控制裁剪弹窗的变量，为true即弹窗
	})
   }
   return false;
}

//点击保存的函数，需要在这里进行压缩
saveImg() {
  const _this = this;

  // lrz压缩
  // this.refs.cropper.getCroppedCanvas().toDataURL() 为裁剪框的base64的值
  lrz(this.refs.cropper.getCroppedCanvas().toDataURL(), {quality: 0.6}).then((results)=> {
  // results为压缩后的结果
  _this.props.uploadImgByBase64({ //uploadImgByBase64为连接后台的接口
	imgbase: results.base64, //取base64的值传值
	imgsize: results.fileLen, //压缩后的图片大下
	suffix: _this.state.selectImgSuffix, //文件类型
	filename: _this.state.selectImgName, //文件名
  })
 })
}

---

最后

写得有点多，嗯，demo点这里吧。demo在二楼。

OK~~ 下班。