书法大师创建上传图片设置配色功能

src/views/CalligraphyMaster/cread.vue

@@ -201,14 +201,41 @@
             marginTop:
               changeType == 'text' || changeType == 'luminance' ? 0 : '32px',
           }"
-        ></div>
+        >
+          <canvas
+            id="canvas"
+            ref="imgCanvas"
+            :style="{
+              width: form.width + 'px',
+              height: form.height + 'px',
+              background: form.bg_color,
+            }"
+          ></canvas>
+        </div>
         <div class="bottom">
           <div>
             <img src="../../assets/teacherdev/sfds-tailoring.png" alt="" />
           </div>
-          <div>
-            <img src="../../assets/teacherdev/sfds-image.png" alt="" />
-          </div>
+          <el-upload
+            :accept="'.png,.jpg'"
+            class="upload-demo"
+            :show-file-list="false"
+            :action="url"
+            :on-preview="handlePreview"
+            :on-remove="handleRemove"
+            :multiple="true"
+            :on-exceed="handleExceed"
+            :on-success="handleSuccess"
+            :file-list="fileList"
+            :before-remove="beforeRemove"
+            :limit="1"
+            :before-upload="handlebeforeUplaod"
+          >
+            <div>
+              <img src="../../assets/teacherdev/sfds-image.png" alt="" />
+            </div>
+          </el-upload>
+
           <div @click="addText">
             <img src="../../assets/teacherdev/sfds-text.png" alt="" />
           </div>
@@ -229,6 +256,8 @@
 //例如：import 《组件名称》from ‘《组件路径》';
 import Header from "@/components/Header";
 import DragLine from "@/components/DragLine";
+import { getToken, removeToken } from "@/utils/auth";
+
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {
@@ -331,10 +360,29 @@ export default {
         fontColor: "#FFFFFF",
       },
       FontFamilySele: false,
+      loading: false,
+      fileList: [],
+      imgCtx: null,
     };
   },
   //计算属性 类似于data概念
-  computed: {},
+  computed: {
+    url() {
+      let userInfor = JSON.parse(getToken());
+      let UserCode = "",
+        UserType = "",
+        SessionID = "";
+      if (userInfor) {
+        UserCode = userInfor.user_code;
+        UserType = userInfor.user_type;
+        SessionID = userInfor.session_id;
+      }
+      return (
+        process.env.VUE_APP_BASE_API +
+        `/GCLSFileServer/WebFileUpload?UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}&SecurityLevel=Mid"`
+      );
+    },
+  },
   //监控data中数据变化
   watch: {},
   //方法集合
@@ -392,6 +440,52 @@ export default {
         return Math.abs(Math.abs(this.luminanceNumber) - 100) / 100;
       }
     },
+    initCanvasImage() {
+      let imgCanvas = this.$refs.imgCanvas; //绘制图片的canvas
+      this.imgCtx = imgCanvas.getContext("2d");
+      let img = new Image();
+      img.src = this.fileList[0].file_url;
+      img.onload = () => {
+        //图片加载完成后开始绘制图片
+        this.imgCtx.drawImage(img, 0, 0, this.form.width, this.form.height);
+      };
+    },
+    handlebeforeUplaod(file) {
+      if (file.size > 20 * 1024 * 1024) {
+        this.$message.warning("上传文件大小不能超过20M");
+        return false; //必须返回false
+      }
+      this.loading = this.$loading({
+        lock: true,
+        text: "Loading",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+    },
+    handleSuccess(response, file, fileList) {
+      if (response.status == 1) {
+        this.fileList = response.file_info_list;
+        this.loading.close();
+        this.initCanvasImage();
+      } else if (response.status == -1) {
+        this.loading.close();
+        removeToken();
+        this.$message.warning(response.error);
+        this.$router.push("/login");
+      } else {
+        this.loading.close();
+      }
+    },
+    handleRemove(file, fileList) {},
+    handlePreview(file) {},
+    handleExceed(files, fileList) {
+      this.$message.warning(
+        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
+          files.length + fileList.length
+        } 个文件`
+      );
+    },
+    beforeRemove(file, filleList) {},
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -637,6 +731,9 @@ export default {
       .canvas {
         height: 500px;
         border: 1px solid rgba(0, 0, 0, 0.1);
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
       .bottom {
         margin-top: 40px;