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 @@
"react": "^16.13.1",
"react-app-polyfill": "^1.0.6",
"react-async-component": "^2.0.0",
"react-cropper": "^2.1.8",
"react-dev-utils": "^10.2.1",
"react-dom": "^16.13.1",
"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';
import StoreService from "@/domains/store-domain/storeService";
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
import Upload from '@/core/upload';
// import PhotoClip from 'photoclip'
import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';
import './AddLiveBasic.less';
const defaultCover = 'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png';
......@@ -31,7 +31,8 @@ class AddLiveBasic extends React.Component {
courseCatalogList:[],
showSelectFileModal: false,
cutImageBlob: null,
hasImgReady: false // 图片是否上传成功
hasImgReady: false, // 图片是否上传成功
cropperInstace:null
}
}
componentWillUnmount() {
......@@ -50,14 +51,14 @@ class AddLiveBasic extends React.Component {
}
// 上传封面图
handleShowImgCutModal = (event) => {
const imageFile = event.target.files[0];
if (!imageFile) return;
this.setState({
imageFile,
showCutModal: true,
});
}
// handleShowImgCutModal = (event) => {
// const imageFile = event.target.files[0];
// if (!imageFile) return;
// this.setState({
// imageFile,
// showCutModal: true,
// });
// }
// 使用默认封面图
handleResetCoverUrl = () => {
......@@ -87,7 +88,12 @@ class AddLiveBasic extends React.Component {
}
}
handleSelectCover = (file) => {
this.uploadImage(file);
this.setState(
{
visible: true,
},
)
// this.uploadImage(file);
}
//上传图片
......@@ -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>} />
}
</div>
<ImgCutModalNew
{/* <ImgCutModalNew
title="裁剪"
width={530}
cutWidth={500}
......@@ -271,7 +277,7 @@ class AddLiveBasic extends React.Component {
}}
onClose={() => this.setState({ showCutModal: false })}
reUpload={() => { this.state.currentInputFile.click() }}
/>
/> */}
{showSelectFileModal &&
<SelectPrepareFileModal
key="basic"
......@@ -311,10 +317,12 @@ class AddLiveBasic extends React.Component {
type="primary"
disabled={!hasImgReady}
onClick={() => {
if (!cutFlag) {
cutFlag = true;
this.refs.hiddenBtn.click();
}
// if (!cutFlag) {
// cutFlag = true;
// this.refs.hiddenBtn.click();
// }
const cutImg = this.state.cropperInstace.getCroppedCanvas().toDataURL();
const cutImageBlob = this.convertBase64UrlToBlob(cutImg)
this.getSignature(cutImageBlob);
}}
>
......@@ -322,7 +330,7 @@ class AddLiveBasic extends React.Component {
</Button>,
]}
>
<div className="clip-box">
{/* <div className="clip-box">
<div
id="headPicModal"
ref="headPicModal"
......@@ -335,7 +343,6 @@ class AddLiveBasic extends React.Component {
<div id="clipBtn" style={{ display: "none" }} ref="hiddenBtn"></div>
<div className="preview-img">
<div className="title">效果预览</div>
{/* <img src={previewUrl} alt="图片预览" className="preview-url" /> */}
<div id="preview-url-box" style={{width:500,height:282}}>
<img src={this.state.dataUrl} style={{ width: '100%' }} alt="" />
</div>
......@@ -345,6 +352,58 @@ class AddLiveBasic extends React.Component {
<div className="tip">②设置图片时双击可旋转图片，滚动可放大或缩小图片</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>
</Modal>
</div>
......
src/modules/course-manage/components/AddLiveBasic.less
......@@ -82,3 +82,11 @@
width: 500px;
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