xt_pad/src/pages/personal/ElectronicSignature.vue

<template>
  <div class="mainBox">
    <div class="mainContent">
      <h1 class="title">
        <div class="GoBack" @click="$router.go(-1)">
          <span class="iconfont">&#xe720;</span>返回
        </div>
        <span class="name">电子签名</span>
        <div class="GoBack"></div>
      </h1>
      <div class="information">
        <div class="blueBorder"></div>
        <div
          class="name"
          v-show="showpan == 'canvas'"
          style="display:fixed;width:100%;left:0;top:0;"
        >
          <canvas
            id="canvas"
            class="fl"
            width="600"
            height="400"
            disable-scroll="true"
            @mousedown="canvasDown($event)"
            @mouseup="canvasUp($event)"
            @mousemove="canvasMove($event)"
            @touchstart="canvasDown($event)"
            @touchend="canvasUp($event)"
            @touchmove="canvasMove($event)"
          ></canvas>
        </div>
        <div class="imagename" v-show="showpan == 'image'">
          <img :src="electronicsignature" alt srcset />
        </div>
        <div class="set">
          <el-row>
            <el-button @click="clearCanvas">重写签名</el-button>
            <el-button :disabled="nobeginAction" type="primary" @click="getImageAction">上传签名</el-button>
          </el-row>
        </div>
      </div>
    </div>
    <side-bar :active_index="3"></side-bar>
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="70%"
      v-loading="loading"
      element-loading-text="正在保存签名图片"
      element-loading-spinner="el-icon-loading"
      center
    >
      <vue-cropper ref="cropper" :src="imgUrl" alt="Source Image" :cropmove="cropImage"></vue-cropper>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="uploadImage">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SideBar from "@/pages/layout/SideBar";
import { getToken } from "@/api/qiniu";
import {
  GetElectronicSignature,
  SaveElectronicSignature
} from "@/api/admin_user";
import VueCropper from "vue-cropperjs";
import { Toast } from "vant";

