提交 916ea0c9 编写于 作者: guangjun.yang's avatar guangjun.yang

剪裁及bug修改等

上级 b4b9422a
<template> <template>
<div class="rc-cropper" v-if="originImg"> <div class="rc-cropper" v-if="originImg">
<el-row>
<el-col>
<div class="rc-cropper__canvasCrop2"> <div class="rc-cropper__canvasCrop2">
<img :src="originImg" v-if="!cropper"> <img :src="originImg" v-if="!cropper">
<canvas :id="originImg" ref="canvas"/> <canvas :id="originImg" ref="canvas"/>
...@@ -11,13 +9,6 @@ ...@@ -11,13 +9,6 @@
</el-tooltip> </el-tooltip>
</div> </div>
</div> </div>
</el-col>
<!-- <el-col :span="10">
<div class="rc-cropper__previewImg">
<img :src="previewImg" id="previewImg"/>
</div>
</el-col> -->
</el-row>
</div> </div>
</template> </template>
<script> <script>
...@@ -47,6 +38,9 @@ export default { ...@@ -47,6 +38,9 @@ export default {
mounted () { mounted () {
this.drawImg() this.drawImg()
}, },
destroyed() {
this.cropper && this.cropper.destroy();
},
methods: { methods: {
// 在canvas上绘制图片 // 在canvas上绘制图片
drawImg () { drawImg () {
...@@ -54,8 +48,8 @@ export default { ...@@ -54,8 +48,8 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
let canvas = document.getElementById(this.originImg) let canvas = document.getElementById(this.originImg)
if (canvas) { if (canvas) {
canvas.width = 720 canvas.width = 1000
canvas.height = 480 canvas.height = 800
let ctx = canvas.getContext('2d') let ctx = canvas.getContext('2d')
ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.clearRect(0, 0, canvas.width, canvas.height)
let img = new Image() let img = new Image()
...@@ -74,8 +68,20 @@ export default { ...@@ -74,8 +68,20 @@ export default {
this.cropper = new Cropper(this.$refs.canvas, { this.cropper = new Cropper(this.$refs.canvas, {
checkCrossOrigin: true, checkCrossOrigin: true,
viewMode: 3, viewMode: 3,
zoomOnWheel: false, // 是否可以通过移动鼠标来放大图像 zoomOnWheel: true, // 是否可以通过移动鼠标来放大图像
aspectRatio: 3 / 2, dragMode: 'move',
// autoCropArea: 0.6,
// center: true,
// autoCrop: true,
restore: false,
modal: true,
guides: true,
highlight: true,
cropBoxMovable: true,
cropBoxResizable: false,
toggleDragModeOnDblclick: false,
// aspectRatio: 75/42,
// aspectRatio: 5/3,
ready: () => { ready: () => {
this.cropper.setData({ this.cropper.setData({
x: this.cropOption.offset_x, x: this.cropOption.offset_x,
...@@ -83,19 +89,28 @@ export default { ...@@ -83,19 +89,28 @@ export default {
width: this.cropOption.width, width: this.cropOption.width,
height: this.cropOption.height height: this.cropOption.height
}) })
} // this.cropper.zoomTo(1);
},
// zoom: function (event) {
// // Keep the image in its natural size
// if (event.detail.oldRatio === 1) {
// event.preventDefault();
// }
// },
}) })
// this.cropper = cropper
}, },
// 确认裁剪 // 确认裁剪
sureCropper () { sureCropper () {
let _this = this let _this = this
const cropParam = this.cropper.getData() const cropParam = this.cropper.getData()
console.log('cropParam', cropParam);
this.cropper.getCroppedCanvas().toBlob(function (blob) { this.cropper.getCroppedCanvas().toBlob(function (blob) {
let files = new window.File([blob], 'cropper.jpg');
console.log(files);
let oFileReader = new FileReader() let oFileReader = new FileReader()
oFileReader.onloadend = function (e) { oFileReader.onloadend = function (e) {
let base64 = e.target.result let base64 = e.target.result
_this.$emit('getCropImg', base64, cropParam) _this.$emit('getCropImg', base64, cropParam, files, _this.cropper)
} }
oFileReader.readAsDataURL(blob) oFileReader.readAsDataURL(blob)
}, 'image/jpeg') }, 'image/jpeg')
...@@ -103,11 +118,16 @@ export default { ...@@ -103,11 +118,16 @@ export default {
} }
} }
</script> </script>
<style > <style scoped lang="scss">
.rc-cropper {
position: relative; // .rc-cropper {
margin-top: 20px; // position: relative;
} // margin-top: 10px;
// img {
// width: 100%;
// height: 100%;
// }
// }
/* img { /* img {
width: 100%; width: 100%;
...@@ -115,14 +135,16 @@ export default { ...@@ -115,14 +135,16 @@ export default {
} */ } */
.rc-cropper__canvasCrop2 { .rc-cropper__canvasCrop2 {
width: 900px; /* border: 1px solid red; */
height: 760px; width: 800px;
height: 540px;
} }
.rc-cropper__iconCrop { .rc-cropper__iconCrop {
position: absolute; position: absolute;
left: 45%; /* left: 8%; */
top: 0%; left: 46%;
top: 10%;
} }
.el-tooltip { .el-tooltip {
...@@ -131,8 +153,4 @@ export default { ...@@ -131,8 +153,4 @@ export default {
z-index: 10000; z-index: 10000;
} }
.rc-cropper__previewImg {
width: 600px;
height: 400px;
}
</style> </style>
...@@ -9,12 +9,14 @@ ...@@ -9,12 +9,14 @@
<el-form ref="auditForm" :model="auditForm" label-width="120px"> <el-form ref="auditForm" :model="auditForm" label-width="120px">
<el-form-item label="拒绝原因:"> <el-form-item label="拒绝原因:">
<el-radio-group v-model="auditForm.label"> <el-radio-group v-model="auditForm.label">
<div v-for="item in refuseReasonList" :key="item">
<div style="padding-top: 12px;"> <div style="padding-top: 12px;">
<el-radio :label="refuseReasonList[0]"></el-radio> <el-radio :label="item"></el-radio>
</div> </div>
<div style="padding-top: 16px;">
<el-radio :label="refuseReasonList[1]"></el-radio>
</div> </div>
<!-- <div style="padding-top: 16px;">
<el-radio :label="refuseReasonList[1]"></el-radio>
</div> -->
<div style="padding-top: 16px;"> <div style="padding-top: 16px;">
<el-radio label="其他"></el-radio> <el-radio label="其他"></el-radio>
</div> </div>
......
...@@ -119,7 +119,7 @@ export const getFilePathForOSS = (file, fileName, folder) => { ...@@ -119,7 +119,7 @@ export const getFilePathForOSS = (file, fileName, folder) => {
} }
//文件类型 //文件类型
let ext = file.type; let ext = file.type || 'image/jpeg';
//后缀名 //后缀名
let suffix = file.name.substring(file.name.lastIndexOf(".") + 1); let suffix = file.name.substring(file.name.lastIndexOf(".") + 1);
//若为空则从name中获取---对wps格式的文件获取不到file.type //若为空则从name中获取---对wps格式的文件获取不到file.type
......
此差异已折叠。
...@@ -341,23 +341,15 @@ export const getFilePath = (file,fileName,folder) => { ...@@ -341,23 +341,15 @@ export const getFilePath = (file,fileName,folder) => {
* @returns {Promise} * @returns {Promise}
*/ */
export const doUpload = (self, file, filePath, previewId, progressId, fileType) => { export const doUpload = (self, file, filePath, previewId, progressId, fileType) => {
// var deferred = $q.defer();
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
if (isEmptyUtils(file) || isEmptyUtils(filePath)) { if (isEmptyUtils(file) || isEmptyUtils(filePath)) {
console.error('七牛上传失败:非法参数'); console.error('七牛上传失败:非法参数');
reject(); reject();
} }
let key = filePath ? filePath : getFilePath(file); let key = filePath ? filePath : getFilePath(file);
//修改状态为上传 //修改状态为上传
self.qiniuUploadStatus = true; self.qiniuUploadStatus = true;
// let token = "BRVB4TpxVFA5Wo6lIpfltmWKOltzGar46tvC3BlR:UHn0LDElwjP4jEZTXdq_1qV6_hw=:eyJzY29wZSI6InBpY2EtdGVzdCIsInJldHVybkJvZHkiOiJ7XCJrZXlcIjpcIiQoa2V5KVwiLFwiaGFzaFwiOlwiJChldGFnKVwiLFwiYnVja2V0XCI6XCIkKGJ1Y2tldClcIixcImZzaXplXCI6JChmc2l6ZSksXCJmbmFtZVwiOiQoZm5hbWUpLFwiZXh0XCI6JChleHQpfSIsImRlYWRsaW5lIjoxNTI5NDk0MTc1fQ==";
doQiniuAction1(fileType).then(function (token) { doQiniuAction1(fileType).then(function (token) {
let putExtra = { let putExtra = {
fname: file.name, //原文件名 fname: file.name, //原文件名
...@@ -396,27 +388,6 @@ export const doUpload = (self, file, filePath, previewId, progressId, fileType) ...@@ -396,27 +388,6 @@ export const doUpload = (self, file, filePath, previewId, progressId, fileType)
self.uploadProgress2 = Number(progress); self.uploadProgress2 = Number(progress);
} }
console.log('Progress2: ' + progress); console.log('Progress2: ' + progress);
//如果有进度条
/*if (isNotEmptyUtils(progressId)) {
let obj = $("#" + progressId);
//开始上传时,显示进度条
if (isNotEmptyUtils(obj.parent())) {
//修改状态为上传
// status = true;
self.qiniuUploadStatus = true;
obj.parent().removeClass("hidden");
obj.fadeIn("fast");
}
obj.css("width", progress + '%');
obj.text(progress + '%');
//上传完成,2秒后淡出进度条
if (progress === "100.00") {
//修改状态为非上传
// status = false;
self.qiniuUploadStatus = true;
obj.fadeOut(2000);
}
}*/
}; };
/** /**
...@@ -428,7 +399,6 @@ export const doUpload = (self, file, filePath, previewId, progressId, fileType) ...@@ -428,7 +399,6 @@ export const doUpload = (self, file, filePath, previewId, progressId, fileType)
setTimeout(function(){ setTimeout(function(){
result.key = res.key; result.key = res.key;
result.path = '/' + res.key; result.path = '/' + res.key;
// result.fullPath = domain + '/' + res.key + '_' + new Date().getTime();
if(!fileType) { // 图片 文件 if(!fileType) { // 图片 文件
console.log('---domain-------',domain) console.log('---domain-------',domain)
result.fullPath = domain + '/' + res.key; result.fullPath = domain + '/' + res.key;
...@@ -436,32 +406,12 @@ export const doUpload = (self, file, filePath, previewId, progressId, fileType) ...@@ -436,32 +406,12 @@ export const doUpload = (self, file, filePath, previewId, progressId, fileType)
console.log('----domain1------',domain1) console.log('----domain1------',domain1)
result.fullPath = domain1 + '/' + res.key; result.fullPath = domain1 + '/' + res.key;
} }
result.size = res.fsize; result.size = res.fsize;
result.name = res.fname ; result.name = res.fname ;
result.ext = res.ext; result.ext = res.ext;
// deferred.resolve(result);
resolve(result); resolve(result);
// self.model.qCloudUrl = result.fullPath;
// $("#introVideoLecture").attr("src", self.model.qCloudUrl);
//修改状态为非上传
// status = false;
self.qiniuUploadStatus = false; self.qiniuUploadStatus = false;
// if (isNotEmptyUtils(previewId)) {
// let address = domain + result.path;
// console.log('文件路径: ' + address);
// //显示图片
// let uplodImg = $('<img>').attr("src", address);
// let obj = $("#" + previewId);
// obj.empty().append(uplodImg);
// obj.css('max-width', '100%');
// }
},500); },500);
}; };
/** /**
...@@ -483,12 +433,6 @@ export const doUpload = (self, file, filePath, previewId, progressId, fileType) ...@@ -483,12 +433,6 @@ export const doUpload = (self, file, filePath, previewId, progressId, fileType)
}else { }else {
console.error(err); console.error(err);
} }
/*modalClick("提示", "上传失败!", "确定", function () {
$('#model-modify').modal('hide');
}, "", null);*/
// deferred.reject(new Error('七牛上传失败'));
// return deferred.promise;
return reject(new Error('七牛上传失败')); return reject(new Error('七牛上传失败'));
}; };
...@@ -497,11 +441,7 @@ export const doUpload = (self, file, filePath, previewId, progressId, fileType) ...@@ -497,11 +441,7 @@ export const doUpload = (self, file, filePath, previewId, progressId, fileType)
}); });
console.log(33333); // 保存到全局对象
window.QNSubscription = subscription; window.QNSubscription = subscription;
// return deferred.promise;
}); });
}; };
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
<div class="video-name"> <div class="video-name">
<span class="title"> <span class="title">
<span style="color: red;">*</span> <span style="color: red;">*</span>
<span class="video-title">视频名称</span> <span class="video-title">视频名称{{index + 1}}</span>
</span> </span>
<el-input <el-input
size="small" size="small"
...@@ -608,7 +608,7 @@ export default { ...@@ -608,7 +608,7 @@ export default {
if(!flag) { if(!flag) {
let lectureList = cData.courseCustomChapterModels[0].courseCustomLectureModelList; let lectureList = cData.courseCustomChapterModels[0].courseCustomLectureModelList;
for(let i = 0; i < lectureList.length; i ++) { for(let i = 0; i < lectureList.length; i ++) {
if(lectureList[i].nameCheck) { if(lectureList[i].nameCheck || lectureList[i].contentCheck) {
flag = true; flag = true;
break; break;
} }
...@@ -776,7 +776,7 @@ export default { ...@@ -776,7 +776,7 @@ export default {
margin-bottom: 10px; margin-bottom: 10px;
.title { .title {
display: inline-block; display: inline-block;
width: 70px; width: 80px;
text-align: right; text-align: right;
margin-right: 10px; margin-right: 10px;
} }
...@@ -801,7 +801,7 @@ export default { ...@@ -801,7 +801,7 @@ export default {
.video-name { .video-name {
.title { .title {
display: inline-block; display: inline-block;
width: 70px; width: 80px;
text-align: right; text-align: right;
margin-right: 10px; margin-right: 10px;
} }
......
此差异已折叠。
此差异已折叠。
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册