Skip to content

X
xiaomai-cloud-class-web
Commit 5b730428 by zhangleyuan
Options

feat:处理图片裁剪

parent 9122c758
Showing with 49 additions and 31 deletions
src/components/ImgClicpModal.jsx → src/components/ImgClipModal.jsx
...@@ -2,25 +2,34 @@ import React from 'react'; ...@@ -2,25 +2,34 @@ import React from 'react';
import { Modal, Button } from 'antd'; import { Modal, Button } from 'antd';
import Cropper from 'react-cropper'; import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css'; import 'cropperjs/dist/cropper.css';
import './ImgClipModal.less';
class ImgCclipModal extends React.Component { class ImgClipModal extends React.Component {
constructor(props) {
super(props);
this.state = {
hasImgReady: false, // 图片是否上传成功
}
}
render() { render() {
const { const {
imgUrl,
title = "设置图片", title = "设置图片",
visible,
onClose,
reUpload,
modalWidth=1080, modalWidth=1080,
cutContentWidth, visible,
cutContentHeight, clipContentWidth='500px',
width = 550, clipContentHeight='430px',
needReUpload = false, aspectRatio=16/9,
cropBoxWidth=500,
cropBoxHeight=282,
previewBoxWidth='500px',
previewBoxHeight='282px',
} = this.props; } = this.props;
const { hasImgReady,cropperInstace} = this.state;
return ( return (
<Modal <Modal
title="设置图片" className="img-clip-modal"
width={1080} title={title}
width={modalWidth}
visible={visible} visible={visible}
maskClosable={false} maskClosable={false}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>} closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
...@@ -54,18 +63,18 @@ class ImgCclipModal extends React.Component { ...@@ -54,18 +63,18 @@ class ImgCclipModal extends React.Component {
<div className="clip-box"> <div className="clip-box">
<div <div
style={{ style={{
width: "500px", width:clipContentWidth,
height: "430px", height:clipContentHeight,
marginBottom: 0, marginBottom: 0,
}} }}
> >
<Cropper <Cropper
style={{ height: 400, width:'100%'}} style={{ height:"100%'", width:'100%'}}
className="cropper__box" className="cropper__box"
zoomTo={2} zoomTo={2}
aspectRatio={16/9} aspectRatio={aspectRatio}
preview=".preview-url-box" preview=".preview-url-box"
src='https://image.xiaomaiketang.com/xm/GEyiHbWB8W.png' src={imgUrl}
viewMode={1} viewMode={1}
guides={true} guides={true}
background={false} background={false}
...@@ -82,10 +91,10 @@ class ImgCclipModal extends React.Component { ...@@ -82,10 +91,10 @@ class ImgCclipModal extends React.Component {
this.setState({ this.setState({
hasImgReady:true hasImgReady:true
}) })
this.state.cropperInstace.setCropBoxData({width:500,height:282}) cropperInstace.setCanvasData({width:'100%'});
const that = this; cropperInstace.setCropBoxData({width:cropBoxWidth,height:cropBoxHeight})
document.querySelector('.cropper__box').addEventListener('dblclick', function (e) { 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 { ...@@ -93,7 +102,7 @@ class ImgCclipModal extends React.Component {
<div id="clipBtn" style={{ display: "none" }} ref="hiddenBtn"></div> <div id="clipBtn" style={{ display: "none" }} ref="hiddenBtn"></div>
<div className="preview-img"> <div className="preview-img">
<div className="title">效果预览</div> <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>
<div className="tip-box"> <div className="tip-box">
...@@ -108,4 +117,4 @@ class ImgCclipModal extends React.Component { ...@@ -108,4 +117,4 @@ class ImgCclipModal extends React.Component {
} }
} }
export default ImgCutModal; export default ImgClipModal;
\ No newline at end of file \ 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 { ...@@ -362,7 +362,7 @@ class AddLiveBasic extends React.Component {
}} }}
> >
<Cropper <Cropper
style={{ height: 400, width:'100%'}} style={{ height:'100%', width:'100%'}}
className="cropper__box" className="cropper__box"
zoomTo={2} zoomTo={2}
aspectRatio={16/9} aspectRatio={16/9}
...@@ -384,7 +384,8 @@ class AddLiveBasic extends React.Component { ...@@ -384,7 +384,8 @@ class AddLiveBasic extends React.Component {
this.setState({ this.setState({
hasImgReady:true 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; const that = this;
document.querySelector('.cropper__box').addEventListener('dblclick', function (e) { document.querySelector('.cropper__box').addEventListener('dblclick', function (e) {
that.state.cropperInstace.rotate(90) that.state.cropperInstace.rotate(90)
......
src/modules/course-manage/video-course/AddVideoCourse.jsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-05 10:07:47 * @Date: 2020-08-05 10:07:47
* @LastEditors: wufan * @LastEditors: Please set LastEditors
* @LastEditTime: 2021-05-30 20:35:49 * @LastEditTime: 2021-06-30 18:07:32
* @Description: 视频课新增/编辑页 * @Description: 视频课新增/编辑页
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -11,7 +11,6 @@ import React from 'react' ...@@ -11,7 +11,6 @@ import React from 'react'
import { Button, Input, Radio, message, Modal, Cascader } from 'antd' import { Button, Input, Radio, message, Modal, Cascader } from 'antd'
import { DISK_MAP, FileTypeIcon, FileVerifyMap } from '@/common/constants/academic/lessonEnum' import { DISK_MAP, FileTypeIcon, FileVerifyMap } from '@/common/constants/academic/lessonEnum'
import { ImgCutModalNew } from '@/components'
import ShowTips from '@/components/ShowTips' import ShowTips from '@/components/ShowTips'
import Breadcrumbs from '@/components/Breadcrumbs' import Breadcrumbs from '@/components/Breadcrumbs'
...@@ -26,8 +25,8 @@ import User from '@/common/js/user' ...@@ -26,8 +25,8 @@ import User from '@/common/js/user'
import _ from 'underscore' import _ from 'underscore'
import Upload from '@/core/upload' import Upload from '@/core/upload'
import { randomString } from '@/domains/basic-domain/utils' import { randomString } from '@/domains/basic-domain/utils'
import ImgClipModal from '@/components/ImgClipModal'
import $ from 'jquery' import $ from 'jquery'
// import PhotoClip from 'photoclip';
import './AddVideoCourse.less' import './AddVideoCourse.less'
const EDIT_BOX_KEY = Math.random() const EDIT_BOX_KEY = Math.random()
...@@ -727,7 +726,10 @@ class AddVideoCourse extends React.Component { ...@@ -727,7 +726,10 @@ class AddVideoCourse extends React.Component {
onSelect={this.handleSelectCover} onSelect={this.handleSelectCover}
/> />
)} )}
<Modal { visible &&
<ImgClipModal visible={visible}/>
}
{/* <Modal
title='设置图片' title='设置图片'
width={1080} width={1080}
visible={visible} visible={visible}
...@@ -781,7 +783,7 @@ class AddVideoCourse extends React.Component { ...@@ -781,7 +783,7 @@ class AddVideoCourse extends React.Component {
</div> </div>
</div> </div>
</div> </div>
</Modal> </Modal> */}
{this.state.previewCourseModal} {this.state.previewCourseModal}
</div> </div>
) )
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment