Skip to content

P
pica.cloud.web-education-admin
提交 d2a2a0e8 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

上传讲师图片

上级 916ea0c9
隐藏空白字符变更
内嵌 并排
正在显示 包含 355 行增加 和 41 行删除
src/components/common/cropper-img copy 2.vue 0 → 100755
浏览文件 @ d2a2a0e8
<template>
<div class="rc-cropper" v-if="originImg">
<div :class="{'rc-cropper__canvasCrop1': cropOption.uploadType == 1, 'rc-cropper__canvasCrop2': cropOption.uploadType == 2}">
<img :src="originImg" v-if="!cropper">
<canvas :id="originImg" ref="canvas"/>
<div class="rc-cropper__iconCrop">
<el-tooltip content="确认裁剪" placement="right" v-if="cropper">
<el-button type="success" size="mini" @click="sureCropper()"><i class="el-icon-check"></i></el-button>
</el-tooltip>
</div>
</div>
</div>
</template>
<script>
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.min.css'
export default {
name: 'rc-cropper2',
props: {
cropOption: {
type: Object,
required: true,
default: () => {}
},
originImg: {
required: true
},
},
data () {
return {
cropper: null,
croppShow: false
}
},
mounted () {
this.drawImg()
},
destroyed() {
this.cropper && this.cropper.destroy();
},
methods: {
// 在canvas上绘制图片
drawImg () {
const _this = this
this.$nextTick(() => {
let canvas = document.getElementById(this.originImg)
if (canvas) {
// canvas.width = 1000
// canvas.height = 800
canvas.width = _this.cropOption.cvWidth;
canvas.height = _this.cropOption.cvHeight;
let ctx = canvas.getContext('2d')
ctx.clearRect(0, 0, canvas.width, canvas.height)
let img = new Image()
img.crossOrigin = 'Anonymous'
img.src = this.originImg
img.onload = function () {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
_this.initCropper()
}
}
})
},
// 显示裁剪框
initCropper () {
this.croppShow = true
this.cropper = new Cropper(this.$refs.canvas, {
checkCrossOrigin: true,
viewMode: 3,
zoomOnWheel: true, // 是否可以通过移动鼠标来放大图像
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: () => {
this.cropper.setData({
x: this.cropOption.offset_x,
y: this.cropOption.offset_y,
width: this.cropOption.width,
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();
// }
// },
})
},
// 确认裁剪
sureCropper () {
let _this = this
const cropParam = this.cropper.getData()
console.log('cropParam', cropParam);
this.cropper.getCroppedCanvas().toBlob(function (blob) {
let files = new window.File([blob], 'cropper.jpg');
console.log(files);
let oFileReader = new FileReader()
oFileReader.onloadend = function (e) {
let base64 = e.target.result
_this.$emit('getCropImg', base64, cropParam, files, _this.cropper)
}
oFileReader.readAsDataURL(blob)
}, 'image/jpeg')
}
}
}
</script>
<style scoped lang="scss">
.rc-cropper__canvasCrop1 {
/* border: 1px solid red; */
width: 800px;
height: 540px;
}
.rc-cropper__canvasCrop2 {
/* border: 1px solid red; */
width: 400px;
height: 300px;
}
.rc-cropper__iconCrop {
position: absolute;
// left: 46%;
right: 13%;
top: 15%;
}
.el-tooltip {
margin: 20px 4px;
display: block;
z-index: 10000;
}
</style>
src/components/common/cropper-img copy.vue 0 → 100755
浏览文件 @ d2a2a0e8
<template>
<div class="rc-cropper" v-if="originImg">
<div class="rc-cropper__canvasCrop2">
<img :src="originImg" v-if="!cropper">
<canvas :id="originImg" ref="canvas"/>
<div class="rc-cropper__iconCrop">
<el-tooltip content="确认裁剪" placement="right" v-if="cropper">
<el-button type="success" size="mini" @click="sureCropper()"><i class="el-icon-check"></i></el-button>
</el-tooltip>
</div>
</div>
</div>
</template>
<script>
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.min.css'
export default {
name: 'rc-cropper2',
props: {
cropOption: {
type: Object,
required: true,
default: () => {}
},
originImg: {
required: true
},
previewImg: {
type: String
}
},
data () {
return {
cropper: null,
croppShow: false
}
},
mounted () {
this.drawImg()
},
destroyed() {
this.cropper && this.cropper.destroy();
},
methods: {
// 在canvas上绘制图片
drawImg () {
const _this = this
this.$nextTick(() => {
let canvas = document.getElementById(this.originImg)
if (canvas) {
canvas.width = 1000
canvas.height = 800
let ctx = canvas.getContext('2d')
ctx.clearRect(0, 0, canvas.width, canvas.height)
let img = new Image()
img.crossOrigin = 'Anonymous'
img.src = this.originImg
img.onload = function () {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
_this.initCropper()
}
}
})
},
// 显示裁剪框
initCropper () {
this.croppShow = true
this.cropper = new Cropper(this.$refs.canvas, {
checkCrossOrigin: true,
viewMode: 3,
zoomOnWheel: true, // 是否可以通过移动鼠标来放大图像
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: () => {
this.cropper.setData({
x: this.cropOption.offset_x,
y: this.cropOption.offset_y,
width: this.cropOption.width,
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();
// }
// },
})
},
// 确认裁剪
sureCropper () {
let _this = this
const cropParam = this.cropper.getData()
console.log('cropParam', cropParam);
this.cropper.getCroppedCanvas().toBlob(function (blob) {
let files = new window.File([blob], 'cropper.jpg');
console.log(files);
let oFileReader = new FileReader()
oFileReader.onloadend = function (e) {
let base64 = e.target.result
_this.$emit('getCropImg', base64, cropParam, files, _this.cropper)
}
oFileReader.readAsDataURL(blob)
}, 'image/jpeg')
}
}
}
</script>
<style scoped lang="scss">
// .rc-cropper {
// position: relative;
// margin-top: 10px;
// img {
// width: 100%;
// height: 100%;
// }
// }
/* img {
width: 100%;
height: 100%;
} */
.rc-cropper__canvasCrop2 {
/* border: 1px solid red; */
width: 800px;
height: 540px;
}
.rc-cropper__iconCrop {
position: absolute;
/* left: 8%; */
left: 46%;
top: 10%;
}
.el-tooltip {
margin: 20px 4px;
display: block;
z-index: 10000;
}
</style>
margin: 20px 4px;
display: block;
z-index: 10000;
}
</style>
src/components/common/cropper-img.vue
浏览文件 @ d2a2a0e8
<template>
<div class="rc-cropper" v-if="originImg">
<div class="rc-cropper__canvasCrop2">
<div :class="{'rc-cropper__canvasCrop1': cropOption.uploadType == 1, 'rc-cropper__canvasCrop2': cropOption.uploadType == 2}">
<img :src="originImg" v-if="!cropper">
<canvas :id="originImg" ref="canvas"/>
<div class="rc-cropper__iconCrop">
......@@ -25,9 +25,6 @@ export default {
originImg: {
required: true
},
previewImg: {
type: String
}
},
data () {
return {
......@@ -48,8 +45,10 @@ export default {
this.$nextTick(() => {
let canvas = document.getElementById(this.originImg)
if (canvas) {
canvas.width = 1000
canvas.height = 800
// canvas.width = 1000
// canvas.height = 800
canvas.width = _this.cropOption.cvWidth;
canvas.height = _this.cropOption.cvHeight;
let ctx = canvas.getContext('2d')
ctx.clearRect(0, 0, canvas.width, canvas.height)
let img = new Image()
......@@ -120,31 +119,24 @@ export default {
</script>
<style scoped lang="scss">
// .rc-cropper {
// position: relative;
// margin-top: 10px;
// img {
// width: 100%;
// height: 100%;
// }
// }
/* img {
width: 100%;
height: 100%;
} */
.rc-cropper__canvasCrop2 {
.rc-cropper__canvasCrop1 {
/* border: 1px solid red; */
width: 800px;
height: 540px;
}
.rc-cropper__canvasCrop2 {
/* border: 1px solid red; */
width: 400px;
height: 300px;
}
.rc-cropper__iconCrop {
position: absolute;
/* left: 8%; */
left: 46%;
top: 10%;
// left: 46%;
right: 13%;
top: 15%;
}
.el-tooltip {
......
src/components/education/custom-resource/edit-course-dialog.vue
浏览文件 @ d2a2a0e8
......@@ -5,7 +5,7 @@
ref="testDialogRef"
title="上传课程"
:visible="dialogVisible"
@close="backToOrgCourse"
@close="close"
center
:close-on-click-modal="false"
:close-on-press-escape="false"
......@@ -86,7 +86,7 @@
:show-file-list="false"
:disabled="needShowUploadProcess || (formData.courseCustomChapterModels[0].courseCustomLectureModelList.length >= orgCourseInfo.limitModel.maxLimitVideoCount)"
>
<el-button slot="trigger" ref="uploadFileBtn" size="small" type="primary">点击上传</el-button>
<el-button slot="trigger" ref="uploadFileBtn" size="small" type="primary"><img style="width:12px;height:12px;position:relative;top:1px;" src="../../../assets/image/phrase3/icon-upload.png" /> <span style="font-size:14px;"> 上传文件</span></el-button>
<div slot="tip" class="el-upload__tip">
<span class="upload-tips">只支持MP4格式，课程视频最多上传100个，单文件最大2G</span>
<ul v-show="formData.courseCustomChapterModels[0].courseCustomLectureModelList.length" class="custom-list">
......@@ -106,7 +106,7 @@
:before-upload="beforeUploadVideo"
:show-file-list="false"
>
<img @click="replaceLecture(index)" class="replace" src="../../../assets/image/phrase3/close.png" />
<img @click="replaceLecture(index)" class="replace" src="../../../assets/image/phrase3/replace.png" />
</el-upload>
</div>
<img @click="deleteLecture(index)" class="delete" src="../../../assets/image/phrase3/close.png" />
......@@ -141,8 +141,8 @@
</li>
</ul>
<div style="color:red;position:absolute;top:60px;" v-if="noLecture && !formData.courseCustomChapterModels[0].courseCustomLectureModelList.length">请上传课程视频</div>
<div v-show="needShowUploadProcess" style="position:absolute;top:10px;left:90px;display:flex;">
<div style="flex:1;width: 360px;">
<div v-show="needShowUploadProcess" style="position:absolute;top:10px;left:100px;display:flex;">
<div style="flex:1;width: 358px;">
<span class="upload-process" :style="{'width': (uploadProgress/100 * 300) + 'px'}"></span>
</div>
<img @click="cancleUpload" style="widht:16px;height:16px;margin-top:3px;margin-left:8px;" src="../../../assets/image/phrase3/close.png" />
......@@ -333,7 +333,7 @@
<el-dialog
title="图片裁剪"
:visible.sync="showCropper"
width="900px"
:width="currentOption.cropDialogWidth"
center>
<div slot="title" style="text-align: left;">
<span style="font-weight: 700;">图片裁剪</span>
......@@ -367,23 +367,36 @@ export default {
oriUrl: '', // 原图
},
showCropper: false,
currentOption: {
offset_x: 120,
offset_y: 185,
width: 750,
height: 420
height: 420,
cvWidth: 1000,
cvHeight: 800,
uploadType: 1,
cropDialogWidth: '900px'
},
cropOption: {
offset_x: 120,
offset_y: 185,
width: 750,
height: 420
height: 420,
cvWidth: 1000,
cvHeight: 800,
uploadType: 1,
cropDialogWidth: '900px'
},
cropOption2: {
offset_x: 450,
offset_y: 350,
offset_x: 80,
offset_y: 60,
width: 88,
height: 88
height: 88,
cvWidth: 249,
cvHeight: 200,
uploadType: 2,
cropDialogWidth: '500px'
},
isReplaceUpload: false,
replaceLectureIndex: 0,
......@@ -578,11 +591,11 @@ export default {
cancleUpload() {
console.log('in cancleUpload');
if(window.QNSubscription) {
console.log('QNSubscription', QNSubscription);
window.QNSubscription.unsubscribe();
window.QNSubscription = null;
// console.log('QNSubscription', QNSubscription);
// window.QNSubscription.unsubscribe();
// window.QNSubscription = null;
}
this.$refs.uploadFileCom.abort();
// this.$refs.uploadFileCom.abort();
},
querySearch(queryString, cb) {
......@@ -982,7 +995,8 @@ export default {
}
.custom-list {
position: relative;
left: -78px;
left: 0px;
// left: -78px;
width: 580px;
display: flex;
flex-direction: column;
......
src/utils/qiniu-util.js
浏览文件 @ d2a2a0e8
......@@ -260,8 +260,6 @@ export const qiniuUpload = (self, file, filePath, previewId, progressId) => {
});
console.log(22222);
window.QNSubscription = subscription;
// return deferred.promise;
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或