|
|
@@ -1,9 +1,7 @@
|
|
|
<template>
|
|
|
<div class="board">
|
|
|
<!--<BoardHead></BoardHead>-->
|
|
|
- <div v-show='this.$store.state.isRenderingPDFNow' class="render-info" >
|
|
|
- {{this.$store.state.currentPage+ '/' + totalpage }} {{$t("board['正在努力加载，请稍等...']")}}
|
|
|
- </div>
|
|
|
+ <div v-show="this.$store.state.isRenderingPDFNow" class="render-info">{{ this.$store.state.currentPage + '/' + totalpage }} {{ $t("board['正在努力加载，请稍等...']") }}</div>
|
|
|
<div class="top-right-info">
|
|
|
<p class="class-num" @click="showStudentList()" v-if="classNum"><svg-icon icon-class="qrcode" class="q-icon" style="margin-top:-6px;font-weight: bold;margin-left:2px" />{{ classNum }}</p>
|
|
|
<div class="pdfnum" @click="openSideBar()">
|
|
|
@@ -251,7 +249,7 @@
|
|
|
</div>
|
|
|
|
|
|
<!--新版Qrcode與學生名單彈窗-->
|
|
|
- <div class="student-List" v-show="isShowStudentList == true">
|
|
|
+ <div class="student-List" v-show="isShowStudentList == true&&!modalUpload">
|
|
|
<div v-if="students.length != 0" class="student-length"><svg-icon icon-class="students" class="students-icon" />{{ students.length }}</div>
|
|
|
<div class="col-wrap">
|
|
|
<div class="qrcode-group" :class="{ 'qrcode-groupleft': students.length != 0 }">
|
|
|
@@ -1115,13 +1113,13 @@ export default {
|
|
|
},
|
|
|
handleUploadError() {
|
|
|
this.beginPdfshowLoading()
|
|
|
- this.$Message.error(this.$t("board['上传失败！请查看PDF页数是否超过50页 是否符合标准']"))
|
|
|
+ this.$Message.error(this.$t("board['上传失败！请查看PDF页数是否超过20页 是否符合标准']"))
|
|
|
this.modalUpload = true
|
|
|
this.modalUploadType = true
|
|
|
},
|
|
|
HihandleUploadError() {
|
|
|
this.beginPdfshowLoading()
|
|
|
- this.$Message.error(this.$t("board['上传失败！请查看PDF页数是否超过50页 是否符合标准']"))
|
|
|
+ this.$Message.error(this.$t("board['上传失败！请查看PDF页数是否超过20页 是否符合标准']"))
|
|
|
},
|
|
|
upload() {
|
|
|
this.modalUpload = false
|
|
|
@@ -2708,7 +2706,7 @@ export default {
|
|
|
|
|
|
let stageImg = that.stage.toDataURL({ mimeType: 'image/jpeg', quality: 0.1, pixelRatio: 0.5 }) //降低側邊縮圖畫素 // 画布截图{mimeType:"image/jpeg",quality: 0.1,pixelRatio:0.5}
|
|
|
that.$store.state.imgArr[slide - 1] = stageImg
|
|
|
-
|
|
|
+
|
|
|
//拍完照就刪掉白色背景
|
|
|
that.layer.children.forEach(item => {
|
|
|
if (item.className == 'Rect' && item.attrs.name == 'whiteRect') {
|
|
|
@@ -2716,44 +2714,42 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
|
|
|
- let oldsaveArr = that.saveArr[slide - 1 + '']
|
|
|
- let layerInfo = that.layer.clone() // 画布内容提取
|
|
|
+ let oldsaveArr = that.saveArr[slide - 1 + '']
|
|
|
+ let layerInfo = that.layer.clone() // 画布内容提取
|
|
|
//切換頁stage 背景沒load完消失不能直接用會存到刪掉底圖的狀態，應從舊檔拉回
|
|
|
- if(oldsaveArr){
|
|
|
- oldsaveArr.children.forEach(item => {
|
|
|
- if (item.attrs.name == 'boardPdfBg') {
|
|
|
-
|
|
|
- if (layerInfo.children.findIndex(x => x.attrs.name == 'boardPdfBg') == -1) {
|
|
|
- let imageObj = new Image()
|
|
|
- imageObj.setAttribute('crossOrigin', 'Anonymous')
|
|
|
- imageObj.src = item.attrs.src
|
|
|
- imageObj.onload =() => {
|
|
|
-
|
|
|
- Konva.Image.fromURL(item.attrs.src, function(image) {
|
|
|
- let ratio = (window.innerHeight / image.height()).toFixed(2)
|
|
|
- let stageXWidth = window.innerWidth > image.width() * ratio ? (window.innerWidth - image.width() * ratio) / 2 : (image.width() * ratio - window.innerWidth) / 2
|
|
|
- let stageX = stageXWidth && image.width() !== '' ? stageXWidth : 0
|
|
|
- let locationY = ''
|
|
|
-
|
|
|
- image.setAttrs({
|
|
|
- x: stageX,
|
|
|
- y: locationY ? parseInt(locationY) : 0,
|
|
|
- width: image.width() * ratio,
|
|
|
- height: image.height() * ratio,
|
|
|
- // image: imageObj,
|
|
|
- src: item.attrs.src,
|
|
|
- name: 'boardPdfBg'
|
|
|
+ if (oldsaveArr) {
|
|
|
+ oldsaveArr.children.forEach(item => {
|
|
|
+ if (item.attrs.name == 'boardPdfBg') {
|
|
|
+ if (layerInfo.children.findIndex(x => x.attrs.name == 'boardPdfBg') == -1) {
|
|
|
+ let imageObj = new Image()
|
|
|
+ imageObj.setAttribute('crossOrigin', 'Anonymous')
|
|
|
+ imageObj.src = item.attrs.src
|
|
|
+ imageObj.onload = () => {
|
|
|
+ Konva.Image.fromURL(item.attrs.src, function(image) {
|
|
|
+ let ratio = (window.innerHeight / image.height()).toFixed(2)
|
|
|
+ let stageXWidth = window.innerWidth > image.width() * ratio ? (window.innerWidth - image.width() * ratio) / 2 : (image.width() * ratio - window.innerWidth) / 2
|
|
|
+ let stageX = stageXWidth && image.width() !== '' ? stageXWidth : 0
|
|
|
+ let locationY = ''
|
|
|
+
|
|
|
+ image.setAttrs({
|
|
|
+ x: stageX,
|
|
|
+ y: locationY ? parseInt(locationY) : 0,
|
|
|
+ width: image.width() * ratio,
|
|
|
+ height: image.height() * ratio,
|
|
|
+ // image: imageObj,
|
|
|
+ src: item.attrs.src,
|
|
|
+ name: 'boardPdfBg'
|
|
|
+ })
|
|
|
+ //加載要儲存到stageInfo 的序列化資料
|
|
|
+ layerInfo.add(image)
|
|
|
+ image.moveToBottom()
|
|
|
+ // await that.layer.draw()
|
|
|
})
|
|
|
- //加載要儲存到stageInfo 的序列化資料
|
|
|
- layerInfo.add(image)
|
|
|
- image.moveToBottom()
|
|
|
- // await that.layer.draw()
|
|
|
- })
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- })}
|
|
|
-
|
|
|
+ })
|
|
|
+ }
|
|
|
|
|
|
console.log(layerInfo, '最新的背景圖次序')
|
|
|
|
|
|
@@ -4410,62 +4406,29 @@ export default {
|
|
|
async exportPDF() {
|
|
|
const doc = new jsPDF('l', 'px', [window.innerWidth, window.innerHeight])
|
|
|
|
|
|
- //先保存當前layer
|
|
|
- let layerInfo = await this.layer.clone()
|
|
|
-
|
|
|
this.$Message.loading(this.$t("board['轉檔匯出中請稍候']"))
|
|
|
- this.saveStage()
|
|
|
let that = this
|
|
|
- for (let i = 0; i <= this.$store.state.imgArr.length; i++) {
|
|
|
- await this.pen(i).then(res => {
|
|
|
- if (res === 200) {
|
|
|
- let background = new Konva.Rect({
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- fill: 'white',
|
|
|
- width: window.innerWidth,
|
|
|
- height: window.innerHeight,
|
|
|
- illLinearGradientStartPoint: { x: 0, y: 0 },
|
|
|
- listening: false,
|
|
|
- name: 'whiteRect'
|
|
|
- })
|
|
|
- that.layer.add(background)
|
|
|
- background.moveToBottom()
|
|
|
- that.layer.draw()
|
|
|
-
|
|
|
- that.stage.on('dragmove', () => {
|
|
|
- background.absolutePosition({ x: 0, y: 0 })
|
|
|
- })
|
|
|
-
|
|
|
- let stageImg = that.$store.state.stage.toDataURL() // 画布截图
|
|
|
-
|
|
|
- //拍完照就刪掉白色背景，避免預設的白色PDF底圖輸出會產生淡淡灰色外框
|
|
|
- that.layer.children.forEach(item => {
|
|
|
- if (item.className == 'Rect' && item.attrs.name == 'whiteRect') {
|
|
|
- item.destroy()
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- let img = new Image()
|
|
|
-
|
|
|
- img.onload = function() {
|
|
|
- doc.addImage(stageImg, 'JPEG', 0, 0, img.width, img.height)
|
|
|
- if (i < that.$store.state.imgArr.length - 1) {
|
|
|
- doc.addPage()
|
|
|
- }
|
|
|
- if (i == that.$store.state.imgArr.length - 1) {
|
|
|
- doc.save('HiTeachCC-export.pdf')
|
|
|
- }
|
|
|
+ for (let i = 0; i < this.totalpage; i++) {
|
|
|
+ this.pen(i).then(res => {
|
|
|
+ console.log(res, that.$store.state.stage.toDataURL())
|
|
|
+ let stageImg = that.$store.state.stage.toDataURL() // 画布截图
|
|
|
+
|
|
|
+ let img = new Image()
|
|
|
+
|
|
|
+ img.onload = function() {
|
|
|
+ doc.addImage(stageImg, 'JPEG', 0, 0, img.width, img.height)
|
|
|
+ doc.addPage()
|
|
|
+ // if (i < that.totalpage.length - 1) {
|
|
|
+ // //
|
|
|
+ // }
|
|
|
+ if (i == that.totalpage - 1) {
|
|
|
+ doc.save('HiTeachCC-export.pdf')
|
|
|
}
|
|
|
- console.log(stageImg)
|
|
|
- img.src = stageImg
|
|
|
}
|
|
|
+ console.log(stageImg)
|
|
|
+ img.src = stageImg
|
|
|
})
|
|
|
}
|
|
|
-
|
|
|
- //把被渲染PDF頁數清掉的layerInfo 重繪到舞台
|
|
|
- this.saveArr[this.$store.state.carouselSlide - 1] = layerInfo
|
|
|
- this.rendererinof(this.$store.state.carouselSlide - 1)
|
|
|
},
|
|
|
add() {
|
|
|
let zoominfo = this.$store.state.zoom
|
|
|
@@ -5258,10 +5221,10 @@ export default {
|
|
|
this.eliminatepage()
|
|
|
}
|
|
|
localStorage.setItem('activityRecordNumberS', this.activityRecordNumberS)
|
|
|
-
|
|
|
+
|
|
|
if (localStorage.getItem('classNum') != '' && localStorage.getItem('stageInfo') && localStorage.getItem('idArr')) {
|
|
|
- this.$store.state.isRenderingPDFNow=false
|
|
|
- if (this.$store.state.imgArr.idArr == undefined) {
|
|
|
+ this.$store.state.isRenderingPDFNow = false
|
|
|
+ if (this.$store.state.imgArr.idArr == undefined) {
|
|
|
this.$store.state.imgArr.idArr = JSON.parse(localStorage.getItem('idArr'))
|
|
|
}
|
|
|
|
