123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145 |
- import React, {
- Component
- } from 'react';
- import $ from 'jquery';
- import Cropper from 'react-cropper';
- import 'cropperjs/dist/cropper.css';
- class CropBox extends Component {
- constructor(props) {
- super(props);
- this.state = {
- src: '',
- close: this.props.close ? this.props.close : true,
- url: this.props.url ? this.props.url : '',
- uploadData: this.props.uploadData ? this.props.uploadData : {},
- aspectRatio: this.props.aspectRatio ? this.props.aspectRatio : ''
- }
- this.onChange = this.onChange.bind(this);
- this.cropImage = this.cropImage.bind(this);
- this.convertBase64UrlToBlob = this.convertBase64UrlToBlob.bind(this);
- this.submitUpload = this.submitUpload.bind(this);
- this.closeBox = this.closeBox.bind(this);
- }
- componentWillReceiveProps(nextProps) {
- this.setState({
- close: nextProps.close
- })
- }
- onChange(e) {
- e.preventDefault();
- let files;
- if (e.dataTransfer) {
- files = e.dataTransfer.files;
- } else if (e.target) {
- files = e.target.files;
- }
- let reader = new FileReader();
- reader.onload = () => {
- this.setState({
- src: reader.result
- });
- };
- reader.readAsDataURL(files[0]);
- }
- cropImage() {
- if (typeof this.cropper.getCroppedCanvas() === 'undefined') {
- return;
- }
- let img64Data = this.cropper.getCroppedCanvas().toDataURL();
- console.log(img64Data)
- //let imgblobDate = this.convertBase64UrlToBlob(img64Data);
- let imgblobDate = this.dataURLtoFile(img64Data,'nihao');
- this.submitUpload(imgblobDate);
- }
- submitUpload(imgBlob) {
- console.log(imgBlob)
- let _this = this;
- let fd = new FormData();
- fd.append('file', imgBlob);
- for(let key in this.state.uploadData) {
- fd.append(key, this.state.uploadData[key]);
- }
-
- $.ajax({
- url: this.state.url,
- type: 'POST',
- data: fd,
- contentType: false,
- processData: false,
- dataType: 'json',
- success: function (data) {
- console.log(data.result);
- if(_this.props.getUrl) {
- _this.props.getUrl(data.result);
- }
- _this.setState({
- close: true,
- src: ''
- })
- },
- error: function(err) {
- console.log(err);
- }
- });
- }
- //将base64转换为文件
- dataURLtoFile(dataurl, filename) {
- var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
- bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
- while(n--){
- u8arr[n] = bstr.charCodeAt(n);
- }
- return new File([u8arr], filename, {type:mime});
- }
- //base64转二进制文件格式
- convertBase64UrlToBlob(urlData) {
- var bytes=window.atob(urlData.split(',')[1]); //去掉url的头,并转换为byte
- //处理异常,将ascii码小于0的转换为大于0
- var ab = new ArrayBuffer(bytes.length);
- var ia = new Uint8Array(ab);
- for (var i = 0; i < bytes.length; i++) {
- ia[i] = bytes.charCodeAt(i);
- }
- return new Blob( [ab] , {type : 'image/png'});
- }
- closeBox() {
- this.setState({
- close: true
- })
- }
- render() {
- return (
- <div className = "crop-box" style = {this.state.close ? {"display": "none"} : {"display": "block"}}>
- <div className="crop-box-bg"></div>
- <div className="crop-box-content">
- <div className="crop-input">
- <input type="file" onChange={this.onChange} key = {this.state.src}/>
- <div className="crop-close" onClick = {this.closeBox}>关闭</div>
- </div>
- <div className="crop-area">
- <Cropper key = {this.state.src}
- style={{ height: 400, width: 400 }}
- aspectRatio = {this.state.aspectRatio}
- preview = ".img-preview"
- guides={true}
- src={this.state.src}
- ref={cropper => { this.cropper = cropper; }}
- />
- </div>
- <button className = "crop-sure-btn" onClick={this.cropImage}>确认裁剪</button>
-
- </div>
- </div>
- );
- }
- }
- export default CropBox;
|