使用react-copper对图片进行裁剪上传

吐槽君 分类:javascript

最近开发轮播图管理功能,为了使上传的图片符合轮播图的尺寸,在上传时需要将图片裁剪成一定的比例后才能上传。这里记录一下使用 antd 的 Upload 上传组件和 react-copper 实现图片裁剪上传功能。

1. 安装 react-copper 插件

yarn add react-copper
// or   npm install react-copper --save
 

2. 实现思路

  • 在使用 antd 的 Upload 组件上传时,需要在上传之前,用FileReader读取图片,存下data: URL格式的Base64字符串以表示所读取文件的内容, 并在 beforeUpload 函数中返回 false, 阻止图片上传。

  • Copper 组件接受裁剪框的 长/宽、裁剪区域大小 等参数。

  • 用 Coppper 进行截图后,点击确定,使用 Cropper 的 getCroppedCanvas方法可以将裁剪区域的数据转换成canvas数据, 然后调用浏览器原生的toBlob方法将canvas数据转换成blob数据。最后将blob数据发给后端。

3. 具体代码实现


import React, { PureComponent } from 'react';
import { Button, Form, Row, Col, Drawer, Upload, Icon, Modal, notification } from 'antd';
import 'cropperjs/dist/cropper.css';
import Cropper from 'react-cropper';
export default class RenderDrawer extends PureComponent {
super(props);
this.state = {
previewVisible: false, // 预览模态框
previewImage: '', // 预览图片地址
srcCropper: '', // 当前图片路径
selectImgName: '', // 当前文件名称
editImageModalVisible: false, // 裁剪模态框
saveImgLoading: false, // 保存裁剪后的图片loading
};
// Upload 组件图片上传前调用的函数
uploadBefore = file => {
// 1. 校验文件大小
const fileSize = maxFileSize * 1024 * 1024;
if (file.size > fileSize) {
file.status = 'error'; // eslint-disable-line
file.response = `上传文件大小不能超过: ${fileSize / (1024 * 1024)}MB`; // eslint-disable-line
return false;
}
// 1. FileReader
// - FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。
// - 事件 FileReader.onload,在读取操作完成时触发
// - 方法 
const reader = new FileReader();
// Image()函数将会创建一个新的HTMLImageElement实例, Image(width, height)
// 它的功能等价于 document.createElement('img')
const image = new Image(); 
reader.readAsDataURL(file); //开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。
// 1. img.onload
// - img.onload 是回调函数,当img载入完成,就执行这个函数
// - 当image的src发生改变,浏览器就会跑去加载这个src里的资源。这个操作是异步的,就是说,js不会傻傻地在原地等待图片的加载,而是继续读代码,直到图片加载完成,触发onload事件,js才会回来执行onload里面的内容。
// 2. reader.onload
// - 当 FileReader 读取文件的方式为  readAsArrayBuffer, readAsBinaryString, readAsDataURL 或者 readAsText 的时候,会触发一个 load 事件。从而可以使用  FileReader.onload 属性对该事件进行处理。
reader.onload = e => { // onload 事件在图片加载完成后立即执行。
image.src = reader.result;
image.onload = () => {
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; // 返回false,阻止文件上传
};
}
// 保存裁剪后的图片
handleSaveImg = () => {
const { dispatch } = this.props;
const { selectImgName } = this.state;
if (this.state.srcCropper) {
this.setState({ saveImgLoading: true });
// getCroppedCanvas方法可以将裁剪区域的数据转换成canvas数据
// 然后调用浏览器原生的toBlob方法将canvas数据转换成blob数据
this.cropper.getCroppedCanvas().toBlob(blob => {
const formData = new FormData();
// 第三个参数为文件名,可选填. formData.append(name, value, filename);vlaue只支持blob string File
formData.append('file', blob, selectImgName);
// 之后将blob数据发送至后端
dispatch({
type: 'manageMarquee/uploadImage',
payload: formData,
}).then(res => {
if (res && !res.failed) {
this.setState({
saveImgLoading: false,
editImageModalVisible: false,
fileList: [
{
uid: -1,
name: res.fileName,
status: 'done',
url: res.fileUrl,
},
],
});
notification.success({
message: 上传成功!
});
}
});
});
}
};
render() {
const { srcCropper = '', saveImgLoading = false, fileList = [] } = this.state;
const fileProps = {
showDownloadIcon: true,
showPreviewIcon,
fileListMaxLength: 1,
fileList,
action:  'plugin/address',
accept: ['image/jpeg', 'image/jpg', 'image/png'],
headers: {
Authorization: `Bearer ${cookieToken}`,
},
beforeUpload: this.uploadBefore,
onPreview: this.setState({previewVisible: true});
onRemove: () => {
this.setState({
fileList: [],
});
},
};
return (
<>
// antd 的上传组件
<Upload
listType="picture-card"
// onPreview={this.handlePreview}
{...fileProps}
>
{fileList.length >= 1 ? null : (
<div>
<Icon type="plus" />
<div className="ant-upload-text">Upload</div>
</div>
)}
</Upload>
// 裁剪模态框
<Modal
className="upload_copper_modal"
visible={this.state.editImageModalVisible}
width={820}
onCancel={() => this.setState({ editImageModalVisible: false })}
title='请选择剪裁区域'
footer={[
<Button type="primary" loading={saveImgLoading} onClick={this.handleSaveImg}>
确定
</Button>,
<Button onClick={() => this.setState({ editImageModalVisible: false })}>
取消
</Button>,
]}
>
<Cropper
src={this.state.srcCropper || ''} // 图片路径,即是base64的值,在Upload上传的时候获取到的
ref={cropper => {
this.cropper = cropper;
}}
preview=".uploadCrop"
viewMode={1} // 定义cropper的视图模式
zoomable={false} // 是否允许放大图像
// movable
guides={false} // 显示在裁剪框上方的虚线
background={false} // 是否显示背景的马赛克
rotatable={false} // 是否旋转
autoCropArea={1} // 默认值0.8(图片的80%)。--0-1之间的数值,定义自动剪裁区域的大小
style={{ width: '100%', height: '400px' }}
aspectRatio={1152 / 382} // 固定为1:1  可以自己设置比例, 默认情况为自由比例
// cropBoxResizable={false} // 默认true ,是否允许拖动 改变裁剪框大小
// cropBoxMovable  // 是否可以拖拽裁剪框 默认true
dragMode="move" // 拖动模式, 默认crop当鼠标 点击一处时根据这个点重新生成一个 裁剪框,move可以拖动图片,none:图片不能拖动
center
/>
</Modal>
// 预览模态框
<Modal visible={previewVisible} footer={null} onCancel={() => {this.setState({previewVisible: false})}}>
<img alt="" style={{ width: '100%' }} src={previewImage} />
</Modal>
</>
)
}
}
 

4. 实现效果

裁剪框效果图
整体效果

5. 补充

1. FileReader 方法

参考文章 www.cnblogs.com/dongxixi/p/…

