修复导出bug

src/component/HomePage/ExportModel.vue

@@ -277,7 +277,6 @@
 					<div>all</div>
 				</div>
 			</div>
-			
 			<div class="SRExport_img">
 				<div class="SRExport_img_item_box" v-for="item in allExportSR" @click="selectImg(item)">
 					<input type="checkbox" v-model="item.checked">
@@ -310,6 +309,7 @@ import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JScanvasMouseMov
 import { useI18n } from "vue-i18n";
 import {isMoible,calculateGradientCoordinate,base64ToFile} from '@/tool/util'
 import publish from "@/component/WorksPage/publish.vue";
+import { connect } from "echarts";
 
 export default defineComponent({
     components: {
@@ -326,7 +326,7 @@ export default defineComponent({
 		})
 
         let showUpgradePlan = ref(false);
-        let canvas = reactive({});
+        let canvas = ref({});
         // let canvasDom = ref()
         let canvasWH = ref({
             width: 400,
@@ -363,11 +363,11 @@ export default defineComponent({
 		let isLoadCanvas = false//撤回或者反撤回false为撤回
 		let userlikeGroupId = 0
         let init = (productData) => {
+            showUpgradePlan.value = true;
 			userlikeGroupId = productData.userlikeGroupId
 			canvasWH.value.height = 100
 			normalCanvasState.value = []
 			reverseCanvasState.value = []
-            showUpgradePlan.value = true;
 			allBoardData.value.likeDesignCollectionList =
                     likeDesignCollectionList;
 			allBoardData.value[productData.key] = productData.imgList;
@@ -470,6 +470,7 @@ export default defineComponent({
 									//循环渲染顺序
 										
 									let imgWidth = setImageWidth(key); //这是设置画布等宽
+									// alert(imgWidth)
 									let sketchGroupingItem = [];
 									if (
 										item == "moodboardFiles" &&
@@ -501,62 +502,66 @@ export default defineComponent({
 														allItem.designOutfitUrl;
 												}
 												fabric.Image.fromURL(itemCanvasImg,(img) => {
-													let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
+													img.on('added', () => {
-													if(key == "sketchboardFiles"){
+														img.set({ crossOrigin: 'anonymous' });
-														if(allItemIndex == 0){
+														let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
-															position.x = 0;
+														if(key == "sketchboardFiles"){
-															position.y = maxHeight;
+															if(allItemIndex == 0){
-														}
+																position.x = 0;
-													}else{
+																position.y = maxHeight;
-														if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
+															}
-															position.x = 0;
+														}else{
-															position.y = maxHeight;
+															if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
-														}
+																position.x = 0;
-													}
+																position.y = maxHeight;
-													setCanvasImage(img,key,position.x,position.y,allItem)//设置图片
-													position.height = img.height * scaleWH + margin;
-													if (key == "sketchboardFiles") {
-														if (sketchGroupingItem.length <3) {
-															sketchGroupingItem.push(JSON.parse(JSON.stringify(position)));
-														}
-														if (sketchGroupingItem.length >2) {
-															let sketchXyIndex = {
-																maxIndex: 0,
-																maxNum: 0,
-																minNum: 999999,
-																minIndex: 0,
-															};
-															sketchGroupingItem.forEach(
-																(sketchItem,sketchIndex) => {
-																	if (sketchItem.y + sketchItem.height < sketchXyIndex.minNum) {
-																		sketchXyIndex.minNum = sketchItem.y + sketchItem.height
-																		sketchXyIndex.minIndex = sketchIndex;
-																	}
-																	if (sketchItem.y + sketchItem.height > sketchXyIndex.maxNum) {
-																		sketchXyIndex.maxNum = sketchItem.y + sketchItem.height
-																		sketchXyIndex.maxIndex = sketchIndex;
-																	}
-																}
-															);
-															sketchGroupingItem[sketchXyIndex.minIndex].y = sketchXyIndex.minNum
-															// sketchGroupingItem[sketchXyIndex.maxIndex].y = sketchXyIndex.maxNum
-															if (allBoardData.value[key].length == allItemIndex + 1) {
-																maxHeight = sketchXyIndex.maxNum
-															} else {
-																position = sketchGroupingItem[sketchXyIndex.minIndex];
 															}
 														}
-													}
+														setCanvasImage(img,key,position.x,position.y,allItem)//设置图片
-													if(key == "sketchboardFiles" && sketchGroupingItem.length >2){
+														position.height = img.height * scaleWH + margin;
-													}else{
+														if (key == "sketchboardFiles") {
-														position.x += img.width * scaleWH + margin;
+															if (sketchGroupingItem.length <3) {
-													}
+																sketchGroupingItem.push(JSON.parse(JSON.stringify(position)));
-													img.lock_rotation = true;
+															}
-													canvas.add(img);
+															if (sketchGroupingItem.length >2) {
-													oldKey = key;
+																let sketchXyIndex = {
-													// setTimeout(() => {
+																	maxIndex: 0,
+																	maxNum: 0,
+																	minNum: 999999,
+																	minIndex: 0,
+																};
+																sketchGroupingItem.forEach(
+																	(sketchItem,sketchIndex) => {
+																		if (sketchItem.y + sketchItem.height < sketchXyIndex.minNum) {
+																			sketchXyIndex.minNum = sketchItem.y + sketchItem.height
+																			sketchXyIndex.minIndex = sketchIndex;
+																		}
+																		if (sketchItem.y + sketchItem.height > sketchXyIndex.maxNum) {
+																			sketchXyIndex.maxNum = sketchItem.y + sketchItem.height
+																			sketchXyIndex.maxIndex = sketchIndex;
+																		}
+																	}
+																);
+																sketchGroupingItem[sketchXyIndex.minIndex].y = sketchXyIndex.minNum
+																// sketchGroupingItem[sketchXyIndex.maxIndex].y = sketchXyIndex.maxNum
+																if (allBoardData.value[key].length == allItemIndex + 1) {
+																	maxHeight = sketchXyIndex.maxNum
+																} else {
+																	position = sketchGroupingItem[sketchXyIndex.minIndex];
+																}
+															}
+														}
+														if(key == "sketchboardFiles" && sketchGroupingItem.length >2){
+														}else{
+															position.x += img.width * scaleWH + margin;
+														}
+														let str = `${img.width} + ${scaleWH}`
+														img.lock_rotation = true;
+														oldKey = key;
 														resolve()
-													// }, 1000);
+													})
+													
+													canvas.add(img);
+													
 												},{ crossOrigin: "Anonymous" });
 											}
 										});
@@ -793,6 +798,7 @@ export default defineComponent({
                 let xmlhttp = new XMLHttpRequest();
                 xmlhttp.open("GET", url, true);
                 xmlhttp.responseType = "blob";
+				xmlhttp.withCredentials = false; 
                 xmlhttp.onload = function () {
                     if (this.status == 200) {
                         resolve(this.response);
@@ -812,15 +818,27 @@ export default defineComponent({
                     // 下载文件, 并存成ArrayBuffer对象(blob)
                     zip.file(item.name, data, { binary: true }); // 逐个添加文件
                     cache[item.title] = data;
-                });
+                })
                 promises.push(promise);
             }
-            Promise.all(promises)
+			Promise.all(promises)
                 .then(() => {
+					function downloadBlob(blob, filename) {
+						const link = document.createElement('a');
+						const url = URL.createObjectURL(blob);
+						link.href = url;
+						link.download = filename;
+						document.body.appendChild(link);
+						link.click();
+						URL.revokeObjectURL(url);
+						document.body.removeChild(link);
+					}
                     zip.generateAsync({ type: "blob" }).then((content) => {
                         // 生成二进制流
-                        FileSaver.saveAs(content, "DesignFiles"); // 利用file-saver保存文件  自定义文件名
+						downloadBlob(content,'DesignFiles')
+                        // FileSaver.saveAs(content, "DesignFiles"); // 利用file-saver保存文件  自定义文件名
                         isShowMark.value = false;
+
                     });
 					setSubmit()//导出的时候保存
 					initAligningGuidelines(canvas,true)