cropper

public/react/src/common/components/Cropper.js

@@ -7,6 +7,11 @@ let _url_origin = getUrl2()
 // let _url_origin = `http://47.96.87.25:48080`;
 
 if (!window.Cropper) {
+    $.ajaxSetup({
+        cache: true
+    });
+
+
     $('head').append($('<link rel="stylesheet" type="text/css" />')
         .attr('href', `${_url_origin}/react/public/js/cropper/cropper.min.css`));
 
@@ -61,7 +66,14 @@ function save_avatar(){
         // });       
     // }    
 }   
-
+/** 
+    props 说明：
+    imageId 源图片标签的id
+    previewId crop后预览dom的id
+    imageSrc 源图片src
+    width  数字格式
+    height 数字格式 
+*/ 
 class Cropper extends Component {
   state = {
   };
@@ -70,26 +82,31 @@ class Cropper extends Component {
   }
 
   componentDidMount() {
-      setTimeout(() => {
-        const image = document.getElementById('image');
-        const cropper = new window.Cropper(image, {
-            aspectRatio: 1,
-            crop(event) {
-                // console.log(event.detail.x);
-                // console.log(event.detail.y);
-                // console.log(event.detail.width);
-                // console.log(event.detail.height);
-                // console.log(event.detail.rotate);
-                // console.log(event.detail.scaleX);
-                // console.log(event.detail.scaleY);
-            },
+      this.options = {
+        aspectRatio: 1,
+        crop(event) {
+            // console.log(event.detail.x);
+            // console.log(event.detail.y);
+            // console.log(event.detail.width);
+            // console.log(event.detail.height);
+            // console.log(event.detail.rotate);
+            // console.log(event.detail.scaleX);
+            // console.log(event.detail.scaleY);
+        },
 
-            preview: '.img-preview',
-        });
-      }, 3000)
+        preview: this.props.previewId ? `#${this.props.previewId}` : '.img-preview',
+      }
+      setTimeout(() => {
+        const image = document.getElementById(this.props.imageId || '__image');
+        this.cropper = new window.Cropper(image, this.options);
+      }, 1000)
   }
   
+  renew = (image) => {
+    this.cropper && this.cropper.destroy();
+    this.cropper = new window.Cropper(image, this.options);
 
+  }
   render() {
     
     const { width, height, previewId, imageSrc } = this.props;
@@ -98,8 +115,8 @@ class Cropper extends Component {
         {/* This rule is very important, please do not ignore this! */}
         <style>{`
             .wrapper {
-                width: ${ width || '500px'};
-                height: ${ height || '500px'};
+                width: ${ (width+'px') || '500px'};
+                height: ${ (height+'px') || '500px'};
             }
             img {
                 max-width: 100%; 
@@ -113,7 +130,7 @@ class Cropper extends Component {
         `}</style>
         <div className="wrapper">
             {/* http://localhost:3007/images/footNavLogo.png  图片转了后不对 */}
-            <img id="image" src={`${imageSrc || "/images/testPicture.jpg"}`}></img>
+            <img id={this.props.imageId || "__image"} src={`${imageSrc || "/images/testPicture.jpg"}`}></img>
         </div>
         {/* background: 'aquamarine', 
             'border-radius': '128px'
@@ -124,7 +141,7 @@ class Cropper extends Component {
         {/* <img id="showImg" src="http://localhost:3007/images/testPicture.jpg"></img> */}
 
         {/* <div id="canvasWrap"></div> */}
-        <button onClick={save_avatar.bind(this)}>save </button>
+        {/* <button onClick={save_avatar.bind(this)}>save </button> */}
       </div>
     );
   }

public/react/src/common/course/ActionBtn.js

@@ -1,7 +1,9 @@
 import React, { Component } from 'react';
 import {Link} from 'react-router-dom'
 
-const map={"blue":"blueFull","greyBack":"greyBack","grey":"greyWidthFixed","green":"greenBack"}
+const map={"blue":"blueFull","greyBack":"greyBack","grey":"greyWidthFixed","green":"greenBack",
+  'colorBlue': 'colorBlue',   // 蓝字白底
+}
 class ActionBtn extends Component {
   constructor(props) {
     super(props);

public/react/src/common/educoder.js

@@ -28,6 +28,7 @@ export { EDU_ADMIN, EDU_BUSINESS, EDU_SHIXUN_MANAGER, EDU_SHIXUN_MEMBER, EDU_CER
     , EDU_GAME_MANAGER, EDU_TEACHER, EDU_NORMAL} from 	'./Const'
 
 export { ModalHOC } from 	'./components/ModalHOC'
+export { default as Cropper } from 	'./components/Cropper'
 export { default as ConditionToolTip } from 	'./components/ConditionToolTip'
 export { default as DragValidator } from 	'./components/DragValidator'
 

public/react/src/modules/courses/css/Courses.css

@@ -677,6 +677,11 @@ a.white-btn.use_scope-btn:hover{
     color: #fff!important;
 }
 
+.colorBlue {
+    background-color: #fff;
+    color: #4CACFF;
+    border: 1px solid #4CACFF;
+}   
 .greyBack{
     /* 不要固定宽度 */
     /* width: 64px; */

public/react/src/modules/test/TestCrop.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 
 import Cropper from '../../common/components/Cropper'
-
+import ChangeHeaderPicModal from '../user/account/ChangeHeaderPicModal'
 class TestCrop extends Component {
   state = {
   };
@@ -14,6 +14,8 @@ class TestCrop extends Component {
     const props = this.props;
     return (
       <div>
+        <button onClick={() => { this.refs['changeHeaderPicModal'].setVisible(true)}}>open</button>
+        <ChangeHeaderPicModal ref="changeHeaderPicModal"></ChangeHeaderPicModal>
         <Cropper></Cropper>
       </div>
     );

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

@@ -0,0 +1,163 @@
+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 {
+          // TODO noti
+          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) {
+          // TODO noti
+        }
+      })
+      .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;
+
+