canvas截图

src/components/newLesson/share.vue

@@ -33,7 +33,8 @@
                 </div>
                 <div class="text1">已在唱唱学习</div>
                 <div class="text2">
-                  <span>{{dataSession.total_day}}</span>天
+                  <span>{{dataSession.total_day}}</span>
+                  <br />天
                 </div>
               </div>
               <div  class="item">
@@ -42,7 +43,8 @@
                 </div>
                 <div class="text1">今天学习了</div>
                 <div class="text2">
-                  <span>{{minute}}</span>分钟
+                  <span>{{minute}}</span>
+                  <br />分钟
                 </div>
               </div>
               <div  class="item">
@@ -101,6 +103,7 @@
         </div>-->
       </div>
     </div>
+    <canvas id="canvas"></canvas>
     <img class="canvasImg" @touchstart="touchStart" @touchend="touchEnd" :src="canvasData" alt /> <!--  @touchstart="touchStart" -->
     <div class="test"></div>
     <div class="white-pannel">
@@ -148,6 +151,8 @@
   import share_code_bg from "../../assets/newLesson/share-code-bg.png";
   import img_logo from "../../assets/newLesson/logo@2x.png";
   import share_tips from "../../assets/Bitmap@2x.png";
+  import canvas_bg_1 from "@/assets/share/canvas_bg_1.png";
+  import canvas_bg_2 from "@/assets/share/canvas_bg_2.png";
 
   export default {
     name: "share",
@@ -206,6 +211,7 @@
             this.avatarActive = res.avatar
             this.nicknameActive = res.nickname
             localStorage.setItem("userDesc", JSON.stringify(res));
+
           })
           .catch(res => {
             if (localStorage.getItem("userDesc")) {
@@ -410,7 +416,7 @@
         setTimeout(() => {
           this.oimgPoint = true;
         }, 900);
-        setTimeout(() => {
+      /*  setTimeout(() => {
           that.$nextTick(() => {
             if (document.getElementById("capture")) {
               html2canvas(document.getElementById("capture"), {
@@ -434,8 +440,53 @@
                   });
             }
           });
+        }, 1200);*/
+        setTimeout(() => {
+            this.animationBg = true;
+            this.canvasImg();
         }, 1200);
       },
+      canvasImg() {
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        const canvasImage = new Image();
+        if (this.totalStarNum == 3) {
+          canvasImage.src = canvas_bg_1;
+        } else {
+          canvasImage.src = canvas_bg_2;
+        }
+        let that = this;
+        canvasImage.onload = function () {
+          canvas.width = this.width;
+          canvas.height = this.height;
+          ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
+
+          that.fillTextFn(ctx, "7vw Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif", "#fff", `${that.nicknameActive}家宝宝`, 360, 265);
+          that.fillTextFn(ctx, "bold 11vw Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif", "#ec7e1f", that.dataSession.total_day, 150, 540);
+          that.fillTextFn(ctx, "bold 11vw Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif", "#ec7e1f", that.minute, 360, 540);
+          that.fillTextFn(ctx, "bold 11vw Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif", "#ec7e1f", `${that.percent}%`, 580, 540);
+          that.fillTextFn(ctx, "bold 11vw Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif", "#1d6588", that.lesson.title, 360, 840);
+          that.fillTextFn(ctx, "9vw Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif", "#1d6588", that.lesson.domTitle, 360, 900);
+
+          const avatarImage = new Image();
+          avatarImage.setAttribute("crossOrigin",'Anonymous');
+          avatarImage.src = that.avatarActive;
+            avatarImage.onload = function() {
+              ctx.arc(357, 173, 60, 0, 2 * Math.PI);
+              ctx.clip();
+              ctx.drawImage(this, 297, 113, 120, 120);
+
+              let dataURL = canvas.toDataURL("image/jpg", 1.0);
+              that.canvasData = dataURL;
+          };
+        };
+      },
+      fillTextFn(ctx, font, color, title, x, y) {
+          ctx.font = font;
+          ctx.textAlign = "center";
+          ctx.fillStyle = color;
+          ctx.fillText(title, x, y);
+      },
       enableShare: function(option) {
         let query = JSON.parse(sessionStorage.getItem("classQuery"));
         let that = this;
@@ -867,6 +918,9 @@
     width: 100%;
     z-index: 1300;
   }
+  #canvas {
+    display: none;
+  }
   .white-pannel {
     position: absolute;
     z-index: 1301;