React上传头像并且裁剪

React React上传头像并且裁剪

使用一个插件 react-avatar-editor
文档地址： https://www.npmjs.com/package/react-avatar-editor
npm 下载 npm i react-avatar-editor -S

版本最好是10.0.7，新版可能会报错
文件不能使用http图片，否则canvas导出会报错跨域，只能从本地上传图片然后转换成base64传给裁剪组件

代码和效果（使用antd - ui）

import AvatarEditor from 'react-avatar-editor'

const getBase64 = (img, callback) => {
     
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}

state = {
     
	// 编辑头像
	editImg: false,
	scale: 1,
	rotate: 0,
	headPhoto: ''
}

// 上传组件upload上传前获取文件
handleChange = (file) => {
     
	getBase64(file, (url) => {
     
		this.setState({
     
			headPhoto: url,
			scale: 1,
			rotate: 0,
			editImg: true
		})
	})
	return false
}

// 确定调整完的头像
subImg = () => {
     
	this.setState({
     
		editImg: false,
		headPhoto: this.editor.getImage().toDataURL() // 编辑完成后的图片base64
	})
}

// 编辑弹窗
<Modal
	visible={
     this.state.editImg}
	onOk={
     this.subImg}
	onCancel={
     () => {
      this.setState({
      editImg: false }) }}
	width="400px"
>
	<AvatarEditor
		ref={
     (editor) => {
      this.editor = editor }}
		image={
     this.state.headPhoto}
		width={
     250}
		height={
     250}
		border={
     50}
		color={
     [0, 0, 0, 0.3]} // RGBA
		scale={
     this.state.scale}
		rotate={
     this.state.rotate}
	/>
	<Divider orientation="left">缩放</Divider>
	<Slider onChange={
     (val) => {
      this.setState({
      scale: val }) }} step={
     0.05} min={
     1} max={
     2} />
	<Divider orientation="left">旋转</Divider>
	<Slider onChange={
     (val) => {
      this.setState({
      rotate: val }) }} step={
     90} min={
     0} max={
     270} />
</Modal>