Skip to content

X
xiaomai-cloud-class-web
Commit 9f892188 by zhangleyuan
Options

feat:处理图片裁剪

parent ba9caf87
Showing with 739 additions and 665 deletions
src/components/ImgClipModal.jsx
...@@ -87,6 +87,10 @@ class ImgClipModal extends React.Component { ...@@ -87,6 +87,10 @@ class ImgClipModal extends React.Component {
autoCropArea={1} autoCropArea={1}
checkOrientation={false} checkOrientation={false}
cropBoxResizable={false} cropBoxResizable={false}
minCropBoxWidth={cropBoxWidth}
minCropBoxHeight={cropBoxHeight}
cropBoxMovable={false}
dragMode='move'
onInitialized={(instance) => { onInitialized={(instance) => {
this.setState({ this.setState({
cropperInstace:instance cropperInstace:instance
...@@ -97,7 +101,7 @@ class ImgClipModal extends React.Component { ...@@ -97,7 +101,7 @@ class ImgClipModal extends React.Component {
hasImgReady:true hasImgReady:true
}) })
this.state.cropperInstace.setCropBoxData({width:Number(cropBoxWidth),height:Number(cropBoxHeight)}); this.state.cropperInstace.setCropBoxData({width:Number(cropBoxWidth),height:Number(cropBoxHeight)});
// this.state.cropperInstace.setCanvasData({width:500}); this.state.cropperInstace.setCanvasData({width:500});
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/components/AddLiveBasic.jsx
...@@ -87,81 +87,81 @@ class AddLiveBasic extends React.Component { ...@@ -87,81 +87,81 @@ class AddLiveBasic extends React.Component {
} }
//上传图片 //上传图片
uploadImage = (imageFile) => { // uploadImage = (imageFile) => {
const { folderName } = imageFile; // const { folderName } = imageFile;
const fileName = // const fileName =
window.random_string(16) + folderName.slice(folderName.lastIndexOf(".")); // window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
const self = this; // const self = this;
this.setState( // this.setState(
{ // {
visible: true, // visible: true,
}, // },
() => { // () => {
setTimeout(() => { // setTimeout(() => {
const okBtnDom = document.querySelector("#headPicModal"); // const okBtnDom = document.querySelector("#headPicModal");
const options = { // const options = {
size: [500, 282], // size: [500, 282],
ok: okBtnDom, // ok: okBtnDom,
maxZoom: 3, // maxZoom: 3,
style: { // style: {
jpgFillColor: "transparent", // jpgFillColor: "transparent",
}, // },
done: function (dataUrl) { // done: function (dataUrl) {
clearTimeout(self.timer); // clearTimeout(self.timer);
self.timer = setTimeout(() => { // self.timer = setTimeout(() => {
if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) { // if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
console.log(this.scale(), 'scale') // console.log(this.scale(), 'scale')
const _dataUrl = this.clip() // const _dataUrl = this.clip()
const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl); // const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
self.setState({ // self.setState({
cutImageBlob, // cutImageBlob,
dataUrl: _dataUrl, // dataUrl: _dataUrl,
rotate: this.rotate(), // rotate: this.rotate(),
scale: this.scale() // scale: this.scale()
}) // })
} // }
}, 500) // }, 500)
const cutImageBlob = self.convertBase64UrlToBlob(dataUrl); // const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
self.setState({ // self.setState({
cutImageBlob, // cutImageBlob,
dataUrl // dataUrl
}) // })
setTimeout(() => { // setTimeout(() => {
cutFlag = false; // cutFlag = false;
}, 2000); // }, 2000);
}, // },
fail: (failInfo) => { // fail: (failInfo) => {
message.error("图片上传失败了，请重新上传"); // message.error("图片上传失败了，请重新上传");
}, // },
loadComplete: function (img) { // loadComplete: function (img) {
setTimeout(() => { // setTimeout(() => {
const _dataUrl = this.clip() // const _dataUrl = this.clip()
self.setState({ // self.setState({
dataUrl: _dataUrl, // dataUrl: _dataUrl,
hasImgReady: true // hasImgReady: true
}) // })
}, 100) // }, 100)
}, // },
}; // };
const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}` // const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
if (!this.state.photoclip) { // if (!this.state.photoclip) {
const _photoclip = new PhotoClip("#headPicModal", options); // const _photoclip = new PhotoClip("#headPicModal", options);
_photoclip.load(imgUrl); // _photoclip.load(imgUrl);
this.setState({ // this.setState({
photoclip: _photoclip, // photoclip: _photoclip,
}); // });
} else { // } else {
this.state.photoclip.clear(); // this.state.photoclip.clear();
this.state.photoclip.load(imgUrl); // this.state.photoclip.load(imgUrl);
} // }
}, 200); // }, 200);
} // }
); // );
}; // };
//获取resourceId //获取resourceId
getSignature = (blob, fileName) => { getSignature = (blob, fileName) => {
...@@ -176,15 +176,15 @@ class AddLiveBasic extends React.Component { ...@@ -176,15 +176,15 @@ class AddLiveBasic extends React.Component {
}); });
}; };
// base64转换成blob // base64转换成blob
convertBase64UrlToBlob = (urlData) => { // convertBase64UrlToBlob = (urlData) => {
const bytes = window.atob(urlData.split(",")[1]); // const bytes = window.atob(urlData.split(",")[1]);
const ab = new ArrayBuffer(bytes.length); // const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab); // const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) { // for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i); // ia[i] = bytes.charCodeAt(i);
} // }
return new Blob([ab], { type: "image/png" }); // return new Blob([ab], { type: "image/png" });
}; // };
updateCover = () =>{ updateCover = () =>{
const {coverClicpPath,coverId} = this.state const {coverClicpPath,coverId} = this.state
this.setState({ this.setState({
......
src/modules/course-manage/graphics-course/AddGraphicsCourse.jsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-05 10:07:47 * @Date: 2020-08-05 10:07:47
* @LastEditors: fusanqiasng * @LastEditors: Please set LastEditors
* @LastEditTime: 2021-06-16 18:16:14 * @LastEditTime: 2021-07-01 14:58:15
* @Description: 图文课新增/编辑页 * @Description: 图文课新增/编辑页
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -25,6 +25,7 @@ import { randomString } from '@/domains/basic-domain/utils'; ...@@ -25,6 +25,7 @@ import { randomString } from '@/domains/basic-domain/utils';
import User from '@/common/js/user'; import User from '@/common/js/user';
import _ from 'underscore'; import _ from 'underscore';
import Upload from '@/core/upload'; import Upload from '@/core/upload';
import ImgClipModal from '@/components/ImgClipModal'
import './AddGraphicsCourse.less'; import './AddGraphicsCourse.less';
const EDIT_BOX_KEY = Math.random(); const EDIT_BOX_KEY = Math.random();
...@@ -279,80 +280,84 @@ class AddGraphicsCourse extends React.Component { ...@@ -279,80 +280,84 @@ class AddGraphicsCourse extends React.Component {
}; };
handleSelectCover = (file) => { handleSelectCover = (file) => {
this.uploadCoverImage(file); // this.uploadCoverImage(file);
this.setState({
visible: true,
imageFile:file
});
}; };
//上传图片 //上传图片
uploadCoverImage = (imageFile) => { // uploadCoverImage = (imageFile) => {
const { folderName } = imageFile; // const { folderName } = imageFile;
const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf('.')); // const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf('.'));
const self = this; // const self = this;
this.setState( // this.setState(
{ // {
visible: true, // visible: true,
}, // },
() => { // () => {
setTimeout(() => { // setTimeout(() => {
const okBtnDom = document.querySelector('#headPicModal'); // const okBtnDom = document.querySelector('#headPicModal');
const options = { // const options = {
size: [500, 282], // size: [500, 282],
ok: okBtnDom, // ok: okBtnDom,
maxZoom: 3, // maxZoom: 3,
style: { // style: {
jpgFillColor: 'transparent', // jpgFillColor: 'transparent',
}, // },
done: function (dataUrl) { // done: function (dataUrl) {
clearTimeout(self.timer); // clearTimeout(self.timer);
self.timer = setTimeout(() => { // self.timer = setTimeout(() => {
if (self.state.rotate != this.rotate() || self.state.scale != this.scale()) { // if (self.state.rotate != this.rotate() || self.state.scale != this.scale()) {
const _dataUrl = this.clip(); // const _dataUrl = this.clip();
const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl); // const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
self.setState({ // self.setState({
cutImageBlob, // cutImageBlob,
dataUrl: _dataUrl, // dataUrl: _dataUrl,
rotate: this.rotate(), // rotate: this.rotate(),
scale: this.scale(), // scale: this.scale(),
}); // });
} // }
}, 500); // }, 500);
const cutImageBlob = self.convertBase64UrlToBlob(dataUrl); // const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
self.setState({ // self.setState({
cutImageBlob, // cutImageBlob,
dataUrl, // dataUrl,
}); // });
setTimeout(() => { // setTimeout(() => {
cutFlag = false; // cutFlag = false;
}, 2000); // }, 2000);
}, // },
fail: (failInfo) => { // fail: (failInfo) => {
message.error('图片上传失败了，请重新上传'); // message.error('图片上传失败了，请重新上传');
}, // },
loadComplete: function (img) { // loadComplete: function (img) {
setTimeout(() => { // setTimeout(() => {
const _dataUrl = this.clip(); // const _dataUrl = this.clip();
self.setState({ // self.setState({
dataUrl: _dataUrl, // dataUrl: _dataUrl,
hasImgReady: true, // hasImgReady: true,
}); // });
}, 100); // }, 100);
}, // },
}; // };
const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`; // const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`;
if (!this.state.photoclip) { // if (!this.state.photoclip) {
const _photoclip = new PhotoClip('#headPicModal', options); // const _photoclip = new PhotoClip('#headPicModal', options);
_photoclip.load(imgUrl); // _photoclip.load(imgUrl);
this.setState({ // this.setState({
photoclip: _photoclip, // photoclip: _photoclip,
}); // });
} else { // } else {
this.state.photoclip.clear(); // this.state.photoclip.clear();
this.state.photoclip.load(imgUrl); // this.state.photoclip.load(imgUrl);
} // }
}, 200); // }, 200);
} // }
); // );
}; // };
//获取resourceId //获取resourceId
getSignature = (blob, fileName) => { getSignature = (blob, fileName) => {
...@@ -378,15 +383,15 @@ class AddGraphicsCourse extends React.Component { ...@@ -378,15 +383,15 @@ class AddGraphicsCourse extends React.Component {
}; };
// base64转换成blob // base64转换成blob
convertBase64UrlToBlob = (urlData) => { // convertBase64UrlToBlob = (urlData) => {
const bytes = window.atob(urlData.split(',')[1]); // const bytes = window.atob(urlData.split(',')[1]);
const ab = new ArrayBuffer(bytes.length); // const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab); // const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) { // for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i); // ia[i] = bytes.charCodeAt(i);
} // }
return new Blob([ab], { type: 'image/png' }); // return new Blob([ab], { type: 'image/png' });
}; // };
// 保存 // 保存
handleSubmit = () => { handleSubmit = () => {
...@@ -610,7 +615,7 @@ class AddGraphicsCourse extends React.Component { ...@@ -610,7 +615,7 @@ class AddGraphicsCourse extends React.Component {
onSelect={this.handleSelectCover} onSelect={this.handleSelectCover}
/> />
)} )}
<Modal {/* <Modal
title='设置图片' title='设置图片'
width={1080} width={1080}
visible={visible} visible={visible}
...@@ -643,6 +648,7 @@ class AddGraphicsCourse extends React.Component { ...@@ -643,6 +648,7 @@ class AddGraphicsCourse extends React.Component {
</Button>, </Button>,
]}> ]}>
<div className='clip-box'> <div className='clip-box'>
<div <div
id='headPicModal' id='headPicModal'
ref='headPicModal' ref='headPicModal'
...@@ -664,7 +670,10 @@ class AddGraphicsCourse extends React.Component { ...@@ -664,7 +670,10 @@ class AddGraphicsCourse extends React.Component {
</div> </div>
</div> </div>
</div> </div>
</Modal> </Modal> */}
{ visible &&
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/>
}
{this.state.previewGraphicsModal} {this.state.previewGraphicsModal}
</div> </div>
); );
......
src/modules/course-manage/offline-course/AddOfflineCourse.jsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-05 10:07:47 * @Date: 2020-08-05 10:07:47
* @LastEditors: yuananting * @LastEditors: Please set LastEditors
* @LastEditTime: 2021-06-07 15:06:26 * @LastEditTime: 2021-07-01 15:05:12
* @Description: 线下课新增/编辑页 * @Description: 线下课新增/编辑页
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -38,6 +38,7 @@ import moment from 'moment'; ...@@ -38,6 +38,7 @@ import moment from 'moment';
import Upload from '@/core/upload'; import Upload from '@/core/upload';
import GraphicsEditor from '../components/GraphicsEditor'; import GraphicsEditor from '../components/GraphicsEditor';
import MultipleDatePicker from '@/components/MultipleDatePicker'; import MultipleDatePicker from '@/components/MultipleDatePicker';
import ImgClipModal from '@/components/ImgClipModal'
import './AddOfflineCourse.less'; import './AddOfflineCourse.less';
const { Option } = Select; const { Option } = Select;
...@@ -355,83 +356,87 @@ class AddOfflineCourse extends React.Component { ...@@ -355,83 +356,87 @@ class AddOfflineCourse extends React.Component {
} }
handleSelectCover = (file)=> { handleSelectCover = (file)=> {
this.uploadCoverImage(file); // this.uploadCoverImage(file);
this.setState({
visible: true,
imageFile:file
});
} }
//上传图片 //上传图片
uploadCoverImage = (imageFile) => { // uploadCoverImage = (imageFile) => {
const { folderName } = imageFile; // const { folderName } = imageFile;
const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf(".")); // const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
const self = this; // const self = this;
this.setState( // this.setState(
{ // {
visible: true, // visible: true,
}, // },
() => { // () => {
setTimeout(() => { // setTimeout(() => {
const okBtnDom = document.querySelector("#headPicModal"); // const okBtnDom = document.querySelector("#headPicModal");
const options = { // const options = {
size: [500, 282], // size: [500, 282],
ok: okBtnDom, // ok: okBtnDom,
maxZoom: 3, // maxZoom: 3,
style: { // style: {
jpgFillColor: "transparent", // jpgFillColor: "transparent",
}, // },
done: function (dataUrl) { // done: function (dataUrl) {
clearTimeout(self.timer); // clearTimeout(self.timer);
self.timer = setTimeout(() => { // self.timer = setTimeout(() => {
if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) { // if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
const _dataUrl = this.clip() // const _dataUrl = this.clip()
const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl); // const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
self.setState({ // self.setState({
cutImageBlob, // cutImageBlob,
dataUrl: _dataUrl, // dataUrl: _dataUrl,
rotate: this.rotate(), // rotate: this.rotate(),
scale: this.scale() // scale: this.scale()
}) // })
} // }
}, 500) // }, 500)
const cutImageBlob = self.convertBase64UrlToBlob(dataUrl); // const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
self.setState({ // self.setState({
cutImageBlob, // cutImageBlob,
dataUrl // dataUrl
}) // })
setTimeout(() => { // setTimeout(() => {
cutFlag = false; // cutFlag = false;
}, 2000); // }, 2000);
}, // },
fail: (failInfo) => { // fail: (failInfo) => {
message.error("图片上传失败了，请重新上传"); // message.error("图片上传失败了，请重新上传");
}, // },
loadComplete: function (img) { // loadComplete: function (img) {
setTimeout(() => { // setTimeout(() => {
const _dataUrl = this.clip() // const _dataUrl = this.clip()
self.setState({ // self.setState({
dataUrl: _dataUrl, // dataUrl: _dataUrl,
hasImgReady: true // hasImgReady: true
}) // })
}, 100) // }, 100)
}, // },
}; // };
const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}` // const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
if (!this.state.photoclip) { // if (!this.state.photoclip) {
const _photoclip = new PhotoClip("#headPicModal", options); // const _photoclip = new PhotoClip("#headPicModal", options);
_photoclip.load(imgUrl); // _photoclip.load(imgUrl);
this.setState({ // this.setState({
photoclip: _photoclip, // photoclip: _photoclip,
}); // });
} else { // } else {
this.state.photoclip.clear(); // this.state.photoclip.clear();
this.state.photoclip.load(imgUrl); // this.state.photoclip.load(imgUrl);
} // }
}, 200); // }, 200);
} // }
); // );
}; // };
//获取resourceId //获取resourceId
getSignature = (blob, fileName) => { getSignature = (blob, fileName) => {
...@@ -455,15 +460,15 @@ class AddOfflineCourse extends React.Component { ...@@ -455,15 +460,15 @@ class AddOfflineCourse extends React.Component {
} }
// base64转换成blob // base64转换成blob
convertBase64UrlToBlob = (urlData) => { // convertBase64UrlToBlob = (urlData) => {
const bytes = window.atob(urlData.split(",")[1]); // const bytes = window.atob(urlData.split(",")[1]);
const ab = new ArrayBuffer(bytes.length); // const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab); // const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) { // for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i); // ia[i] = bytes.charCodeAt(i);
} // }
return new Blob([ab], { type: "image/png" }); // return new Blob([ab], { type: "image/png" });
}; // };
preSubmit = () => { preSubmit = () => {
const { courseId } = this.state; const { courseId } = this.state;
...@@ -777,6 +782,7 @@ class AddOfflineCourse extends React.Component { ...@@ -777,6 +782,7 @@ class AddOfflineCourse extends React.Component {
quota, quota,
offlinePlace, offlinePlace,
isEditDisablie, isEditDisablie,
imageFile,
} = this.state; } = this.state;
const isDefaultCover = coverUrl === defaultCoverUrl; const isDefaultCover = coverUrl === defaultCoverUrl;
return ( return (
...@@ -1292,7 +1298,7 @@ class AddOfflineCourse extends React.Component { ...@@ -1292,7 +1298,7 @@ class AddOfflineCourse extends React.Component {
onSelect={this.handleSelectCover} onSelect={this.handleSelectCover}
/> />
} }
<Modal {/* <Modal
title="设置图片" title="设置图片"
width={1080} width={1080}
visible={visible} visible={visible}
...@@ -1350,7 +1356,10 @@ class AddOfflineCourse extends React.Component { ...@@ -1350,7 +1356,10 @@ class AddOfflineCourse extends React.Component {
</div> </div>
</div> </div>
</div> </div>
</Modal> </Modal> */}
{ visible &&
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/>
}
{ this.state.previewOfflineModal } { this.state.previewOfflineModal }
</div> </div>
) )
......
src/modules/plan-manage/components/BasicInfo.jsx
/* /*
* @Author: zhangleyuan * @Author: zhangleyuan
* @Date: 2021-02-20 16:45:51 * @Date: 2021-02-20 16:45:51
* @LastEditors: fusanqiasng * @LastEditors: Please set LastEditors
* @LastEditTime: 2021-06-01 15:20:33 * @LastEditTime: 2021-07-01 15:08:17
* @Description: 描述一下 * @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -12,7 +12,7 @@ import { withRouter } from 'react-router-dom'; ...@@ -12,7 +12,7 @@ import { withRouter } from 'react-router-dom';
import SelectOperatorModal from '../modal/SelectOperatorModal'; import SelectOperatorModal from '../modal/SelectOperatorModal';
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 ImgClipModal from '@/components/ImgClipModal'
import './BasicInfo.less'; import './BasicInfo.less';
const { TextArea } = Input; const { TextArea } = Input;
...@@ -22,6 +22,7 @@ class BasicInfo extends React.Component { ...@@ -22,6 +22,7 @@ class BasicInfo extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
imageFile: null, // 需要被截取的图片
operatorModalVisible: false, operatorModalVisible: false,
showSelectFileModal: false, showSelectFileModal: false,
cutImageBlob: null, cutImageBlob: null,
...@@ -71,79 +72,83 @@ class BasicInfo extends React.Component { ...@@ -71,79 +72,83 @@ class BasicInfo extends React.Component {
}, 1000); }, 1000);
}; };
handleSelectCover = (file) => { handleSelectCover = (file) => {
this.uploadImage(file); // this.uploadImage(file);
this.setState({
visible: true,
imageFile:file
});
}; };
//上传图片 //上传图片
uploadImage = (imageFile) => { // uploadImage = (imageFile) => {
const self = this; // const self = this;
this.setState( // this.setState(
{ // {
visible: true, // visible: true,
}, // },
() => { // () => {
setTimeout(() => { // setTimeout(() => {
const okBtnDom = document.querySelector('#headPicModal'); // const okBtnDom = document.querySelector('#headPicModal');
const options = { // const options = {
size: [500, 282], // size: [500, 282],
ok: okBtnDom, // ok: okBtnDom,
maxZoom: 3, // maxZoom: 3,
style: { // style: {
jpgFillColor: 'transparent', // jpgFillColor: 'transparent',
}, // },
done: function (dataUrl) { // done: function (dataUrl) {
clearTimeout(self.timer); // clearTimeout(self.timer);
self.timer = setTimeout(() => { // self.timer = setTimeout(() => {
if (self.state.rotate !== this.rotate() || self.state.scale !== this.scale()) { // if (self.state.rotate !== this.rotate() || self.state.scale !== this.scale()) {
console.log(this.scale(), 'scale'); // console.log(this.scale(), 'scale');
const _dataUrl = this.clip(); // const _dataUrl = this.clip();
const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl); // const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
self.setState({ // self.setState({
cutImageBlob, // cutImageBlob,
dataUrl: _dataUrl, // dataUrl: _dataUrl,
rotate: this.rotate(), // rotate: this.rotate(),
scale: this.scale(), // scale: this.scale(),
}); // });
} // }
}, 500); // }, 500);
const cutImageBlob = self.convertBase64UrlToBlob(dataUrl); // const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
self.setState({ // self.setState({
cutImageBlob, // cutImageBlob,
dataUrl, // dataUrl,
}); // });
setTimeout(() => { // setTimeout(() => {
cutFlag = false; // cutFlag = false;
}, 2000); // }, 2000);
}, // },
fail: (failInfo) => { // fail: (failInfo) => {
message.error('图片上传失败了，请重新上传'); // message.error('图片上传失败了，请重新上传');
}, // },
loadComplete: function (img) { // loadComplete: function (img) {
setTimeout(() => { // setTimeout(() => {
const _dataUrl = this.clip(); // const _dataUrl = this.clip();
self.setState({ // self.setState({
dataUrl: _dataUrl, // dataUrl: _dataUrl,
hasImgReady: true, // hasImgReady: true,
}); // });
}, 100); // }, 100);
}, // },
}; // };
const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`; // const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`;
if (!this.state.photoclip) { // if (!this.state.photoclip) {
const _photoclip = new PhotoClip('#headPicModal', options); // const _photoclip = new PhotoClip('#headPicModal', options);
_photoclip.load(imgUrl); // _photoclip.load(imgUrl);
this.setState({ // this.setState({
photoclip: _photoclip, // photoclip: _photoclip,
}); // });
} else { // } else {
this.state.photoclip.clear(); // this.state.photoclip.clear();
this.state.photoclip.load(imgUrl); // this.state.photoclip.load(imgUrl);
} // }
}, 200); // }, 200);
} // }
); // );
}; // };
//获取resourceId //获取resourceId
getSignature = (blob, fileName) => { getSignature = (blob, fileName) => {
...@@ -169,15 +174,15 @@ class BasicInfo extends React.Component { ...@@ -169,15 +174,15 @@ class BasicInfo extends React.Component {
}, 1000); }, 1000);
}; };
// base64转换成blob // base64转换成blob
convertBase64UrlToBlob = (urlData) => { // convertBase64UrlToBlob = (urlData) => {
const bytes = window.atob(urlData.split(',')[1]); // const bytes = window.atob(urlData.split(',')[1]);
const ab = new ArrayBuffer(bytes.length); // const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab); // const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) { // for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i); // ia[i] = bytes.charCodeAt(i);
} // }
return new Blob([ab], { type: 'image/png' }); // return new Blob([ab], { type: 'image/png' });
}; // };
limitNumber = (value) => { limitNumber = (value) => {
if (typeof value === 'string') { if (typeof value === 'string') {
return !isNaN(Number(value)) ? value.replace(/^(0+)|[^\d]/g, '') : ''; return !isNaN(Number(value)) ? value.replace(/^(0+)|[^\d]/g, '') : '';
...@@ -203,7 +208,7 @@ class BasicInfo extends React.Component { ...@@ -203,7 +208,7 @@ class BasicInfo extends React.Component {
}; };
render() { render() {
const { operatorModalVisible, showSelectFileModal, visible, hasImgReady, cutImageBlob } = this.state; const { operatorModalVisible, showSelectFileModal, visible, hasImgReady, cutImageBlob,imageFile} = this.state;
const { data } = this.props; const { data } = this.props;
const { planName, coverUrl, instro, enableState, operateType, selectOperatorList, percentCompleteLive, percentCompleteVideo, percentCompletePicture } = const { planName, coverUrl, instro, enableState, operateType, selectOperatorList, percentCompleteLive, percentCompleteVideo, percentCompletePicture } =
data; data;
...@@ -403,7 +408,7 @@ class BasicInfo extends React.Component { ...@@ -403,7 +408,7 @@ class BasicInfo extends React.Component {
onSelect={this.handleSelectCover} onSelect={this.handleSelectCover}
/> />
)} )}
<Modal {/* <Modal
title='设置图片' title='设置图片'
width={1080} width={1080}
visible={visible} visible={visible}
...@@ -457,7 +462,10 @@ class BasicInfo extends React.Component { ...@@ -457,7 +462,10 @@ class BasicInfo extends React.Component {
</div> </div>
</div> </div>
</div> </div>
</Modal> </Modal> */}
{ visible &&
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/>
}
</div> </div>
); );
} }
......
src/modules/root/CreateCollege.jsx
...@@ -5,6 +5,7 @@ import Service from "@/common/js/service"; ...@@ -5,6 +5,7 @@ import Service from "@/common/js/service";
import BaseService from "@/domains/basic-domain/baseService"; import BaseService from "@/domains/basic-domain/baseService";
import User from "@/common/js/user"; import User from "@/common/js/user";
import Breadcrumbs from "@/components/Breadcrumbs"; import Breadcrumbs from "@/components/Breadcrumbs";
import ImgClipModal from '@/components/ImgClipModal'
import './CreateCollege.less'; import './CreateCollege.less';
let cutFlag = false; let cutFlag = false;
...@@ -18,6 +19,7 @@ export default class CreateCollege extends React.Component { ...@@ -18,6 +19,7 @@ export default class CreateCollege extends React.Component {
logo: 'https://image.xiaomaiketang.com/xm/fe4NCjr7XF.png', logo: 'https://image.xiaomaiketang.com/xm/fe4NCjr7XF.png',
name: '', name: '',
enterpriseId: User.getEnterpriseId(), enterpriseId: User.getEnterpriseId(),
imageFile: null, // 需要被截取的图片
}; };
this.loginInputRef = React.createRef() this.loginInputRef = React.createRef()
} }
...@@ -46,95 +48,99 @@ export default class CreateCollege extends React.Component { ...@@ -46,95 +48,99 @@ export default class CreateCollege extends React.Component {
handleSelectCover = (e) => { handleSelectCover = (e) => {
const imageFile = e.target.files[0]; const imageFile = e.target.files[0];
Upload.uploadBlobToOSS(imageFile, 'cover' + (new Date()).valueOf()).then((url) => { Upload.uploadBlobToOSS(imageFile, 'cover' + (new Date()).valueOf()).then((url) => {
this.uploadImage({ folderName: imageFile.name, ossUrl: url }); this.setState({
visible: true,
imageFile:{ folderName: imageFile.name, ossUrl: url }
});
// this.uploadImage({ folderName: imageFile.name, ossUrl: url });
}) })
} }
//上传图片 //上传图片
uploadImage = (imageFile) => { // uploadImage = (imageFile) => {
const { folderName } = imageFile; // const { folderName } = imageFile;
const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf(".")); // const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
const self = this; // const self = this;
this.setState( // this.setState(
{ // {
visible: true, // visible: true,
}, // },
() => { // () => {
setTimeout(() => { // setTimeout(() => {
const okBtnDom = document.querySelector("#headPicModal"); // const okBtnDom = document.querySelector("#headPicModal");
const options = { // const options = {
size: [500, 128], // size: [500, 128],
ok: okBtnDom, // ok: okBtnDom,
maxZoom: 3, // maxZoom: 3,
style: { // style: {
jpgFillColor: "transparent", // jpgFillColor: "transparent",
}, // },
done: function (dataUrl) { // done: function (dataUrl) {
clearTimeout(self.timer); // clearTimeout(self.timer);
self.timer = setTimeout(() => { // self.timer = setTimeout(() => {
if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) { // if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
const _dataUrl = this.clip() // const _dataUrl = this.clip()
const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl); // const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
self.setState({ // self.setState({
cutImageBlob, // cutImageBlob,
dataUrl: _dataUrl, // dataUrl: _dataUrl,
rotate: this.rotate(), // rotate: this.rotate(),
scale: this.scale() // scale: this.scale()
}) // })
} // }
}, 500) // }, 500)
const cutImageBlob = self.convertBase64UrlToBlob(dataUrl); // const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
self.setState({ // self.setState({
cutImageBlob, // cutImageBlob,
dataUrl // dataUrl
}) // })
setTimeout(() => { // setTimeout(() => {
cutFlag = false; // cutFlag = false;
}, 2000); // }, 2000);
}, // },
fail: (failInfo) => { // fail: (failInfo) => {
message.error("图片上传失败了，请重新上传"); // message.error("图片上传失败了，请重新上传");
}, // },
loadComplete: function (img) { // loadComplete: function (img) {
setTimeout(() => { // setTimeout(() => {
const _dataUrl = this.clip() // const _dataUrl = this.clip()
self.setState({ // self.setState({
dataUrl: _dataUrl, // dataUrl: _dataUrl,
hasImgReady: true // hasImgReady: true
}) // })
}, 100) // }, 100)
}, // },
}; // };
const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}` // const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
if (!this.state.photoclip) { // if (!this.state.photoclip) {
const _photoclip = new PhotoClip("#headPicModal", options); // const _photoclip = new PhotoClip("#headPicModal", options);
_photoclip.load(imgUrl); // _photoclip.load(imgUrl);
this.setState({ // this.setState({
photoclip: _photoclip, // photoclip: _photoclip,
}); // });
} else { // } else {
this.state.photoclip.clear(); // this.state.photoclip.clear();
this.state.photoclip.load(imgUrl); // this.state.photoclip.load(imgUrl);
} // }
}, 200); // }, 200);
} // }
); // );
}; // };
// base64转换成blob // base64转换成blob
convertBase64UrlToBlob = (urlData) => { // convertBase64UrlToBlob = (urlData) => {
const bytes = window.atob(urlData.split(",")[1]); // const bytes = window.atob(urlData.split(",")[1]);
const ab = new ArrayBuffer(bytes.length); // const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab); // const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) { // for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i); // ia[i] = bytes.charCodeAt(i);
} // }
return new Blob([ab], { type: "image/png" }); // return new Blob([ab], { type: "image/png" });
}; // };
//获取resourceId //获取resourceId
getSignature = (blob, fileName) => { getSignature = (blob, fileName) => {
...@@ -184,6 +190,7 @@ export default class CreateCollege extends React.Component { ...@@ -184,6 +190,7 @@ export default class CreateCollege extends React.Component {
hasImgReady, hasImgReady,
cutImageBlob, cutImageBlob,
showError, showError,
imageFile
} = this.state; } = this.state;
return ( return (
<div className="college-manage-page"> <div className="college-manage-page">
...@@ -247,7 +254,7 @@ export default class CreateCollege extends React.Component { ...@@ -247,7 +254,7 @@ export default class CreateCollege extends React.Component {
style={{ display: "none" }} style={{ display: "none" }}
onChange={this.handleSelectCover} onChange={this.handleSelectCover}
/> />
<Modal {/* <Modal
title="设置图片" title="设置图片"
width={1080} width={1080}
visible={visible} visible={visible}
...@@ -305,7 +312,10 @@ export default class CreateCollege extends React.Component { ...@@ -305,7 +312,10 @@ export default class CreateCollege extends React.Component {
</div> </div>
</div> </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> </div>
) )
} }
......
src/modules/store-manage/StoreH5DecorationTab.jsx
/* /*
* @Author: wufan * @Author: wufan
* @Date: 2020-11-30 10:47:38 * @Date: 2020-11-30 10:47:38
* @LastEditors: wufan * @LastEditors: Please set LastEditors
* @LastEditTime: 2021-06-21 11:16:21 * @LastEditTime: 2021-07-01 15:38:47
* @Description: web学院banner页面 * @Description: web学院banner页面
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -25,6 +25,7 @@ import "./StoreDecorationPage.less"; ...@@ -25,6 +25,7 @@ import "./StoreDecorationPage.less";
import Upload from "@/core/upload"; import Upload from "@/core/upload";
import { XMTable } from '@/components'; import { XMTable } from '@/components';
import college from '@/common/lottie/college'; import college from '@/common/lottie/college';
import ImgClipModal from '@/components/ImgClipModal'
const { confirm } = Modal; const { confirm } = Modal;
const DragHandle = sortableHandle(() => ( const DragHandle = sortableHandle(() => (
...@@ -51,7 +52,8 @@ class StoreH5Decoration extends React.Component { ...@@ -51,7 +52,8 @@ class StoreH5Decoration extends React.Component {
photoclip: null, photoclip: null,
preview: "", preview: "",
cutImageBlob: null, cutImageBlob: null,
hasImgReady: false // 图片是否上传成功 hasImgReady: false, // 图片是否上传成功
imageFile: null // 需要被截取的图片
}; };
} }
...@@ -211,84 +213,91 @@ class StoreH5Decoration extends React.Component { ...@@ -211,84 +213,91 @@ class StoreH5Decoration extends React.Component {
this.setState({ this.setState({
showSelectFileModal: false, showSelectFileModal: false,
}); });
this.uploadImage(file); // this.uploadImage(file);
if(file){
this.setState({
visible: true,
imageFile:file
});
}
}; };
//上传图片 //上传图片
uploadImage = (imageFile) => { // uploadImage = (imageFile) => {
const self = this; // const self = this;
this.setState( // this.setState(
{ // {
visible: true, // visible: true,
}, // },
() => { // () => {
setTimeout(() => { // setTimeout(() => {
const okBtnDom = document.querySelector("#headPicModal"); // const okBtnDom = document.querySelector("#headPicModal");
const options = { // const options = {
size: [500, 172], // size: [500, 172],
ok: okBtnDom, // ok: okBtnDom,
maxZoom: 3, // maxZoom: 3,
style: { // style: {
jpgFillColor: "transparent", // jpgFillColor: "transparent",
}, // },
done: function (dataUrl) { // done: function (dataUrl) {
clearTimeout(self.timer); // clearTimeout(self.timer);
self.timer = setTimeout(() => { // self.timer = setTimeout(() => {
if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) { // if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
console.log(this.scale(), 'scale') // console.log(this.scale(), 'scale')
const _dataUrl = this.clip() // const _dataUrl = this.clip()
const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl); // const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
self.setState({ // self.setState({
cutImageBlob, // cutImageBlob,
dataUrl: _dataUrl, // dataUrl: _dataUrl,
rotate: this.rotate(), // rotate: this.rotate(),
scale: this.scale() // scale: this.scale()
}) // })
} // }
}, 500) // }, 500)
const cutImageBlob = self.convertBase64UrlToBlob(dataUrl); // const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
self.setState({ // self.setState({
cutImageBlob, // cutImageBlob,
dataUrl // dataUrl
}) // })
setTimeout(() => { // setTimeout(() => {
cutFlag = false; // cutFlag = false;
}, 2000); // }, 2000);
}, // },
fail: (failInfo) => { // fail: (failInfo) => {
message.error("图片上传失败了，请重新上传"); // message.error("图片上传失败了，请重新上传");
}, // },
loadComplete: function (img) { // loadComplete: function (img) {
setTimeout(() => { // setTimeout(() => {
const _dataUrl = this.clip() // const _dataUrl = this.clip()
self.setState({ // self.setState({
dataUrl: _dataUrl, // dataUrl: _dataUrl,
hasImgReady: true // hasImgReady: true
}) // })
}, 100) // }, 100)
}, // },
}; // };
const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}` // const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
if (!this.state.photoclip) { // if (!this.state.photoclip) {
const _photoclip = new PhotoClip("#headPicModal", options); // const _photoclip = new PhotoClip("#headPicModal", options);
_photoclip.load(imgUrl); // _photoclip.load(imgUrl);
this.setState({ // this.setState({
photoclip: _photoclip, // photoclip: _photoclip,
}); // });
} else { // } else {
this.state.photoclip.clear(); // this.state.photoclip.clear();
this.state.photoclip.load(imgUrl); // this.state.photoclip.load(imgUrl);
} // }
}, 200); // }, 200);
} // }
); // );
}; // };
//获取resourceId //获取resourceId
getSignature = (blob) => { getSignature = (blob) => {
...@@ -345,15 +354,15 @@ class StoreH5Decoration extends React.Component { ...@@ -345,15 +354,15 @@ class StoreH5Decoration extends React.Component {
}; };
// base64转换成blob // base64转换成blob
convertBase64UrlToBlob = (urlData) => { // convertBase64UrlToBlob = (urlData) => {
const bytes = window.atob(urlData.split(",")[1]); // const bytes = window.atob(urlData.split(",")[1]);
const ab = new ArrayBuffer(bytes.length); // const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab); // const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) { // for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i); // ia[i] = bytes.charCodeAt(i);
} // }
return new Blob([ab], { type: "image/png" }); // return new Blob([ab], { type: "image/png" });
}; // };
render() { render() {
const { const {
...@@ -362,7 +371,8 @@ class StoreH5Decoration extends React.Component { ...@@ -362,7 +371,8 @@ class StoreH5Decoration extends React.Component {
diskList, diskList,
visible, visible,
cutImageBlob, cutImageBlob,
hasImgReady hasImgReady,
imageFile,
} = this.state; } = this.state;
const DraggableContainer = (props) => ( const DraggableContainer = (props) => (
<SortableContainer <SortableContainer
...@@ -423,7 +433,7 @@ class StoreH5Decoration extends React.Component { ...@@ -423,7 +433,7 @@ class StoreH5Decoration extends React.Component {
}} }}
onSelect={this.handleSelectImg} onSelect={this.handleSelectImg}
/> />
<Modal {/* <Modal
title="设置图片" title="设置图片"
width={1080} width={1080}
visible={visible} visible={visible}
...@@ -481,7 +491,10 @@ class StoreH5Decoration extends React.Component { ...@@ -481,7 +491,10 @@ class StoreH5Decoration extends React.Component {
</div> </div>
</div> </div>
</div> </div>
</Modal> </Modal> */}
{ visible &&
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} aspectRatio='500/172' cropBoxHeight='172' onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/>
}
</div> </div>
); );
} }
......
src/modules/store-manage/StoreInfo.jsx
...@@ -4,10 +4,10 @@ import { Form, Input, Button, Checkbox ,Select,Modal,message} from 'antd'; ...@@ -4,10 +4,10 @@ import { Form, Input, Button, Checkbox ,Select,Modal,message} from 'antd';
import {industryList,childIndustryList} from '@/domains/store-domain/constants' import {industryList,childIndustryList} from '@/domains/store-domain/constants'
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 StoreService from "@/domains/store-domain/storeService"; import StoreService from "@/domains/store-domain/storeService";
import User from "@/common/js/user"; import User from "@/common/js/user";
import Bus from '@/core/tbus'; import Bus from '@/core/tbus';
import ImgClipModal from '@/components/ImgClipModal'
import "./StoreInfo.less"; import "./StoreInfo.less";
let cutFlag = false; let cutFlag = false;
class StoreInfo extends React.Component { class StoreInfo extends React.Component {
...@@ -23,6 +23,7 @@ class StoreInfo extends React.Component { ...@@ -23,6 +23,7 @@ class StoreInfo extends React.Component {
logo:'', logo:'',
showSelectFileModal:false, showSelectFileModal:false,
cutImageBlob: null, cutImageBlob: null,
imageFile: null, // 需要被截取的图片
} }
} }
componentWillMount(){ componentWillMount(){
...@@ -73,84 +74,88 @@ class StoreInfo extends React.Component { ...@@ -73,84 +74,88 @@ class StoreInfo extends React.Component {
}) })
} }
handleSelectCover = (file)=> { handleSelectCover = (file)=> {
this.uploadImage(file); // this.uploadImage(file);
this.setState({
visible: true,
imageFile:file
});
} }
//上传图片 //上传图片
uploadImage = (imageFile) => { // uploadImage = (imageFile) => {
const { folderName } = imageFile; // const { folderName } = imageFile;
const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf(".")); // const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
const self = this; // const self = this;
this.setState( // this.setState(
{ // {
visible: true, // visible: true,
}, // },
() => { // () => {
setTimeout(() => { // setTimeout(() => {
const okBtnDom = document.querySelector("#headPicModal"); // const okBtnDom = document.querySelector("#headPicModal");
const options = { // const options = {
size: [500, 128], // size: [500, 128],
ok: okBtnDom, // ok: okBtnDom,
maxZoom: 3, // maxZoom: 3,
style: { // style: {
jpgFillColor: "transparent", // jpgFillColor: "transparent",
}, // },
done: function (dataUrl) { // done: function (dataUrl) {
clearTimeout(self.timer); // clearTimeout(self.timer);
self.timer = setTimeout(() => { // self.timer = setTimeout(() => {
if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) { // if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
console.log(this.scale(), 'scale') // console.log(this.scale(), 'scale')
const _dataUrl = this.clip() // const _dataUrl = this.clip()
const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl); // const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
self.setState({ // self.setState({
cutImageBlob, // cutImageBlob,
dataUrl: _dataUrl, // dataUrl: _dataUrl,
rotate: this.rotate(), // rotate: this.rotate(),
scale: this.scale() // scale: this.scale()
}) // })
} // }
}, 500) // }, 500)
const cutImageBlob = self.convertBase64UrlToBlob(dataUrl); // const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
self.setState({ // self.setState({
cutImageBlob, // cutImageBlob,
dataUrl // dataUrl
}) // })
setTimeout(() => { // setTimeout(() => {
cutFlag = false; // cutFlag = false;
}, 2000); // }, 2000);
}, // },
fail: (failInfo) => { // fail: (failInfo) => {
message.error("图片上传失败了，请重新上传"); // message.error("图片上传失败了，请重新上传");
}, // },
loadComplete: function (img) { // loadComplete: function (img) {
setTimeout(() => { // setTimeout(() => {
const _dataUrl = this.clip() // const _dataUrl = this.clip()
self.setState({ // self.setState({
dataUrl: _dataUrl, // dataUrl: _dataUrl,
hasImgReady: true // hasImgReady: true
}) // })
}, 100) // }, 100)
}, // },
}; // };
const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}` // const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
if (!this.state.photoclip) { // if (!this.state.photoclip) {
const _photoclip = new PhotoClip("#headPicModal", options); // const _photoclip = new PhotoClip("#headPicModal", options);
_photoclip.load(imgUrl); // _photoclip.load(imgUrl);
this.setState({ // this.setState({
photoclip: _photoclip, // photoclip: _photoclip,
}); // });
} else { // } else {
this.state.photoclip.clear(); // this.state.photoclip.clear();
this.state.photoclip.load(imgUrl); // this.state.photoclip.load(imgUrl);
} // }
}, 200); // }, 200);
} // }
); // );
}; // };
//获取resourceId //获取resourceId
getSignature = (blob, fileName) => { getSignature = (blob, fileName) => {
...@@ -173,15 +178,15 @@ class StoreInfo extends React.Component { ...@@ -173,15 +178,15 @@ class StoreInfo extends React.Component {
}) })
} }
// base64转换成blob // base64转换成blob
convertBase64UrlToBlob = (urlData) => { // convertBase64UrlToBlob = (urlData) => {
const bytes = window.atob(urlData.split(",")[1]); // const bytes = window.atob(urlData.split(",")[1]);
const ab = new ArrayBuffer(bytes.length); // const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab); // const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) { // for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i); // ia[i] = bytes.charCodeAt(i);
} // }
return new Blob([ab], { type: "image/png" }); // return new Blob([ab], { type: "image/png" });
}; // };
updateInfo=()=>{ updateInfo=()=>{
const {storeName,storeFullName,logo,subjectType,corpIndustry,corpSubIndustry} = this.state; const {storeName,storeFullName,logo,subjectType,corpIndustry,corpSubIndustry} = this.state;
if(!storeName){ if(!storeName){
...@@ -216,7 +221,7 @@ class StoreInfo extends React.Component { ...@@ -216,7 +221,7 @@ class StoreInfo extends React.Component {
}); });
} }
render() { render() {
const {storeName,storeFullName,subjectType,corpIndustry,corpSubIndustry,showSelectFileModal,visible,hasImgReady,logo,cutImageBlob } = this.state; const {storeName,storeFullName,subjectType,corpIndustry,corpSubIndustry,showSelectFileModal,visible,hasImgReady,logo,cutImageBlob,imageFile} = this.state;
return ( return (
<div className="page store-info-page"> <div className="page store-info-page">
<div className="content-header">学院基本信息</div> <div className="content-header">学院基本信息</div>
...@@ -330,7 +335,7 @@ class StoreInfo extends React.Component { ...@@ -330,7 +335,7 @@ class StoreInfo extends React.Component {
onSelect={this.handleSelectCover} onSelect={this.handleSelectCover}
/> />
} }
<Modal {/* <Modal
title="设置图片" title="设置图片"
width={1080} width={1080}
visible={visible} visible={visible}
...@@ -388,7 +393,10 @@ class StoreInfo extends React.Component { ...@@ -388,7 +393,10 @@ class StoreInfo extends React.Component {
</div> </div>
</div> </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><Button type="primary" onClick={this.updateInfo} htmlType="submit" className="submit-btn">更新信息</Button></div>
</div> </div>
......
src/modules/store-manage/StoreWebDecorationTab.jsx
/* /*
* @Author: wufan * @Author: wufan
* @Date: 2020-11-30 10:47:38 * @Date: 2020-11-30 10:47:38
* @LastEditors: wufan * @LastEditors: Please set LastEditors
* @LastEditTime: 2021-06-21 11:16:31 * @LastEditTime: 2021-07-01 15:38:32
* @Description: web学院banner页面 * @Description: web学院banner页面
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -25,6 +25,7 @@ import "./StoreDecorationPage.less"; ...@@ -25,6 +25,7 @@ import "./StoreDecorationPage.less";
import Upload from "@/core/upload"; import Upload from "@/core/upload";
import { XMTable } from '@/components'; import { XMTable } from '@/components';
import college from '@/common/lottie/college'; import college from '@/common/lottie/college';
import ImgClipModal from '@/components/ImgClipModal'
const { confirm } = Modal; const { confirm } = Modal;
const DragHandle = sortableHandle(() => ( const DragHandle = sortableHandle(() => (
...@@ -51,7 +52,8 @@ class StoreWebDecoration extends React.Component { ...@@ -51,7 +52,8 @@ class StoreWebDecoration extends React.Component {
photoclip: null, photoclip: null,
preview: "", preview: "",
cutImageBlob: null, cutImageBlob: null,
hasImgReady: false // 图片是否上传成功 hasImgReady: false,// 图片是否上传成功
imageFile: null // 需要被截取的图片
}; };
} }
...@@ -210,83 +212,90 @@ class StoreWebDecoration extends React.Component { ...@@ -210,83 +212,90 @@ class StoreWebDecoration extends React.Component {
this.setState({ this.setState({
showSelectFileModal: false, showSelectFileModal: false,
}); });
this.uploadImage(file); // this.uploadImage(file);
if(file){
this.setState({
visible: true,
imageFile:file
});
}
}; };
//上传图片 //上传图片
uploadImage = (imageFile) => { // uploadImage = (imageFile) => {
const self = this; // const self = this;
this.setState( // this.setState(
{ // {
visible: true, // visible: true,
}, // },
() => { // () => {
setTimeout(() => { // setTimeout(() => {
const okBtnDom = document.querySelector("#headPicModal"); // const okBtnDom = document.querySelector("#headPicModal");
const options = { // const options = {
size: [500, 73], // size: [500, 73],
ok: okBtnDom, // ok: okBtnDom,
maxZoom: 3, // maxZoom: 3,
style: { // style: {
jpgFillColor: "transparent", // jpgFillColor: "transparent",
}, // },
done: function (dataUrl) { // done: function (dataUrl) {
clearTimeout(self.timer); // clearTimeout(self.timer);
self.timer = setTimeout(() => { // self.timer = setTimeout(() => {
if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) { // if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
console.log(this.scale(), 'scale') // console.log(this.scale(), 'scale')
const _dataUrl = this.clip() // const _dataUrl = this.clip()
const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl); // const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
self.setState({ // self.setState({
cutImageBlob, // cutImageBlob,
dataUrl: _dataUrl, // dataUrl: _dataUrl,
rotate: this.rotate(), // rotate: this.rotate(),
scale: this.scale() // scale: this.scale()
}) // })
} // }
}, 500) // }, 500)
const cutImageBlob = self.convertBase64UrlToBlob(dataUrl); // const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
self.setState({ // self.setState({
cutImageBlob, // cutImageBlob,
dataUrl // dataUrl
}) // })
setTimeout(() => { // setTimeout(() => {
cutFlag = false; // cutFlag = false;
}, 2000); // }, 2000);
}, // },
fail: (failInfo) => { // fail: (failInfo) => {
message.error("图片上传失败了，请重新上传"); // message.error("图片上传失败了，请重新上传");
}, // },
loadComplete: function (img) { // loadComplete: function (img) {
setTimeout(() => { // setTimeout(() => {
const _dataUrl = this.clip() // const _dataUrl = this.clip()
self.setState({ // self.setState({
dataUrl: _dataUrl, // dataUrl: _dataUrl,
hasImgReady: true // hasImgReady: true
}) // })
}, 100) // }, 100)
}, // },
}; // };
const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}` // const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
if (!this.state.photoclip) { // if (!this.state.photoclip) {
const _photoclip = new PhotoClip("#headPicModal", options); // const _photoclip = new PhotoClip("#headPicModal", options);
_photoclip.load(imgUrl); // _photoclip.load(imgUrl);
this.setState({ // this.setState({
photoclip: _photoclip, // photoclip: _photoclip,
}); // });
} else { // } else {
this.state.photoclip.clear(); // this.state.photoclip.clear();
this.state.photoclip.load(imgUrl); // this.state.photoclip.load(imgUrl);
} // }
}, 200); // }, 200);
} // }
); // );
}; // };
//获取resourceId //获取resourceId
getSignature = (blob) => { getSignature = (blob) => {
...@@ -343,15 +352,15 @@ class StoreWebDecoration extends React.Component { ...@@ -343,15 +352,15 @@ class StoreWebDecoration extends React.Component {
}; };
// base64转换成blob // base64转换成blob
convertBase64UrlToBlob = (urlData) => { // convertBase64UrlToBlob = (urlData) => {
const bytes = window.atob(urlData.split(",")[1]); // const bytes = window.atob(urlData.split(",")[1]);
const ab = new ArrayBuffer(bytes.length); // const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab); // const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) { // for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i); // ia[i] = bytes.charCodeAt(i);
} // }
return new Blob([ab], { type: "image/png" }); // return new Blob([ab], { type: "image/png" });
}; // };
render() { render() {
const { const {
...@@ -360,7 +369,8 @@ class StoreWebDecoration extends React.Component { ...@@ -360,7 +369,8 @@ class StoreWebDecoration extends React.Component {
diskList, diskList,
visible, visible,
cutImageBlob, cutImageBlob,
hasImgReady hasImgReady,
imageFile
} = this.state; } = this.state;
const DraggableContainer = (props) => ( const DraggableContainer = (props) => (
<SortableContainer <SortableContainer
...@@ -421,7 +431,7 @@ class StoreWebDecoration extends React.Component { ...@@ -421,7 +431,7 @@ class StoreWebDecoration extends React.Component {
}} }}
onSelect={this.handleSelectImg} onSelect={this.handleSelectImg}
/> />
<Modal {/* <Modal
title="设置图片" title="设置图片"
width={1080} width={1080}
visible={visible} visible={visible}
...@@ -479,7 +489,10 @@ class StoreWebDecoration extends React.Component { ...@@ -479,7 +489,10 @@ class StoreWebDecoration extends React.Component {
</div> </div>
</div> </div>
</div> </div>
</Modal> </Modal> */}
{ visible &&
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} aspectRatio='500/73' cropBoxHeight='73' onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/>
}
</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