cropBox.jsx 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. import React, {
  2. Component
  3. } from 'react';
  4. import $ from 'jquery';
  5. import Cropper from 'react-cropper';
  6. import 'cropperjs/dist/cropper.css';
  7. class CropBox extends Component {
  8. constructor(props) {
  9. super(props);
  10. this.state = {
  11. src: '',
  12. close: this.props.close ? this.props.close : true,
  13. url: this.props.url ? this.props.url : '',
  14. uploadData: this.props.uploadData ? this.props.uploadData : {},
  15. aspectRatio: this.props.aspectRatio ? this.props.aspectRatio : ''
  16. }
  17. this.onChange = this.onChange.bind(this);
  18. this.cropImage = this.cropImage.bind(this);
  19. this.convertBase64UrlToBlob = this.convertBase64UrlToBlob.bind(this);
  20. this.submitUpload = this.submitUpload.bind(this);
  21. this.closeBox = this.closeBox.bind(this);
  22. }
  23. componentWillReceiveProps(nextProps) {
  24. this.setState({
  25. close: nextProps.close
  26. })
  27. }
  28. onChange(e) {
  29. e.preventDefault();
  30. let files;
  31. if (e.dataTransfer) {
  32. files = e.dataTransfer.files;
  33. } else if (e.target) {
  34. files = e.target.files;
  35. }
  36. let reader = new FileReader();
  37. reader.onload = () => {
  38. this.setState({
  39. src: reader.result
  40. });
  41. };
  42. reader.readAsDataURL(files[0]);
  43. }
  44. cropImage() {
  45. if (typeof this.cropper.getCroppedCanvas() === 'undefined') {
  46. return;
  47. }
  48. let img64Data = this.cropper.getCroppedCanvas().toDataURL();
  49. console.log(img64Data)
  50. //let imgblobDate = this.convertBase64UrlToBlob(img64Data);
  51. let imgblobDate = this.dataURLtoFile(img64Data,'nihao');
  52. this.submitUpload(imgblobDate);
  53. }
  54. submitUpload(imgBlob) {
  55. console.log(imgBlob)
  56. let _this = this;
  57. let fd = new FormData();
  58. fd.append('file', imgBlob);
  59. for(let key in this.state.uploadData) {
  60. fd.append(key, this.state.uploadData[key]);
  61. }
  62. $.ajax({
  63. url: this.state.url,
  64. type: 'POST',
  65. data: fd,
  66. contentType: false,
  67. processData: false,
  68. dataType: 'json',
  69. success: function (data) {
  70. console.log(data.result);
  71. if(_this.props.getUrl) {
  72. _this.props.getUrl(data.result);
  73. }
  74. _this.setState({
  75. close: true,
  76. src: ''
  77. })
  78. },
  79. error: function(err) {
  80. console.log(err);
  81. }
  82. });
  83. }
  84. //将base64转换为文件
  85. dataURLtoFile(dataurl, filename) {
  86. var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
  87. bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
  88. while(n--){
  89. u8arr[n] = bstr.charCodeAt(n);
  90. }
  91. return new File([u8arr], filename, {type:mime});
  92. }
  93. //base64转二进制文件格式
  94. convertBase64UrlToBlob(urlData) {
  95. var bytes=window.atob(urlData.split(',')[1]); //去掉url的头,并转换为byte
  96. //处理异常,将ascii码小于0的转换为大于0
  97. var ab = new ArrayBuffer(bytes.length);
  98. var ia = new Uint8Array(ab);
  99. for (var i = 0; i < bytes.length; i++) {
  100. ia[i] = bytes.charCodeAt(i);
  101. }
  102. return new Blob( [ab] , {type : 'image/png'});
  103. }
  104. closeBox() {
  105. this.setState({
  106. close: true
  107. })
  108. }
  109. render() {
  110. return (
  111. <div className = "crop-box" style = {this.state.close ? {"display": "none"} : {"display": "block"}}>
  112. <div className="crop-box-bg"></div>
  113. <div className="crop-box-content">
  114. <div className="crop-input">
  115. <input type="file" onChange={this.onChange} key = {this.state.src}/>
  116. <div className="crop-close" onClick = {this.closeBox}>关闭</div>
  117. </div>
  118. <div className="crop-area">
  119. <Cropper key = {this.state.src}
  120. style={{ height: 400, width: 400 }}
  121. aspectRatio = {this.state.aspectRatio}
  122. preview = ".img-preview"
  123. guides={true}
  124. src={this.state.src}
  125. ref={cropper => { this.cropper = cropper; }}
  126. />
  127. </div>
  128. <button className = "crop-sure-btn" onClick={this.cropImage}>确认裁剪</button>
  129. </div>
  130. </div>
  131. );
  132. }
  133. }
  134. export default CropBox;