<template>
  <view>
    <view class="canvas-in">
      <canvas
        :style="{ width: widthIn + 'px', height: heightIn + 'px' }"
        canvas-id="graceCanvas"
        class="grace-canvas"
      />
      <view
        v-if="imgSrc != null"
        class="grace-canvas-img"
        :style="{ width: widthIn + 'px', height: heightIn + 'px' }"
      >
        <image :src="imgSrc" mode="widthFix" style="width:100%;" @longpress="longpress" />
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      width: 750, // 画布宽度，单位 rpx
      height: 1150, // 画布高度
      widthIn: 300, // 自动计算转换为 px
      heightIn: 500, // 自动计算转换为 px
      bgColor: "#7ACBDC", // 背景颜色
      bgImg:
        "https://img-cdn-qiniu.dcloud.net.cn/uploads/article/20200708/cbac7a710b90ed11fdcffa410f97acb4.jpg",
      imgSrc: null
    };
  },
  onLoad: function() {
    // 画布初始化
    this.context = uni.createCanvasContext("graceCanvas");
    this.initSize();
    //延迟1秒等待画布创建
    setTimeout(() => {
      this.draw();
    }, 1000);
  },
  methods: {
    // 画布初始化
    initSize: function() {
      this.widthIn = uni.upx2px(this.width);
      this.heightIn = uni.upx2px(this.height);
    },
    // 海报绘制代码
    draw: function() {
      // 步骤 01. 绘制背景颜色
      this.step01();
      // 步骤 02. 绘制背景图片（如果需要，条件结构）
      if (this.bgImg != "") {
        this.drawBGIMG(this.bgImg, () => {
          // 步骤 03
          this.step03();
        });
      } else {
        this.step03();
      }
    },
    // 步骤 01 : 绘制背景颜色
    step01: function() {
      this.context.setFillStyle(this.bgColor);
      this.context.fillRect(0, 0, this.widthIn, this.heightIn);
    },
    // 步骤 03 :
    // 3.1 绘制标题 [ 居中对应 x = 画布的一半 ]
    // 3.2 绘制验证码
    step03: function() {
      // 3.1 绘制标题 [ 居中对应 x = 画布的一半 ]
      this.drawText(
        "GraceUI 更丰富 更漂亮",
        this.widthIn / 2,
        this.heightIn - 12,
        "#FFFFFF",
        16,
        "center"
      );
      // 3.2 绘制二维码
      uni.downloadFile({
        // 此处可修改二维码数据 ?text=您的数据
        url: "http://qr.topscan.com/api.php?text=http://grace.hcoder.net",
        success: res => {
          if (res.statusCode === 200) {
            // 绘制二维码
            // x = (画布宽度 - 图片宽度 ) / 2
            var qrCodeWidth = 180;
            var x = (this.widthIn - qrCodeWidth) / 2;
            this.context.drawImage(res.tempFilePath, x, 260, qrCodeWidth, qrCodeWidth);
            // 3.3 二维码下面的小字描述
            this.drawText(
              "GraceUI 官网二维码 长按图片保存 ~ ",
              this.widthIn / 2,
              468,
              "#FFFFFF",
              12,
              "center"
            );
            // 在最后一步执行 drawIt 完整最终的绘制
            this.drawIt();
          }
        },
        fail: function(e) {
          console.log(e);
        }
      });
    },
    // 绘制文本, 参数 : 文本内容,x,y,颜色,文本大小,横向对齐方式
    drawText: function(content, x, y, color, size, align) {
      this.context.setFontSize(size);
      this.context.setFillStyle(color);
      this.context.setTextAlign(align);
      this.context.fillText(content, x, y);
    },
    // 最终绘制函数
    drawIt: function() {
      this.context.draw(true, () => {
        uni.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: this.widthIn,
          height: this.heightIn,
          destWidth: this.widthIn,
          destHeight: this.heightIn,
          canvasId: "graceCanvas",
          success: res => {
            // 在H5平台下，tempFilePath 为 base64
            console.log(res);
            this.imgSrc = res.tempFilePath;
          }
        });
      });
    },
    // 绘制图片,参数 : 图片地址, 绘制完成后执行的回调函数
    drawBGIMG: function(img, callback) {
      uni.downloadFile({
        url: img,
        success: res => {
          if (res.statusCode == 200) {
            // 绘制
            uni.getImageInfo({
              src: res.tempFilePath,
              success: res2 => {
                var bgImgHeight = (this.widthIn / res2.width) * res2.height;
                console.log(bgImgHeight);
                this.context.drawImage(res.tempFilePath, 0, 0, this.widthIn, bgImgHeight);
                callback();
              }
            });
          }
        }
      });
    },
    // 长按事件
    longpress: function() {
      console.log("ok");
      uni.saveImageToPhotosAlbum({
        filePath: this.imgSrc,
        success: () => {
          console.log("save success");
          uni.showToast({
            title: "图片已经保存到您的相册~"
          });
        }
      });
    }
  }
};
</script>
<style>
page {
  background-color: #7acbdc;
}
.canvas-in {
  width: 100%;
  position: relative;
}
/* .grace-canvas {
} */
.grace-canvas-img {
  position: absolute;
  background-color: #007aff;
  z-index: 99;
  left: 0;
  top: 0;
  font-size: 0;
}
</style>