export default {
  name: "ElectronicSignature",
  components: {
    VueCropper,
    SideBar
  },
  data() {
    return {
      showpan: "",
      nobeginAction: true,
      loading: false,
      electronicsignature: "",
      uptoken: "",
      avatarUrl2: null,
      centerDialogVisible: false,
      cropper: "",
      centerDialogVisible: false,
      colors: [
        "#fef4ac",
        "#0018ba",
        "#ffc200",
        "#f32f15",
        "#cccccc",
        "#5ab639"
      ],
      brushs: [
        {
          className: "small fa fa-paint-brush",
          lineWidth: 3
        },
        {
          className: "middle fa fa-paint-brush",
          lineWidth: 6
        },
        {
          className: "big fa fa-paint-brush",
          lineWidth: 12
        }
      ],
      context: {},
      imgUrl: "",
      uploadImgUrl: "",
      canvasMoveUse: false,
      // 存储当前表面状态数组-上一步
      preDrawAry: [],
      // 存储当前表面状态数组-下一步
      nextDrawAry: [],
      // 中间数组
      middleAry: [],
      // 配置参数
      config: {
        lineWidth: 3,
        lineColor: "#000",
        shadowBlur: 1,
        fillStyle: "#fff"
      }
    };
  },
  created() {
    this.getToken();
    this.GetElectronicSignature();
    document.body.addEventListener(
      "touchmove",
      function(e) {
        e.preventDefault();
      },
      { passive: false }
    );
  },
  mounted() {
    const canvas = document.querySelector("#canvas");
    this.context = canvas.getContext("2d");
    this.context.fillStyle = this.config.fillStyle;
    this.context.fillRect(0, 0, 600, 400);

    this.initDraw();
    this.setCanvasStyle();
  },
  destroyed() {},
  computed: {
    controls() {
      return [
        {
          title: "上一步",
          action: "prev",
          className: this.preDrawAry.length
            ? "active fa fa-reply"
            : "fa fa-reply"
        },
        {
          title: "下一步",
          action: "next",
          className: this.nextDrawAry.length
            ? "active fa fa-share"
            : "fa fa-share"
        },
        {
          title: "清除",
          action: "clear",
          className:
            this.preDrawAry.length || this.nextDrawAry.length
              ? "active fa fa-trash"
              : "fa fa-trash"
        }
      ];
    }
  },
  methods: {
    GetElectronicSignature() {
      GetElectronicSignature().then(response => {
        if (response.data.state == 1 && response.data.data.state == 1) {
          this.electronicsignature =
            response.data.data.electronic_signature.url;
          this.showpan = "image";
        } else {
          this.showpan = "canvas";
        }
      });
    },
    getToken() {
      getToken().then(response => {
        if (response.data.state == 1) {
          this.uptoken = response.data.data.uptoken;
        }
      });
    },
    cropImage(event) {
      var dataurl = this.$refs.cropper.getCroppedCanvas();
      var rectImage = dataurl.toDataURL("image/png");
      this.uploadImgUrl = rectImage;
    },
    isPc() {
      const userAgentInfo = navigator.userAgent;
      const Agents = [
        "Android",
        "iPhone",
        "SymbianOS",
        "Windows Phone",
        "iPad",
        "iPod"
      ];
      let flag = true;
      for (let v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flag = false;
          break;
        }
      }
      return flag;
    },
    removeImg(src) {
      this.imgUrl = "";
    },
    initDraw() {
      const preData = this.context.getImageData(0, 0, 600, 400);
      // 空绘图表面进栈
      this.middleAry.push(preData);
    },
    canvasMove(e) {
      if (this.canvasMoveUse) {
        const t = e.target;
        let canvasX;
        let canvasY;
        if (this.isPc()) {
          canvasX = e.clientX - t.parentNode.offsetLeft;
          canvasY = e.clientY - t.parentNode.offsetTop;
        } else {
          canvasX = e.changedTouches[0].clientX - t.parentNode.offsetLeft;
          canvasY = e.changedTouches[0].clientY - t.parentNode.offsetTop;
        }
        this.context.lineTo(canvasX, canvasY);
        this.context.stroke();
      }
    },
    beginPath(e) {
      const canvas = document.querySelector("#canvas");
      if (e.target !== canvas) {
        this.context.beginPath();
      }
    },
    // mouseup
    canvasUp(e) {
      const preData = this.context.getImageData(0, 0, 600, 400);
      if (!this.nextDrawAry.length) {
        // 当前绘图表面进栈
        this.middleAry.push(preData);
      } else {
        this.middleAry = [];
        this.middleAry = this.middleAry.concat(this.preDrawAry);
        this.middleAry.push(preData);
        this.nextDrawAry = [];
      }
      this.canvasMoveUse = false;
      this.nobeginAction = false;
    },
    // mousedown
    canvasDown(e) {
      this.canvasMoveUse = true;
      this.nobeginAction = false;
      // client是基于整个页面的坐标
      // offset是cavas距离顶部以及左边的距离
      const canvasX = e.clientX - e.target.parentNode.offsetLeft;
      const canvasY = e.clientY - e.target.parentNode.offsetTop;
      this.setCanvasStyle();
      // 清除子路径
      this.context.beginPath();
      this.context.moveTo(canvasX, canvasY);
      // 当前绘图表面状态
      const preData = this.context.getImageData(0, 0, 600, 400);
      // 当前绘图表面进栈
      this.preDrawAry.push(preData);
    },
    // 设置颜色
    setColor(color) {
      this.config.lineColor = color;
    },
    // 设置笔刷大小
    setBrush(type) {
      this.config.lineWidth = type;
    },
    // 操作
    clearCanvas() {
      this.context.clearRect(
        0,
        0,
        this.context.canvas.width,
        this.context.canvas.height
      );

      this.context.fillStyle = this.config.fillStyle;
      this.context.fillRect(0, 0, 600, 400);

      this.preDrawAry = [];
      this.nextDrawAry = [];
      this.middleAry = [this.middleAry[0]];
      this.nobeginAction = true;
      this.showpan = "canvas";
    },
    getImageAction() {
      this.getImage();
      this.centerDialogVisible = true;

      if (typeof this.$refs.cropper != "undefined") {
        this.$refs.cropper.replace(this.imgUrl);
      }
    },
    uploadImage() {
      var dataurl = this.$refs.cropper.getCroppedCanvas();
      var rectImage = dataurl.toDataURL("image/png");
      this.uploadImgUrl = rectImage;

      if (typeof this.uploadImgUrl == "undefined") {
        Toast.fail("获取截图资源失败");
        return false;
      }
      if (this.uptoken == "") {
        Toast.fail("七牛上传token无效，无法上传");
        return false;
      }

      this.loading = true;
      var _this = this;
      var pic = this.uploadImgUrl.split(",")[1];
      var url = "https://upload.qiniup.com/putb64/-1";
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
          var returnData = JSON.parse(xhr.responseText);
          SaveElectronicSignature(returnData).then(response => {
            if (response.data.state == 1) {
              _this.electronicsignature =
                response.data.data.electronic_signature.url;
              _this.showpan = "image";
              _this.nobeginAction = true;
              _this.centerDialogVisible = false;
              Toast.success("成功");
              // _this.$router.push({path: "/my"})
            } else {
              Toast.fail("保存图片时失败");
            }
          });
          _this.loading = false;
        }
      };
      xhr.open("POST", url, true);
      xhr.setRequestHeader("Content-Type", "application/octet-stream");
      xhr.setRequestHeader("Authorization", "UpToken " + _this.uptoken);
      xhr.send(pic);
    },
    // 生成图片
    getImage() {
      const canvas = document.querySelector("#canvas");
      const src = canvas.toDataURL("image/png");
      this.imgUrl = src;
      // if (!this.isPc()) {
      //   // window.open(`data:text/plain,${src}`)
      //   window.location.href = src
      // }
    },
    // 设置绘画配置
    setCanvasStyle() {
      this.context.lineWidth = this.config.lineWidth;
      this.context.shadowBlur = this.config.shadowBlur;
      this.context.shadowColor = this.config.lineColor;
      this.context.strokeStyle = this.config.lineColor;
    }
  }
};
</script>

