Попытка загрузить обрезанное изображение с помощью https://www.npmjs.com/package/react-image-crop.
и подписка https://codesandbox.io/s/72py4jlll6.
Я могу загрузить базовый файл из src, но обратите внимание, что обрезанное изображение src.Может кто-нибудь сказать мне, как получить обрезанное изображение и сделать файл и загрузить.
Это мой компонент ProfilePic сейчас -
import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import ReactCrop from "react-image-crop";
import "react-image-crop/dist/ReactCrop.css";
import { setProfilePic } from "../../actions/authAction";
// https://codesandbox.io/s/72py4jlll6
class ProfilePic extends Component {
constructor(props) {
super(props);
this.state = {
src: null,
crop: { x: 10, y: 10, aspect: 1, width: 50 },
selectedFile: null,
croppedImageUrl: null
};
this.onProfileImageSubmit = this.onProfileImageSubmit.bind(this);
}
b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || "";
sliceSize = sliceSize || 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, { type: contentType });
return blob;
}
onProfileImageSubmit(e) {
e.preventDefault();
var ImageURL = this.state.src;
var block = ImageURL.split(";");
var contentType = block[0].split(":")[1];
var realData = block[1].split(",")[1];
var blob = this.b64toBlob(realData, contentType);
console.log(blob);
const data = new FormData();
data.append("profilePic", blob);
this.props.setProfilePic(data);
}
onSelectFile = e => {
this.setState({ selectedFile: e.target.files });
if (e.target.files && e.target.files.length > 0) {
const reader = new FileReader();
reader.addEventListener("load", () =>
this.setState({ src: reader.result })
);
reader.readAsDataURL(e.target.files[0]);
}
};
onImageLoaded = (image, pixelCrop) => {
this.imageRef = image;
// Make the library regenerate aspect crops if loading new images.
const { crop } = this.state;
if (crop.aspect && crop.height && crop.width) {
this.setState({
crop: { ...crop, height: null }
});
} else {
this.makeClientCrop(crop, pixelCrop);
}
};
onCropComplete = (crop, pixelCrop) => {
this.makeClientCrop(crop, pixelCrop);
};
onCropChange = crop => {
this.setState({ crop });
};
async makeClientCrop(crop, pixelCrop) {
if (this.imageRef && crop.width && crop.height) {
const croppedImageUrl = await this.getCroppedImg(
this.imageRef,
pixelCrop,
"newFile.jpeg"
);
this.setState({ croppedImageUrl });
}
}
getCroppedImg(image, pixelCrop, fileName) {
const canvas = document.createElement("canvas");
canvas.width = pixelCrop.width;
canvas.height = pixelCrop.height;
const ctx = canvas.getContext("2d");
ctx.drawImage(
image,
pixelCrop.x,
pixelCrop.y,
pixelCrop.width,
pixelCrop.height,
0,
0,
pixelCrop.width,
pixelCrop.height
);
return new Promise((resolve, reject) => {
canvas.toBlob(blob => {
blob.name = fileName;
window.URL.revokeObjectURL(this.fileUrl);
this.fileUrl = window.URL.createObjectURL(blob);
resolve(this.fileUrl);
}, "image/jpeg");
});
}
render() {
const { croppedImageUrl } = this.state;
return (
<div>
<div
className="modal fade"
id="update-header-photo"
tabindex="-1"
role="dialog"
aria-labelledby="update-header-photo"
aria-hidden="false"
>
<div
className="modal-dialog window-popup update-header-photo"
role="document"
>
<div className="modal-content">
<a
href="#"
className="close icon-close"
data-dismiss="modal"
aria-label="Close"
>
<i class="fa fa-user mr-3" aria-hidden="true" />
</a>
<div className="modal-header">
<h6 className="title">Update Header Photo</h6>
</div>
<div className="modal-body">
<a
href="#"
className="upload-photo-item"
style={{ width: "100%" }}
>
<form onSubmit={this.onProfileImageSubmit}>
<div>
<input
type="file"
onChange={this.onSelectFile}
name="profilePic"
/>
</div>
{this.state.src && (
<ReactCrop
src={this.state.src}
crop={this.state.crop}
onImageLoaded={this.onImageLoaded}
onComplete={this.onCropComplete}
onChange={this.onCropChange}
/>
)}
{croppedImageUrl && (
<img alt="Crop" src={croppedImageUrl} />
)}
<h6>Upload Photo</h6>
<span>Browse your computer.</span>
<input
className="btn btn-primary btn-lg full-width"
type="submit"
value="save"
/>
</form>
</a>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default connect(
null,
{ setProfilePic }
)(ProfilePic);