Merge branch 'gcj'

# Conflicts:
#	src/views/CalligraphyMaster/cread.vue

src/views/CalligraphyMaster/cread.vue

@@ -4,7 +4,7 @@
     <div class="bg_main">
       <div class="main">
         <div class="main-top">
-          <div class="left">
+          <div class="left" v-if="1 == 2">
             <span>画布设置：</span>
             <div>
               <span>长度</span>
@@ -53,15 +53,15 @@
             </div>
           </div>
           <div class="right">
-            <div>
+            <!-- <div>
               <img src="../../assets/teacherdev/word-save.png" alt="" />
               保存
             </div>
             <div>
               <img src="../../assets/teacherdev/sfds-fb.png" alt="" />
               发布
-            </div>
-            <div>
+            </div> -->
+            <div @click="downLoad">
               <img src="../../assets/teacherdev/word-download.png" alt="" />
               下载
             </div>
@@ -195,13 +195,7 @@
             </div>
           </template>
         </div>
-        <div
-          class="canvas"
-          :style="{
-            marginTop:
-              changeType == 'text' || changeType == 'luminance' ? 0 : '32px',
-          }"
-        >
+        <div class="canvas" style="margin-top: 16px">
           <div
             id="imgCanvas"
             ref="imgCanvas"
@@ -524,6 +518,7 @@ export default {
       TUI_selectedItem: null,
       TUI_selectedFont: "",
       instance: null,
+      imgUrl: "../../assets/login/bg-login.png",
     };
   },
   //计算属性 类似于data概念
@@ -616,7 +611,7 @@ export default {
       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",
+            path: "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image", //"https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675",
             name: "image",
           },
           menu: [
@@ -635,10 +630,13 @@ export default {
           locale: locale_zh, // 本地化语言为中文
           theme: customTheme, // 自定义样式
         },
-        cssMaxWidth: this.form.width, // canvas 最大宽度
-        cssMaxHeight: this.form.height, // canvas 最大高度
+        cssMaxWidth: 500, //this.form.width, // canvas 最大宽度
+        cssMaxHeight: 500, //this.form.height, // canvas 最大高度
+        usageStatistics: false,
       });
+      $(".tie-mask-apply").css("display", "none");
       let fontArray = [
+        "FZLTH",
         "Arial",
         "Arial Black",
         "Caveat",
@@ -664,7 +662,7 @@ export default {
         "Webdings",
         "Wingdings",
       ];
-       
+
       let fontSelectHTML =
         '<select #fontselect class="form-select font-selector">';
       for (let i = 0; i < fontArray.length; i++) {
@@ -756,6 +754,25 @@ export default {
       );
     },
     beforeRemove(file, filleList) {},
+    downLoad() {
+      let dataURL = this.instance.toDataURL();
+      var base64 = dataURL.toString(); // imgSrc 就是base64哈
+      var byteCharacters = atob(
+        base64.replace(/^data:image\/(png|jpeg|jpg);base64,/, "")
+      );
+      var byteNumbers = new Array(byteCharacters.length);
+      for (var i = 0; i < byteCharacters.length; i++) {
+        byteNumbers[i] = byteCharacters.charCodeAt(i);
+      }
+      var byteArray = new Uint8Array(byteNumbers);
+      var blob = new Blob([byteArray], {
+        type: undefined,
+      });
+      var aLink = document.createElement("a");
+      aLink.download = "图片名称.jpg"; //这里写保存时的图片名称
+      aLink.href = URL.createObjectURL(blob);
+      aLink.click();
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -790,13 +807,13 @@ export default {
     padding-top: 24px;
     padding-bottom: 70px;
     .main {
-      width: 1168px;
+      width: 968px;
       margin: 0 auto;
       padding: 16px;
       background: #ffffff;
       .main-top {
         display: flex;
-        justify-content: space-between;
+        justify-content: flex-end;
         .left {
           display: flex;
           align-items: center;
@@ -1008,7 +1025,6 @@ export default {
         align-items: center;
       }
       .bottom {
-        margin-top: 40px;
         display: flex;
         justify-content: center;
         div {