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