Reactはアイコンをアップロードしてカットします

React Reactはアイコンをアップロードしてカットします
1つのプラグインreact-avatar-editorのドキュメントアドレスを使用します.https://www.npmjs.com/package/react-avatar-editornpmダウンロードnpm i react-avatar-editor -Sバージョンは10.0.7が望ましい.新版ではhttpピクチャを使用できないファイルがエラーされる可能性がある.そうしないとcanvasはドメイン間エラーを報告し、ローカルからピクチャをアップロードしてbase 64に変換してトリミングコンポーネントに渡すしかない.
コードと効果(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>