Skip to content

X
xiaomai-cloud-class-web
Commit 9122c758 by zhangleyuan
Options

feat:处理图片裁剪

parent 84416698
Showing with 201 additions and 20 deletions
package.json
...@@ -80,6 +80,7 @@ ...@@ -80,6 +80,7 @@
"react": "^16.13.1", "react": "^16.13.1",
"react-app-polyfill": "^1.0.6", "react-app-polyfill": "^1.0.6",
"react-async-component": "^2.0.0", "react-async-component": "^2.0.0",
"react-cropper": "^2.1.8",
"react-dev-utils": "^10.2.1", "react-dev-utils": "^10.2.1",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
"react-infinite-scroller": "^1.2.4", "react-infinite-scroller": "^1.2.4",
......
src/components/ImgClicpModal.jsx 0 → 100644
import React from 'react';
import { Modal, Button } from 'antd';
import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';
class ImgCclipModal extends React.Component {
render() {
const {
title = "设置图片",
visible,
onClose,
reUpload,
modalWidth=1080,
cutContentWidth,
cutContentHeight,
width = 550,
needReUpload = false,
} = this.props;
return (
<Modal
title="设置图片"
width={1080}
visible={visible}
maskClosable={false}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
onCancel={() => {
this.setState({ visible: false });
}}
zIndex={10001}
footer={[
<Button
key="back"
onClick={() => {
this.setState({ visible: false });
}}
>
重新上传
</Button>,
<Button
key="submit"
type="primary"
disabled={!hasImgReady}
onClick={() => {
const cutImg = this.state.cropperInstace.getCroppedCanvas().toDataURL();
const cutImageBlob = this.convertBase64UrlToBlob(cutImg)
this.getSignature(cutImageBlob);
}}
>
确定
</Button>,
]}
>
<div className="clip-box">
<div
style={{
width: "500px",
height: "430px",
marginBottom: 0,
}}
>
<Cropper
style={{ height: 400, width:'100%'}}
className="cropper__box"
zoomTo={2}
aspectRatio={16/9}
preview=".preview-url-box"
src='https://image.xiaomaiketang.com/xm/GEyiHbWB8W.png'
viewMode={1}
guides={true}
background={false}
responsive={true}
autoCropArea={1}
checkOrientation={false}
cropBoxResizable={false}
onInitialized={(instance) => {
this.setState({
cropperInstace:instance
})
}}
ready={()=>{
this.setState({
hasImgReady:true
})
this.state.cropperInstace.setCropBoxData({width:500,height:282})
const that = this;
document.querySelector('.cropper__box').addEventListener('dblclick', function (e) {
that.state.cropperInstace.rotate(90)
});
}}
/>
</div>
<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>
<div className="tip-box">
<div className="tip">温馨提示</div>
<div className="tip">①预览效果图时可能存在延迟，单击左侧图片刷新即可</div>
<div className="tip">②设置图片时双击可旋转图片，滚动可放大或缩小图片</div>
</div>
</div>
</div>
</Modal>
)
}
}
export default ImgCutModal;
\ No newline at end of file
src/modules/course-manage/components/AddLiveBasic.jsx
...@@ -13,8 +13,8 @@ import { ImgCutModalNew } from '@/components'; ...@@ -13,8 +13,8 @@ import { ImgCutModalNew } from '@/components';
import StoreService from "@/domains/store-domain/storeService"; import StoreService from "@/domains/store-domain/storeService";
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal'; import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
import Upload from '@/core/upload'; import Upload from '@/core/upload';
// import PhotoClip from 'photoclip' import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';
import './AddLiveBasic.less'; import './AddLiveBasic.less';
const defaultCover = 'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png'; const defaultCover = 'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png';
...@@ -31,7 +31,8 @@ class AddLiveBasic extends React.Component { ...@@ -31,7 +31,8 @@ class AddLiveBasic extends React.Component {
courseCatalogList:[], courseCatalogList:[],
showSelectFileModal: false, showSelectFileModal: false,
cutImageBlob: null, cutImageBlob: null,
hasImgReady: false // 图片是否上传成功 hasImgReady: false, // 图片是否上传成功
cropperInstace:null
} }
} }
componentWillUnmount() { componentWillUnmount() {
...@@ -50,14 +51,14 @@ class AddLiveBasic extends React.Component { ...@@ -50,14 +51,14 @@ class AddLiveBasic extends React.Component {
} }
// 上传封面图 // 上传封面图
handleShowImgCutModal = (event) => { // handleShowImgCutModal = (event) => {
const imageFile = event.target.files[0]; // const imageFile = event.target.files[0];
if (!imageFile) return; // if (!imageFile) return;
this.setState({ // this.setState({
imageFile, // imageFile,
showCutModal: true, // showCutModal: true,
}); // });
} // }
// 使用默认封面图 // 使用默认封面图
handleResetCoverUrl = () => { handleResetCoverUrl = () => {
...@@ -87,7 +88,12 @@ class AddLiveBasic extends React.Component { ...@@ -87,7 +88,12 @@ class AddLiveBasic extends React.Component {
} }
} }
handleSelectCover = (file) => { handleSelectCover = (file) => {
this.uploadImage(file); this.setState(
{
visible: true,
},
)
// this.uploadImage(file);
} }
//上传图片 //上传图片
...@@ -254,7 +260,7 @@ class AddLiveBasic extends React.Component { ...@@ -254,7 +260,7 @@ class AddLiveBasic extends React.Component {
<Cascader disabled={!isEdit ? true: false} defaultValue={[categoryName]} options={courseCatalogList} displayRender={ label => label.join('-')} fieldNames={fieldNames} onChange={this.catalogChange} style={{ width: 240 }} placeholder="请选择课程分类" suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>} /> <Cascader disabled={!isEdit ? true: false} defaultValue={[categoryName]} options={courseCatalogList} displayRender={ label => label.join('-')} fieldNames={fieldNames} onChange={this.catalogChange} style={{ width: 240 }} placeholder="请选择课程分类" suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>} />
} }
</div> </div>
<ImgCutModalNew {/* <ImgCutModalNew
title="裁剪" title="裁剪"
width={530} width={530}
cutWidth={500} cutWidth={500}
...@@ -271,7 +277,7 @@ class AddLiveBasic extends React.Component { ...@@ -271,7 +277,7 @@ class AddLiveBasic extends React.Component {
}} }}
onClose={() => this.setState({ showCutModal: false })} onClose={() => this.setState({ showCutModal: false })}
reUpload={() => { this.state.currentInputFile.click() }} reUpload={() => { this.state.currentInputFile.click() }}
/> /> */}
{showSelectFileModal && {showSelectFileModal &&
<SelectPrepareFileModal <SelectPrepareFileModal
key="basic" key="basic"
...@@ -311,10 +317,12 @@ class AddLiveBasic extends React.Component { ...@@ -311,10 +317,12 @@ class AddLiveBasic extends React.Component {
type="primary" type="primary"
disabled={!hasImgReady} disabled={!hasImgReady}
onClick={() => { onClick={() => {
if (!cutFlag) { // if (!cutFlag) {
cutFlag = true; // cutFlag = true;
this.refs.hiddenBtn.click(); // this.refs.hiddenBtn.click();
} // }
const cutImg = this.state.cropperInstace.getCroppedCanvas().toDataURL();
const cutImageBlob = this.convertBase64UrlToBlob(cutImg)
this.getSignature(cutImageBlob); this.getSignature(cutImageBlob);
}} }}
> >
...@@ -322,7 +330,7 @@ class AddLiveBasic extends React.Component { ...@@ -322,7 +330,7 @@ class AddLiveBasic extends React.Component {
</Button>, </Button>,
]} ]}
> >
<div className="clip-box"> {/* <div className="clip-box">
<div <div
id="headPicModal" id="headPicModal"
ref="headPicModal" ref="headPicModal"
...@@ -335,7 +343,6 @@ class AddLiveBasic extends React.Component { ...@@ -335,7 +343,6 @@ class AddLiveBasic 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>
{/* <img src={previewUrl} alt="图片预览" className="preview-url" /> */}
<div id="preview-url-box" style={{width:500,height:282}}> <div id="preview-url-box" style={{width:500,height:282}}>
<img src={this.state.dataUrl} style={{ width: '100%' }} alt="" /> <img src={this.state.dataUrl} style={{ width: '100%' }} alt="" />
</div> </div>
...@@ -345,6 +352,58 @@ class AddLiveBasic extends React.Component { ...@@ -345,6 +352,58 @@ class AddLiveBasic extends React.Component {
<div className="tip">②设置图片时双击可旋转图片，滚动可放大或缩小图片</div> <div className="tip">②设置图片时双击可旋转图片，滚动可放大或缩小图片</div>
</div> </div>
</div> </div>
</div> */}
<div className="clip-box">
<div
style={{
width: "500px",
height: "430px",
marginBottom: 0,
}}
>
<Cropper
style={{ height: 400, width:'100%'}}
className="cropper__box"
zoomTo={2}
aspectRatio={16/9}
preview=".preview-url-box"
src='https://image.xiaomaiketang.com/xm/GEyiHbWB8W.png'
viewMode={1}
guides={true}
background={false}
responsive={true}
autoCropArea={1}
checkOrientation={false}
cropBoxResizable={false}
onInitialized={(instance) => {
this.setState({
cropperInstace:instance
})
}}
ready={()=>{
this.setState({
hasImgReady:true
})
this.state.cropperInstace.setCropBoxData({width:500,height:282})
const that = this;
document.querySelector('.cropper__box').addEventListener('dblclick', function (e) {
that.state.cropperInstace.rotate(90)
});
}}
/>
</div>
<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>
<div className="tip-box">
<div className="tip">温馨提示</div>
<div className="tip">①预览效果图时可能存在延迟，单击左侧图片刷新即可</div>
<div className="tip">②设置图片时双击可旋转图片，滚动可放大或缩小图片</div>
</div>
</div>
</div> </div>
</Modal> </Modal>
</div> </div>
......
src/modules/course-manage/components/AddLiveBasic.less
...@@ -82,3 +82,11 @@ ...@@ -82,3 +82,11 @@
width: 500px; width: 500px;
height: 300px; height: 300px;
} }
.preview-url-box{
overflow: hidden;
// img{
// width:500px !important;
// height:282px !important;
// transform:none !important;
// }
}
\ No newline at end of file
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