educoder/public/react/src/modules/user/account/ChangeHeaderPicModal.js

import React, { Component } from "react";
import { Modal } from "antd";
import axios from 'axios'
import ModalWrapper from "../../courses/common/ModalWrapper"
import { Cropper } from 'educoder'

const imageId = 'changeHeaderPic'
const previewId = 'changeHeader_imagePreview'
let uploadedImageType;
let uploadedImageName;
let uploadedImageURL;
class ChangeHeaderPicModal extends Component{
  constructor(props){
    super(props);
    this.state={
      
    }
  }
  init = () => {
    var inputImage = document.getElementById('inputImage');
    const that = this;
    inputImage.onchange = function () {
      var files = this.files;
      var file;

      // cropper && 
      if (files && files.length) {
        file = files[0];

        if (/^image\/\w+/.test(file.type)) {
          uploadedImageType = file.type;
          uploadedImageName = file.name;

          if (uploadedImageURL) {
            URL.revokeObjectURL(uploadedImageURL);
          }
          const image = document.getElementById( imageId );
          image.src = uploadedImageURL = URL.createObjectURL(file);
          that.refs['cropper'].renew(image)
          // cropper.destroy();
          // cropper = new Cropper(image, options);
          inputImage.value = null;
        } else {
          
          this.props.showNotification && this.props.showNotification("请选择一个图片格式的文件")
          // window.alert('Please choose an image file.');
        }
      }
    };
  }
  componentDidMount() {
  }
  setVisible = (visible) => {

    this.refs['modalWrapper'].setVisible(visible)
    if (visible) {
      setTimeout(() => {
        this.init()
      }, 300)
    }
  }

  onSendOk = () => {
   

  }

  onOk = () => {
    var img_lg = document.getElementById(previewId);           
    // 截图小的显示框内的内容          
    window.html2canvas(img_lg).then((canvas) => {
      var dataUrl = canvas.toDataURL("image/jpeg");    
      console.log(dataUrl)   

      const url = `/users/accounts/${this.props.userLogin || 'kosasa'}/avatar.json`
      axios.put(url, { 
        image: dataUrl
      })
      .then((response) => {
        // {"status":0,"message":"success","avatar_url":"avatars/User/15739"}
        if (response.data.status == 0) {
          
          this.props.showNotification && this.props.showNotification("修改头像成功")
          this.setVisible(false)
        }
      })
      .catch(function (error) {
        console.log(error);
      });    
    });  
  }

  render(){
    const { course_lists } = this.state
    const { moduleName } = this.props
    return(
      <ModalWrapper
        ref="modalWrapper"
        title={`上传头像`}
        {...this.props }
        onOk={this.onOk}
        okText="保存"
        width={552}
        className="changeHeaderModal"
      >
        <style>{`
            #changeHeader_imagePreview {
                overflow: hidden;
                background-color: #fff;
                border-radius: 50%;
                text-align: center;
                width: 120px;
                height: 120px;
            }
            .previewWrap {
              flex-direction: column;
              justify-content: space-between;
              height: 320px;
              align-items: center;
              margin-left: 36px;
            }
            .changeHeaderModal .tip {
              color: #9B9B9B;
            }
            .previewWrap .tip {
              text-align: center;
              margin-top: 2px;
            }
            #uploadBtn {
              color: #4CACFF;
              border: 1px solid #4CACFF;
              padding: 2px 18px;
              cursor: pointer;
            }
        `}</style>
        <div className="df">
            <div>
              <Cropper
                  ref="cropper"
                  imageId={imageId}
                  previewId="changeHeader_imagePreview"
                  width={320} height={320}
              ></Cropper>
              <span className="tip">仅支持JPG、GIF、PNG，且文件小于2M</span>
            </div>
            <div
                className="df previewWrap" style ={{flexDirection: 'column'}}
            >   
                <div>
                  <div id="changeHeader_imagePreview"></div>
                  <div className="tip">头像预览</div>
                </div>
                <label id="uploadBtn" for="inputImage">
                  <input type="file" class="sr-only" id="inputImage" name="file" accept="image/*"></input>
                  重新上传
                </label>
            </div>
        </div>
      </ModalWrapper>
    )
  }
}

export default ChangeHeaderPicModal;