feat:处理图片裁剪

src/components/ImgClicpModal.jsx → src/components/ImgClipModal.jsx

@@ -2,25 +2,34 @@ import React from 'react';
 import { Modal, Button } from 'antd';
 import Cropper from 'react-cropper';
 import 'cropperjs/dist/cropper.css';
-
-class ImgCclipModal extends React.Component {
- 
+import './ImgClipModal.less';
+class ImgClipModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasImgReady: false, // 图片是否上传成功
+    }
+  }
   render() {
     const {
+      imgUrl,
       title = "设置图片",
-      visible,
-      onClose, 
-      reUpload,
       modalWidth=1080,
-      cutContentWidth,
-      cutContentHeight,
-      width = 550,
-      needReUpload = false,
+      visible,
+      clipContentWidth='500px',
+      clipContentHeight='430px',
+      aspectRatio=16/9,
+      cropBoxWidth=500,
+      cropBoxHeight=282,
+      previewBoxWidth='500px',
+      previewBoxHeight='282px',
     } = this.props;
+    const { hasImgReady,cropperInstace} = this.state;
     return (
         <Modal
-        title="设置图片"
-        width={1080}
+        className="img-clip-modal"
+        title={title}
+        width={modalWidth}
         visible={visible}
         maskClosable={false}
         closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
@@ -54,18 +63,18 @@ class ImgCclipModal extends React.Component {
         <div className="clip-box">
           <div
             style={{
-              width: "500px",
-              height: "430px",
+              width:clipContentWidth,
+              height:clipContentHeight,
               marginBottom: 0,
             }}
           >
            <Cropper
-              style={{ height: 400, width:'100%'}}
+              style={{ height:"100%'", width:'100%'}}
               className="cropper__box"
               zoomTo={2}
-              aspectRatio={16/9}
+              aspectRatio={aspectRatio}
               preview=".preview-url-box"
-              src='https://image.xiaomaiketang.com/xm/GEyiHbWB8W.png'
+              src={imgUrl}
               viewMode={1}
               guides={true}
               background={false}
@@ -82,10 +91,10 @@ class ImgCclipModal extends React.Component {
                 this.setState({
                   hasImgReady:true
                 })
-                this.state.cropperInstace.setCropBoxData({width:500,height:282})
-                const that = this;
+                cropperInstace.setCanvasData({width:'100%'});
+                cropperInstace.setCropBoxData({width:cropBoxWidth,height:cropBoxHeight})
                 document.querySelector('.cropper__box').addEventListener('dblclick', function (e) {
-                  that.state.cropperInstace.rotate(90)
+                  cropperInstace.rotate(90)
                 });
               }}
             />
@@ -93,7 +102,7 @@ class ImgCclipModal extends React.Component {
           <div id="clipBtn" style={{ display: "none" }} ref="hiddenBtn"></div>
           <div className="preview-img">
             <div className="title">效果预览</div>
-            <div id="preview-url-box" style={{width:'500px',height:'282px'}} className="preview-url-box">
+            <div id="preview-url-box" style={{width:previewBoxWidth,height:previewBoxHeight}} className="preview-url-box">
              
             </div>
             <div className="tip-box">
@@ -108,4 +117,4 @@ class ImgCclipModal extends React.Component {
   }
 }
 
-export default ImgCutModal;
\ No newline at end of file
+export default ImgClipModal;
\ No newline at end of file

src/components/ImgClipModal.less

+
+.img-clip-modal{
+    .preview-url-box{
+        overflow: hidden;
+    }
+}

src/modules/course-manage/components/AddLiveBasic.jsx

@@ -362,7 +362,7 @@ class AddLiveBasic extends React.Component {
               }}
             >
              <Cropper
-                style={{ height: 400, width:'100%'}}
+                style={{ height:'100%', width:'100%'}}
                 className="cropper__box"
                 zoomTo={2}
                 aspectRatio={16/9}
@@ -384,7 +384,8 @@ class AddLiveBasic extends React.Component {
                   this.setState({
                     hasImgReady:true
                   })
-                  this.state.cropperInstace.setCropBoxData({width:500,height:282})
+                  this.state.cropperInstace.setCanvasData({width:500});
+                  this.state.cropperInstace.setCropBoxData({width:500,height:282});
                   const that = this;
                   document.querySelector('.cropper__box').addEventListener('dblclick', function (e) {
                     that.state.cropperInstace.rotate(90)

src/modules/course-manage/video-course/AddVideoCourse.jsx

 /*
  * @Author: 吴文洁
  * @Date: 2020-08-05 10:07:47
- * @LastEditors: wufan
- * @LastEditTime: 2021-05-30 20:35:49
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-06-30 18:07:32
  * @Description: 视频课新增/编辑页
  * @Copyright: 杭州杰竞科技有限公司 版权所有
  */
@@ -11,7 +11,6 @@ import React from 'react'
 import { Button, Input, Radio, message, Modal, Cascader } from 'antd'
 
 import { DISK_MAP, FileTypeIcon, FileVerifyMap } from '@/common/constants/academic/lessonEnum'
-import { ImgCutModalNew } from '@/components'
 import ShowTips from '@/components/ShowTips'
 import Breadcrumbs from '@/components/Breadcrumbs'
 
@@ -26,8 +25,8 @@ import User from '@/common/js/user'
 import _ from 'underscore'
 import Upload from '@/core/upload'
 import { randomString } from '@/domains/basic-domain/utils'
+import ImgClipModal from '@/components/ImgClipModal'
 import $ from 'jquery'
-// import PhotoClip from 'photoclip';
 import './AddVideoCourse.less'
 
 const EDIT_BOX_KEY = Math.random()
@@ -727,7 +726,10 @@ class AddVideoCourse extends React.Component {
             onSelect={this.handleSelectCover}
           />
         )}
-        <Modal
+        { visible &&
+          <ImgClipModal visible={visible}/>
+        }
+        {/* <Modal
           title='设置图片'
           width={1080}
           visible={visible}
@@ -781,7 +783,7 @@ class AddVideoCourse extends React.Component {
               </div>
             </div>
           </div>
-        </Modal>
+        </Modal> */}
         {this.state.previewCourseModal}
       </div>
     )