  • readAsText 读取文件的单位是字符,故对于文本文件,只要按规定的编码方式读取即可; 而对于媒体文件(图片、音频、视频),其内部组成并不是按字符排列,故采用readAsText读取,会产生乱码,同时也不是最理想的读取文件的方式

    image.png

  • readAsDataURL会将文件内容进行base64编码后输出

    image.png

  • readAsBinaryString
    与readAsText不同的是,readAsBinaryString函数会按字节读取文件内容。 然而诸如0101的二进制数据只能被机器识别,若想对外可见,还是需要进行一次编码,而readAsBinaryString的结果就是读取二进制并编码后的内容。 尽管readAsBinaryString方法可以按字节读取文件,但由于读取后的内容被编码为字符,大小会受到影响,故不适合直接传输,也不推荐使用。 如:测试的图片文件原大小为6764 字节,而通过readAsBinaryString读取后,内容被扩充到10092个字节

    image.png

2. FileReader 应用

我们知道,img的src属性或background的url属性,可以通过被赋值为图片网络地址或base64的方式显示图片。 在文件上传中,我们一般会先将本地文件上传到服务器,上传成功后,由后台返回图片的网络地址再在前端显示。 通过FileReader的readAsDataURL方法,我们可以不经过后台,直接将本地图片显示在页面上。这样做可以减少前后端频繁的交互过程,减少服务器端无用的图片资源

对于图片上传,我们也可以先将图片转换为base64进行传输,此时由于传输的图片内容就是一段字符串,故上传接口可以当做普通post接口处理,当图片传输到后台后,可以在转换为文件实体存储。 当然,考虑到base64转换效率及其本身的大小,本方法还是适合于上传内容简单或所占内存较小的文件。

3. 使用FormData对象上传文件

FormData 接口提供了一种表示表单数据的键值对的构造方式,使用append()方法时,可以通过第三个可选参数设置发送请求的头 Content-Disposition指定文件名。如果不指定文件名(或者不支持该参数时),将使用名字“blob”

4. toDataURL 与 toBlob

toBlob()和toDataURL()方法都是可以的,但个人推荐使用toBlob()方法

一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

回复

我来回复
  • 暂无回复内容