.

src/views/ppt_manage/newVersion/components/editor/ChooseCoverNew.vue

@@ -9,7 +9,7 @@
         v-dialogDrag center width="75%" top="5vh"
         @close="$emit('close')"
     >
-        <div class="container">
+        <div class="container" v-loading="coverLoading">
             <div class="edit-cover-wrap" @mousedown.stop="clickOutside">
                 <div class="cover">
                     <!-- 封面图 -->
@@ -39,8 +39,8 @@
                         <div class="cover-text-toolbar" @mousedown.stop></div>
                     </div>
                     <div class="dialog-btn">
-                        <el-button @click="saveCover">保存</el-button>
                         <el-button @click="changeBg">换一个模板</el-button>
+                        <el-button @click="saveCover">保存</el-button>
                     </div>
                 </div>
             </div>
@@ -56,6 +56,7 @@ import { BaseTextShape } from '@/views/ppt_manage/newVersion/utils/config';
 import {createRandomCode,caclShapePercentage} from "@/views/ppt_manage/newVersion/utils/untils";
 import {pptInterface} from '@/api/api.js';
 import {pptEnInterface} from '@/api/modules/pptEnApi.js';
+import html2canvas from 'html2canvas';
 export default {
     props: {
         isShowChooseCover: {
@@ -86,7 +87,8 @@ export default {
             copyEl:{}, //当前copy的元素
             pageData:{Title:''}, //封面标题，背景图等设置
             searchIndex:0,
-            choosedIndex:0
+            choosedIndex:0,
+            coverLoading:false,
         };
     },
     watch:{
@@ -118,18 +120,63 @@ export default {
                 return this.$message.warning("请输入PPT标题")
             }
             const coverContent = JSON.stringify(this.coverElList);
+            this.coverLoading=true
             //校验标题
             const pptId = this.$route.query.id || this.PptId||0
             const res = this.$parent.currentLang!=='en'
                 ?await pptInterface.pptTitleCheck({PptId:pptId,Title:this.pageData.Title})
                 :await pptEnInterface.pptTitleCheck({PptId:pptId,Title:this.pageData.Title})
             if(res.Ret===200){
+                const coverBase64 = await this.coverToCanvas()
+                this.coverLoading=false
                 this.$emit('saveCover', {
                         firstPage:Object.assign(this.firstPage,this.pageData),
-                        content:coverContent
+                        content:coverContent,
+                        covetImg:coverBase64||''
                     })
             }
         },
+        //封面截图
+        async coverToCanvas(){
+            console.log('start')
+            this.changeActEl({})
+            //editor-area
+            const canvasWrap = document.querySelector('.editor-area')
+            //将背景图清空,防止跨域的问题
+            if(!canvasWrap) return
+            canvasWrap.scrollTop = 0
+            canvasWrap.scrollLeft=0
+            const width = $('.editor-area').width()
+            const height = Number((width*0.7).toFixed(2))
+            console.log('width,height',width,height)
+            const cover = $('.editor-area')[0]
+            cover.style.backgroundImage = 'none'
+            let canvas = await html2canvas(
+                cover,
+                {
+                    useCORS: true,
+                    allowTaint:true,
+                    backgroundColor: `transparent`,
+                    /* scale: 2, */
+                    imageTimeout: 0,
+                    width:width,
+                    height:height
+                }
+            )
+            console.log('finished')
+            const url = canvas.toDataURL("image/png")
+            this.checkImg(url)
+            //转换完成后,将背景图设置回来
+            cover.style.backgroundImage = `url(${this.pptCoverList[this.choosedIndex]})`
+            return url
+        },
+            //测试用
+        checkImg(dataURL,fileType='png'){
+            let link = document.createElement('a')
+            link.href = dataURL
+            link.download = `test.${fileType}`
+            link.click()
+        },
         changeActEl(el){
             this.activeEl = el
         },