Skip to content

X
xiaomai-cloud-class-web
Commit ba9caf87 by zhangleyuan
Options

feat:处理图片裁剪

parent 5b730428
Showing with 239 additions and 293 deletions
src/components/ImgClipModal.jsx
......@@ -3,11 +3,13 @@ import { Modal, Button } from 'antd';
import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';
import './ImgClipModal.less';
import { isNull } from 'underscore';
class ImgClipModal extends React.Component {
constructor(props) {
super(props);
this.state = {
hasImgReady: false, // 图片是否上传成功
cropperInstace:null,
}
}
render() {
......@@ -23,6 +25,8 @@ class ImgClipModal extends React.Component {
cropBoxHeight=282,
previewBoxWidth='500px',
previewBoxHeight='282px',
onConfirm,
onClose,
} = this.props;
const { hasImgReady,cropperInstace} = this.state;
return (
......@@ -34,14 +38,14 @@ class ImgClipModal extends React.Component {
maskClosable={false}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
onCancel={() => {
this.setState({ visible: false });
onClose();
}}
zIndex={10001}
footer={[
<Button
key="back"
onClick={() => {
this.setState({ visible: false });
onClose();
}}
>
重新上传
......@@ -52,8 +56,8 @@ class ImgClipModal extends React.Component {
disabled={!hasImgReady}
onClick={() => {
const cutImg = this.state.cropperInstace.getCroppedCanvas().toDataURL();
const cutImageBlob = this.convertBase64UrlToBlob(cutImg)
this.getSignature(cutImageBlob);
const cutImageBlob = window.convertBase64ToBlob(cutImg);
onConfirm(cutImageBlob);
}}
>
确定
......@@ -68,36 +72,41 @@ class ImgClipModal extends React.Component {
marginBottom: 0,
}}
>
<Cropper
style={{ height:"100%'", width:'100%'}}
className="cropper__box"
zoomTo={2}
aspectRatio={aspectRatio}
preview=".preview-url-box"
src={imgUrl}
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
})
cropperInstace.setCanvasData({width:'100%'});
cropperInstace.setCropBoxData({width:cropBoxWidth,height:cropBoxHeight})
document.querySelector('.cropper__box').addEventListener('dblclick', function (e) {
cropperInstace.rotate(90)
});
}}
/>
<Cropper
style={{ height:clipContentHeight, width:clipContentWidth}}
className="cropper__box"
zoomTo={2}
aspectRatio={aspectRatio}
preview=".preview-url-box"
src={imgUrl}
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:Number(cropBoxWidth),height:Number(cropBoxHeight)});
// this.state.cropperInstace.setCanvasData({width:500});
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">
......
src/modules/college-manage/CollegeInfoPage.jsx
......@@ -6,6 +6,7 @@ import Upload from '@/core/upload';
import StoreService from "@/domains/store-domain/storeService";
import User from "@/common/js/user";
import Bus from '@/core/tbus';
import ImgClipModal from '@/components/ImgClipModal'
import "./CollegeInfoPage.less";
let cutFlag = false;
class CollegeInfoPage extends React.Component {
......@@ -17,6 +18,7 @@ class CollegeInfoPage extends React.Component {
logo:'',
showSelectFileModal:false,
cutImageBlob: null,
imageFile: null, // 需要被截取的图片
}
}
componentWillMount() {
......@@ -51,84 +53,88 @@ class CollegeInfoPage extends React.Component {
})
}
handleSelectCover = (file)=> {
this.uploadImage(file);
// this.uploadImage(file);
this.setState({
visible: true,
imageFile:file
});
}
//上传图片
uploadImage = (imageFile) => {
const { folderName } = imageFile;
const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
const self = this;
this.setState(
{
visible: true,
},
() => {
setTimeout(() => {
const okBtnDom = document.querySelector("#headPicModal");
const options = {
size: [500, 128],
ok: okBtnDom,
maxZoom: 3,
style: {
jpgFillColor: "transparent",
},
done: function (dataUrl) {
clearTimeout(self.timer);
self.timer = setTimeout(() => {
if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
console.log(this.scale(), 'scale')
const _dataUrl = this.clip()
const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
self.setState({
cutImageBlob,
dataUrl: _dataUrl,
rotate: this.rotate(),
scale: this.scale()
})
}
// uploadImage = (imageFile) => {
// const { folderName } = imageFile;
// const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
// const self = this;
// this.setState(
// {
// visible: true,
// },
// () => {
// setTimeout(() => {
// const okBtnDom = document.querySelector("#headPicModal");
// const options = {
// size: [500, 128],
// ok: okBtnDom,
// maxZoom: 3,
// style: {
// jpgFillColor: "transparent",
// },
// done: function (dataUrl) {
// clearTimeout(self.timer);
// self.timer = setTimeout(() => {
// if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
// console.log(this.scale(), 'scale')
// const _dataUrl = this.clip()
// const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
// self.setState({
// cutImageBlob,
// dataUrl: _dataUrl,
// rotate: this.rotate(),
// scale: this.scale()
// })
// }
}, 500)
// }, 500)
const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
self.setState({
cutImageBlob,
dataUrl
})
setTimeout(() => {
cutFlag = false;
}, 2000);
},
fail: (failInfo) => {
message.error("图片上传失败了，请重新上传");
},
loadComplete: function (img) {
setTimeout(() => {
const _dataUrl = this.clip()
self.setState({
dataUrl: _dataUrl,
hasImgReady: true
})
}, 100)
// const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
// self.setState({
// cutImageBlob,
// dataUrl
// })
// setTimeout(() => {
// cutFlag = false;
// }, 2000);
// },
// fail: (failInfo) => {
// message.error("图片上传失败了，请重新上传");
// },
// loadComplete: function (img) {
// setTimeout(() => {
// const _dataUrl = this.clip()
// self.setState({
// dataUrl: _dataUrl,
// hasImgReady: true
// })
// }, 100)
},
};
const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
if (!this.state.photoclip) {
const _photoclip = new PhotoClip("#headPicModal", options);
_photoclip.load(imgUrl);
this.setState({
photoclip: _photoclip,
});
} else {
this.state.photoclip.clear();
this.state.photoclip.load(imgUrl);
}
// },
// };
// const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
// if (!this.state.photoclip) {
// const _photoclip = new PhotoClip("#headPicModal", options);
// _photoclip.load(imgUrl);
// this.setState({
// photoclip: _photoclip,
// });
// } else {
// this.state.photoclip.clear();
// this.state.photoclip.load(imgUrl);
// }
}, 200);
}
);
};
// }, 200);
// }
// );
// };
//获取resourceId
getSignature = (blob, fileName) => {
......@@ -150,16 +156,17 @@ class CollegeInfoPage extends React.Component {
logo:coverClicpPath
})
}
// base64转换成blob
convertBase64UrlToBlob = (urlData) => {
const bytes = window.atob(urlData.split(",")[1]);
const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], { type: "image/png" });
};
// base64转换成blob
// convertBase64UrlToBlob = (urlData) => {
// const bytes = window.atob(urlData.split(",")[1]);
// const ab = new ArrayBuffer(bytes.length);
// const ia = new Uint8Array(ab);
// for (let i = 0; i < bytes.length; i++) {
// ia[i] = bytes.charCodeAt(i);
// }
// return new Blob([ab], { type: "image/png" });
// };
updateInfo=()=>{
const { storeName, logo } = this.state;
if(!storeName){
......@@ -185,6 +192,7 @@ class CollegeInfoPage extends React.Component {
hasImgReady,
logo,
cutImageBlob,
imageFile
} = this.state;
return (
<div className="page college-info-page">
......@@ -242,7 +250,7 @@ class CollegeInfoPage extends React.Component {
onSelect={this.handleSelectCover}
/>
}
<Modal
{/* <Modal
title="设置图片"
width={1080}
visible={visible}
......@@ -300,7 +308,10 @@ class CollegeInfoPage extends React.Component {
</div>
</div>
</div>
</Modal>
</Modal> */}
{ visible &&
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} aspectRatio='125/32' cropBoxHeight='128' onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/>
}
<div><Button type="primary" onClick={this.updateInfo} htmlType="submit" className="submit-btn">更新信息</Button></div>
</div>
......
src/modules/course-manage/components/AddLiveBasic.jsx
......@@ -14,6 +14,7 @@ import StoreService from "@/domains/store-domain/storeService";
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
import Upload from '@/core/upload';
import Cropper from 'react-cropper';
import ImgClipModal from '@/components/ImgClipModal'
import 'cropperjs/dist/cropper.css';
import './AddLiveBasic.less';
......@@ -50,16 +51,6 @@ class AddLiveBasic extends React.Component {
});
}
// 上传封面图
// handleShowImgCutModal = (event) => {
// const imageFile = event.target.files[0];
// if (!imageFile) return;
// this.setState({
// imageFile,
// showCutModal: true,
// });
// }
// 使用默认封面图
handleResetCoverUrl = () => {
const { data: { coverUrl } } = this.props;
......@@ -88,11 +79,10 @@ class AddLiveBasic extends React.Component {
}
}
handleSelectCover = (file) => {
this.setState(
{
visible: true,
},
)
this.setState({
visible: true,
imageFile:file
});
// this.uploadImage(file);
}
......@@ -260,24 +250,6 @@ 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
title="裁剪"
width={530}
cutWidth={500}
cutHeight={282}
cutContentWidth={500}
cutContentHeight={300}
visible={showCutModal}
imageFile={imageFile}
bizCode='LIVE_COURSE_MEDIA'
onOk={(urlStr, resourceId) => {
this.setState({ showCutModal: false });
this.props.onChange('coverId', resourceId, urlStr);
this.state.currentInputFile.value = '';
}}
onClose={() => this.setState({ showCutModal: false })}
reUpload={() => { this.state.currentInputFile.click() }}
/> */}
{showSelectFileModal &&
<SelectPrepareFileModal
key="basic"
......@@ -293,7 +265,10 @@ class AddLiveBasic extends React.Component {
onSelect={this.handleSelectCover}
/>
}
<Modal
{ visible &&
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/>
}
{/* <Modal
title="设置图片"
width={1080}
visible={visible}
......@@ -317,10 +292,10 @@ 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);
......@@ -330,7 +305,7 @@ class AddLiveBasic extends React.Component {
</Button>,
]}
>
{/* <div className="clip-box">
<div className="clip-box">
<div
id="headPicModal"
ref="headPicModal"
......@@ -352,61 +327,8 @@ 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:'100%', 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.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)
});
}}
/>
</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>
</Modal> */}
</div>
)
}
......
src/modules/course-manage/video-course/AddVideoCourse.jsx
......@@ -2,7 +2,7 @@
* @Author: 吴文洁
* @Date: 2020-08-05 10:07:47
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-06-30 18:07:32
* @LastEditTime: 2021-07-01 13:59:16
* @Description: 视频课新增/编辑页
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
......@@ -418,80 +418,84 @@ class AddVideoCourse extends React.Component {
})
}
handleSelectCover = (file) => {
this.uploadImage(file)
// this.uploadImage(file)
this.setState({
visible: true,
imageFile:file
});
}
//上传图片
uploadImage = (imageFile) => {
const { folderName } = imageFile
const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf('.'))
const self = this
this.setState(
{
visible: true
},
() => {
setTimeout(() => {
const okBtnDom = document.querySelector('#headPicModal')
const options = {
size: [500, 282],
ok: okBtnDom,
maxZoom: 3,
style: {
jpgFillColor: 'transparent'
},
done: function (dataUrl) {
clearTimeout(self.timer)
self.timer = setTimeout(() => {
if (self.state.rotate != this.rotate() || self.state.scale != this.scale()) {
const _dataUrl = this.clip()
const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl)
self.setState({
cutImageBlob,
dataUrl: _dataUrl,
rotate: this.rotate(),
scale: this.scale()
})
}
}, 500)
const cutImageBlob = self.convertBase64UrlToBlob(dataUrl)
self.setState({
cutImageBlob,
dataUrl
})
setTimeout(() => {
cutFlag = false
}, 2000)
},
fail: (failInfo) => {
message.error('图片上传失败了，请重新上传')
},
loadComplete: function (img) {
setTimeout(() => {
const _dataUrl = this.clip()
self.setState({
dataUrl: _dataUrl,
hasImgReady: true
})
}, 100)
}
}
const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
if (!this.state.photoclip) {
const _photoclip = new PhotoClip('#headPicModal', options)
_photoclip.load(imgUrl)
this.setState({
photoclip: _photoclip
})
} else {
this.state.photoclip.clear()
this.state.photoclip.load(imgUrl)
}
}, 200)
}
)
}
// uploadImage = (imageFile) => {
// const { folderName } = imageFile
// const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf('.'))
// const self = this
// this.setState(
// {
// visible: true
// },
// () => {
// setTimeout(() => {
// const okBtnDom = document.querySelector('#headPicModal')
// const options = {
// size: [500, 282],
// ok: okBtnDom,
// maxZoom: 3,
// style: {
// jpgFillColor: 'transparent'
// },
// done: function (dataUrl) {
// clearTimeout(self.timer)
// self.timer = setTimeout(() => {
// if (self.state.rotate != this.rotate() || self.state.scale != this.scale()) {
// const _dataUrl = this.clip()
// const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl)
// self.setState({
// cutImageBlob,
// dataUrl: _dataUrl,
// rotate: this.rotate(),
// scale: this.scale()
// })
// }
// }, 500)
// const cutImageBlob = self.convertBase64UrlToBlob(dataUrl)
// self.setState({
// cutImageBlob,
// dataUrl
// })
// setTimeout(() => {
// cutFlag = false
// }, 2000)
// },
// fail: (failInfo) => {
// message.error('图片上传失败了，请重新上传')
// },
// loadComplete: function (img) {
// setTimeout(() => {
// const _dataUrl = this.clip()
// self.setState({
// dataUrl: _dataUrl,
// hasImgReady: true
// })
// }, 100)
// }
// }
// const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
// if (!this.state.photoclip) {
// const _photoclip = new PhotoClip('#headPicModal', options)
// _photoclip.load(imgUrl)
// this.setState({
// photoclip: _photoclip
// })
// } else {
// this.state.photoclip.clear()
// this.state.photoclip.load(imgUrl)
// }
// }, 200)
// }
// )
// }
//获取resourceId
getSignature = (blob, fileName) => {
......@@ -514,16 +518,16 @@ class AddVideoCourse extends React.Component {
coverId: coverId
})
}
// base64转换成blob
convertBase64UrlToBlob = (urlData) => {
const bytes = window.atob(urlData.split(',')[1])
const ab = new ArrayBuffer(bytes.length)
const ia = new Uint8Array(ab)
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i)
}
return new Blob([ab], { type: 'image/png' })
}
// // base64转换成blob
// convertBase64UrlToBlob = (urlData) => {
// const bytes = window.atob(urlData.split(',')[1])
// const ab = new ArrayBuffer(bytes.length)
// const ia = new Uint8Array(ab)
// for (let i = 0; i < bytes.length; i++) {
// ia[i] = bytes.charCodeAt(i)
// }
// return new Blob([ab], { type: 'image/png' })
// }
render() {
const {
pageType,
......@@ -727,7 +731,7 @@ class AddVideoCourse extends React.Component {
/>
)}
{ visible &&
<ImgClipModal visible={visible}/>
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/>
}
{/* <Modal
title='设置图片'
......
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