<style style="stylesheet/scss" lang="scss" scoped>
.showpanner {
  text-align: center;
}
.mainContent {
  .title {
    font-size: 0.45rem;
    padding: 0.3rem 0.37rem;
    color: $title-color;
    @include align-items-center;
    @include display-flex;
    @include justify-content-between;
    @include text-align;
    background: #fff;
    .GoBack {
      color: $main-color;
      font-size: 0.45rem;
      @include display-flex;
      .iconfont {
        color: $main-color;
        font-size: 0.5rem;
        margin-top: 1px;
        @media only screen and (min-width: 768px) {
          margin-top: 3px;
        }
      }
    }
    .name {
      margin-right: 1.3rem;
    }
  }
  .information {
    width: 100%;
    margin: 0 auto;
    .imagename {
      width: 100%;
      margin: 0 auto;
      text-align: center;
      padding: 10px 0;
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
    }
    .name {
      background: #fff;
      width: 100%;
      height: 400px;
      margin: 0 auto;
      border-radius: 4px;

      // @media only screen and (max-width: 812px) {
      //   width: 500px !important;
      //   height: 200px !important;
      // }
      .item {
        padding: 0.37rem 0.4rem;
        @include align-items-center;
        @include display-flex;
        @include justify-content-between;
        @include text-align;
        height: 500px;
        .tx {
          @include display-flex;
          @include align-items-center;
          @include text-align;
          img {
            width: 1.24rem;
            height: 1.24rem;
            border-radius: 50%;
            display: inline-block;
            margin-right: 0.26rem;
          }
        }
      }
      h2 {
        color: #34495e;
        font-size: 0.34rem;
      }
    }
    .set {
      width: 70%;
      margin: 0 auto;
      border-radius: 4px;
      margin-top: 0.3rem;
      text-align: center;
    }
  }
}
.fl {
  @media only screen and (max-width: 812px) {
    width: 100% !important;
    height: 400px !important;
  }
}
.mainBox {
  height: 100%;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  > :first-child {
    flex: 1;
    overflow: auto;
  }
}
</style>