取消上传图片，

src/views/CalligraphyMaster/cread.vue

@@ -216,7 +216,7 @@
           <div @click="changeSize">
             <img src="../../assets/teacherdev/sfds-tailoring.png" alt="" />
           </div>
-          <el-upload
+          <!-- <el-upload
             :accept="'.png,.jpg'"
             class="upload-demo"
             :show-file-list="false"
@@ -234,7 +234,7 @@
             <div>
               <img src="../../assets/teacherdev/sfds-image.png" alt="" />
             </div>
-          </el-upload>
+          </el-upload> -->
 
           <div @click="addText">
             <img src="../../assets/teacherdev/sfds-text.png" alt="" />
@@ -603,10 +603,6 @@ export default {
     },
     // 裁剪
     changeSize() {
-      if (!this.instance) {
-        this.$message.warning("请先上传图片");
-        return;
-      }
       this.instance.ui._actions.crop.cancel();
     },
     initCanvasImage() {
@@ -616,100 +612,94 @@ export default {
         spinner: "el-icon-loading",
         background: "rgba(0, 0, 0, 0.7)",
       });
-      // 直接使用跨域  请求文件流转url 再使用
-      WebFileDownload({
-        FileID: this.fileList[0].file_id,
-      }).then((res) => {
-        const objectUrl = window.URL.createObjectURL(res);
-        this.instance = new ImageEditor(document.querySelector("#imgCanvas"), {
-          includeUI: {
-            loadImage: {
-              path: objectUrl,
-              name: "image",
-            },
-            menu: [
-              "resize",
-              "crop",
-              "rotate",
-              "draw",
-              "shape",
-              "icon",
-              "text",
-              "filter",
-            ], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask
-            initMenu: "crop", // 默认打开的菜单项
-            menuBarPosition: "bottom", // 菜单所在的位置
-            locale: locale_zh, // 本地化语言为中文
-            theme: customTheme, // 自定义样式
+      // const objectUrl = window.URL.createObjectURL("");
+      this.instance = new ImageEditor(document.querySelector("#imgCanvas"), {
+        includeUI: {
+          loadImage: {
+            path: "https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675",
+            name: "image",
           },
-          cssMaxWidth: this.form.width, // canvas 最大宽度
-          cssMaxHeight: this.form.heigt, // canvas 最大高度
-        });
-        let fontArray = [
-          "Arial",
-          "Arial Black",
-          "Caveat",
-          "Comic Sans MS",
-          "Courier New",
-          "Georgia1",
-          "Impact",
-          "Lobster Two",
-          "Lucida Console",
-          "Luckiest Guy",
-          "Open Sans",
-          "Pacifico",
-          "Palatino Linotype",
-          "Press Start 2P",
-          "Roboto",
-          "Tahoma",
-          "Tangerine",
-          "Times New Roman",
-          "Tourney",
-          "Ultra",
-          "Verdana",
-          "Symbol",
-          "Webdings",
-          "Wingdings",
-        ];
+          menu: [
+            "resize",
+            "crop",
+            "rotate",
+            "draw",
+            "shape",
+            "icon",
+            "text",
+            "filter",
+          ], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask
+          initMenu: "crop", // 默认打开的菜单项
+          menuBarPosition: "bottom", // 菜单所在的位置
+          locale: locale_zh, // 本地化语言为中文
+          theme: customTheme, // 自定义样式
+        },
+        cssMaxWidth: this.form.width, // canvas 最大宽度
+        cssMaxHeight: this.form.heigt, // canvas 最大高度
+      });
+      let fontArray = [
+        "Arial",
+        "Arial Black",
+        "Caveat",
+        "Comic Sans MS",
+        "Courier New",
+        "Georgia1",
+        "Impact",
+        "Lobster Two",
+        "Lucida Console",
+        "Luckiest Guy",
+        "Open Sans",
+        "Pacifico",
+        "Palatino Linotype",
+        "Press Start 2P",
+        "Roboto",
+        "Tahoma",
+        "Tangerine",
+        "Times New Roman",
+        "Tourney",
+        "Ultra",
+        "Verdana",
+        "Symbol",
+        "Webdings",
+        "Wingdings",
+      ];
 
-        let fontSelectHTML =
-          '<select #fontselect class="form-select font-selector">';
-        for (let i = 0; i < fontArray.length; i++) {
-          let selected = "";
-          if (i == 0) {
-            selected = "selected";
-          }
-          fontSelectHTML +=
-            '<option style="font-family:' +
-            fontArray[i] +
-            ' !important;" value="' +
-            fontArray[i] +
-            '" ' +
-            selected +
-            ">" +
-            fontArray[i] +
-            "</option>";
+      let fontSelectHTML =
+        '<select #fontselect class="form-select font-selector">';
+      for (let i = 0; i < fontArray.length; i++) {
+        let selected = "";
+        if (i == 0) {
+          selected = "selected";
         }
-        fontSelectHTML += "</select>";
-
-        let textMenuAlign = document.querySelector(
-          ".tui-image-editor-menu-text .tie-text-align-button"
-        );
-        textMenuAlign.insertAdjacentHTML("afterbegin", fontSelectHTML);
+        fontSelectHTML +=
+          '<option style="font-family:' +
+          fontArray[i] +
+          ' !important;" value="' +
+          fontArray[i] +
+          '" ' +
+          selected +
+          ">" +
+          fontArray[i] +
+          "</option>";
+      }
+      fontSelectHTML += "</select>";
 
-        document
-          .querySelector(".font-selector")
-          .addEventListener("change", () =>
-            this.TUI_updateFontOnText($(".font-selector option:selected").val())
-          );
-        this.instance.on("objectActivated", (props) => {
-          this.TUI_selectedItem = props;
-          this.TUI_updateFontSelected(props);
-          console.log("TUI_selectedItem", props);
-        });
+      let textMenuAlign = document.querySelector(
+        ".tui-image-editor-menu-text .tie-text-align-button"
+      );
+      textMenuAlign.insertAdjacentHTML("afterbegin", fontSelectHTML);
 
-        this.loading.close();
+      document
+        .querySelector(".font-selector")
+        .addEventListener("change", () =>
+          this.TUI_updateFontOnText($(".font-selector option:selected").val())
+        );
+      this.instance.on("objectActivated", (props) => {
+        this.TUI_selectedItem = props;
+        this.TUI_updateFontSelected(props);
+        console.log("TUI_selectedItem", props);
       });
+      this.loading.close();
     },
     TUI_updateFontOnText(font) {
       console.log("TUI_updateFontOnText", font, this.TUI_selectedItem.id);
@@ -776,7 +766,9 @@ export default {
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.initCanvasImage();
+  },
   //生命周期-创建之前
   beforeCreated() {},
   //生命周期-挂载之前
@@ -1048,6 +1040,7 @@ export default {
 </style>
 <style lang="scss">
 .CalligraphyMaster-cread {
+  // 图片编辑器操作栏
   .tui-image-editor-controls {
     display: none;
   }

src/views/teacher-dev/index.vue

@@ -44,9 +44,9 @@
     </div>
     <!-- 主要信息列表 -->
     <div class="main" v-loading="loading">
-      <!-- <div id="TEACHINGTOOL">
+      <div id="TEACHINGTOOL">
         <TeachingTool v-if="textAnalyseShow" />
-      </div> -->
+      </div>
       <div id="TEXTBOOK" v-if="textBookList">
         <Textbook v-if="textBookList.data" :classList="textBookList.data" />
       </div>