Skip to content

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

feat:处理图片裁剪

parent 5b730428
Showing with 211 additions and 265 deletions
src/components/ImgClipModal.jsx
...@@ -3,11 +3,13 @@ import { Modal, Button } from 'antd'; ...@@ -3,11 +3,13 @@ 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'; import './ImgClipModal.less';
import { isNull } from 'underscore';
class ImgClipModal extends React.Component { class ImgClipModal extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
hasImgReady: false, // 图片是否上传成功 hasImgReady: false, // 图片是否上传成功
cropperInstace:null,
} }
} }
render() { render() {
...@@ -23,6 +25,8 @@ class ImgClipModal extends React.Component { ...@@ -23,6 +25,8 @@ class ImgClipModal extends React.Component {
cropBoxHeight=282, cropBoxHeight=282,
previewBoxWidth='500px', previewBoxWidth='500px',
previewBoxHeight='282px', previewBoxHeight='282px',
onConfirm,
onClose,
} = this.props; } = this.props;
const { hasImgReady,cropperInstace} = this.state; const { hasImgReady,cropperInstace} = this.state;
return ( return (
...@@ -34,14 +38,14 @@ class ImgClipModal extends React.Component { ...@@ -34,14 +38,14 @@ class ImgClipModal extends React.Component {
maskClosable={false} maskClosable={false}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>} closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
onCancel={() => { onCancel={() => {
this.setState({ visible: false }); onClose();
}} }}
zIndex={10001} zIndex={10001}
footer={[ footer={[
<Button <Button
key="back" key="back"
onClick={() => { onClick={() => {
this.setState({ visible: false }); onClose();
}} }}
> >
重新上传 重新上传
...@@ -52,8 +56,8 @@ class ImgClipModal extends React.Component { ...@@ -52,8 +56,8 @@ class ImgClipModal extends React.Component {
disabled={!hasImgReady} disabled={!hasImgReady}
onClick={() => { onClick={() => {
const cutImg = this.state.cropperInstace.getCroppedCanvas().toDataURL(); const cutImg = this.state.cropperInstace.getCroppedCanvas().toDataURL();
const cutImageBlob = this.convertBase64UrlToBlob(cutImg) const cutImageBlob = window.convertBase64ToBlob(cutImg);
this.getSignature(cutImageBlob); onConfirm(cutImageBlob);
}} }}
> >
确定 确定
...@@ -68,8 +72,9 @@ class ImgClipModal extends React.Component { ...@@ -68,8 +72,9 @@ class ImgClipModal extends React.Component {
marginBottom: 0, marginBottom: 0,
}} }}
> >
<Cropper <Cropper
style={{ height:"100%'", width:'100%'}} style={{ height:clipContentHeight, width:clipContentWidth}}
className="cropper__box" className="cropper__box"
zoomTo={2} zoomTo={2}
aspectRatio={aspectRatio} aspectRatio={aspectRatio}
...@@ -91,13 +96,17 @@ class ImgClipModal extends React.Component { ...@@ -91,13 +96,17 @@ class ImgClipModal extends React.Component {
this.setState({ this.setState({
hasImgReady:true hasImgReady:true
}) })
cropperInstace.setCanvasData({width:'100%'}); this.state.cropperInstace.setCropBoxData({width:Number(cropBoxWidth),height:Number(cropBoxHeight)});
cropperInstace.setCropBoxData({width:cropBoxWidth,height:cropBoxHeight}) // this.state.cropperInstace.setCanvasData({width:500});
const that = this;
document.querySelector('.cropper__box').addEventListener('dblclick', function (e) { document.querySelector('.cropper__box').addEventListener('dblclick', function (e) {
cropperInstace.rotate(90) that.state.cropperInstace.rotate(90)
}); });
}} }}
/> />
</div> </div>
<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">
......
src/modules/college-manage/CollegeInfoPage.jsx
...@@ -6,6 +6,7 @@ import Upload from '@/core/upload'; ...@@ -6,6 +6,7 @@ import Upload from '@/core/upload';
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 "./CollegeInfoPage.less"; import "./CollegeInfoPage.less";
let cutFlag = false; let cutFlag = false;
class CollegeInfoPage extends React.Component { class CollegeInfoPage extends React.Component {
...@@ -17,6 +18,7 @@ class CollegeInfoPage extends React.Component { ...@@ -17,6 +18,7 @@ class CollegeInfoPage extends React.Component {
logo:'', logo:'',
showSelectFileModal:false, showSelectFileModal:false,
cutImageBlob: null, cutImageBlob: null,
imageFile: null, // 需要被截取的图片
} }
} }
componentWillMount() { componentWillMount() {
...@@ -51,84 +53,88 @@ class CollegeInfoPage extends React.Component { ...@@ -51,84 +53,88 @@ class CollegeInfoPage 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) => {
...@@ -150,16 +156,17 @@ class CollegeInfoPage extends React.Component { ...@@ -150,16 +156,17 @@ class CollegeInfoPage extends React.Component {
logo:coverClicpPath logo:coverClicpPath
}) })
} }
// 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, logo } = this.state; const { storeName, logo } = this.state;
if(!storeName){ if(!storeName){
...@@ -185,6 +192,7 @@ class CollegeInfoPage extends React.Component { ...@@ -185,6 +192,7 @@ class CollegeInfoPage extends React.Component {
hasImgReady, hasImgReady,
logo, logo,
cutImageBlob, cutImageBlob,
imageFile
} = this.state; } = this.state;
return ( return (
<div className="page college-info-page"> <div className="page college-info-page">
...@@ -242,7 +250,7 @@ class CollegeInfoPage extends React.Component { ...@@ -242,7 +250,7 @@ class CollegeInfoPage extends React.Component {
onSelect={this.handleSelectCover} onSelect={this.handleSelectCover}
/> />
} }
<Modal {/* <Modal
title="设置图片" title="设置图片"
width={1080} width={1080}
visible={visible} visible={visible}
...@@ -300,7 +308,10 @@ class CollegeInfoPage extends React.Component { ...@@ -300,7 +308,10 @@ class CollegeInfoPage 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/course-manage/components/AddLiveBasic.jsx
...@@ -14,6 +14,7 @@ import StoreService from "@/domains/store-domain/storeService"; ...@@ -14,6 +14,7 @@ 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 Cropper from 'react-cropper'; import Cropper from 'react-cropper';
import ImgClipModal from '@/components/ImgClipModal'
import 'cropperjs/dist/cropper.css'; import 'cropperjs/dist/cropper.css';
import './AddLiveBasic.less'; import './AddLiveBasic.less';
...@@ -50,16 +51,6 @@ class AddLiveBasic extends React.Component { ...@@ -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 = () => { handleResetCoverUrl = () => {
const { data: { coverUrl } } = this.props; const { data: { coverUrl } } = this.props;
...@@ -88,11 +79,10 @@ class AddLiveBasic extends React.Component { ...@@ -88,11 +79,10 @@ class AddLiveBasic extends React.Component {
} }
} }
handleSelectCover = (file) => { handleSelectCover = (file) => {
this.setState( this.setState({
{
visible: true, visible: true,
}, imageFile:file
) });
// this.uploadImage(file); // this.uploadImage(file);
} }
...@@ -260,24 +250,6 @@ class AddLiveBasic extends React.Component { ...@@ -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>} /> <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
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 && {showSelectFileModal &&
<SelectPrepareFileModal <SelectPrepareFileModal
key="basic" key="basic"
...@@ -293,7 +265,10 @@ class AddLiveBasic extends React.Component { ...@@ -293,7 +265,10 @@ class AddLiveBasic extends React.Component {
onSelect={this.handleSelectCover} onSelect={this.handleSelectCover}
/> />
} }
<Modal { visible &&
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/>
}
{/* <Modal
title="设置图片" title="设置图片"
width={1080} width={1080}
visible={visible} visible={visible}
...@@ -317,10 +292,10 @@ class AddLiveBasic extends React.Component { ...@@ -317,10 +292,10 @@ 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 cutImg = this.state.cropperInstace.getCroppedCanvas().toDataURL();
const cutImageBlob = this.convertBase64UrlToBlob(cutImg) const cutImageBlob = this.convertBase64UrlToBlob(cutImg)
this.getSignature(cutImageBlob); this.getSignature(cutImageBlob);
...@@ -330,7 +305,7 @@ class AddLiveBasic extends React.Component { ...@@ -330,7 +305,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"
...@@ -352,61 +327,8 @@ class AddLiveBasic extends React.Component { ...@@ -352,61 +327,8 @@ 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:'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> </div>
</Modal> </Modal> */}
</div> </div>
) )
} }
......
src/modules/course-manage/video-course/AddVideoCourse.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-05 10:07:47 * @Date: 2020-08-05 10:07:47
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @LastEditTime: 2021-06-30 18:07:32 * @LastEditTime: 2021-07-01 13:59:16
* @Description: 视频课新增/编辑页 * @Description: 视频课新增/编辑页
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -418,80 +418,84 @@ class AddVideoCourse extends React.Component { ...@@ -418,80 +418,84 @@ class AddVideoCourse 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, 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) => {
...@@ -514,16 +518,16 @@ class AddVideoCourse extends React.Component { ...@@ -514,16 +518,16 @@ class AddVideoCourse extends React.Component {
coverId: coverId coverId: coverId
}) })
} }
// 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 {
pageType, pageType,
...@@ -727,7 +731,7 @@ class AddVideoCourse extends React.Component { ...@@ -727,7 +731,7 @@ class AddVideoCourse extends React.Component {
/> />
)} )}
{ visible && { visible &&
<ImgClipModal visible={visible}/> <ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/>
} }
{/* <Modal {/* <Modal
title='设置图片' 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