xt_pad/src/pages/personal/ElectronicSignature.vue

<template>
  <div class="mainBox">
    <side-bar :active_index="3"></side-bar>
    <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'">
          <canvas
            id="canvas"
            class="fl"
            width="600"
            height="400"
            @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>
    <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: 15,
        lineColor: "#000",
        shadowBlur: 1,
        fillStyle: "#fff"
      }
    };
  },
  created() {
    this.getToken();
    this.GetElectronicSignature();
  },
  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.36rem;
    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.36rem;
      @include display-flex;
      .iconfont {
        color: $main-color;
        font-size: 0.5rem;
      }
    }
  }
  .information {
    width: 100%;
    margin: 0 auto;
    .imagename{
        width: 600px;
        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: 600px;
      height: 400px;
      margin: 0 auto;
      border-radius: 4px;
      .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;
    }
  }
}
</style>