Vue 电子签名 UI库ele-ui 画笔颜色可选择

<template>

  <div class="signatureBox">

    <div>

      <h1 class="sing-title">电子签名</h1>

    </div>

    <div class="block">

      <el-color-picker v-model="color" @change="Setcolor"></el-color-picker>

    </div>

    <div class="canvasBox" ref="canvasHW">

      <canvas

        @touchstart="touchStart"

        @touchmove="touchMove"

        @touchend="touchEnd"

        ref="canvasF"

        @mousedown="mouseDown"

        @mousemove="mouseMove"

        @mouseup="mouseUp"

      ></canvas>

      <div class="btnBox">

        <el-button @click="overwrite">重写</el-button>

        <el-button @click="toImg">提交签名</el-button>

      </div>

    </div>

  </div>

</template>



<script>

// import { Upload } from "@/api/upload";

import { SignImage } from "../../api/question";

// import { format } from "path";

var api = require("../../api/api.js");

export default {

  name: "signature",

  data() {

    return {

      color: "#333",

      points: [],

      canvasTxt: null,

      startX: 0,

      startY: 0,

      moveY: 0,

      moveX: 0,

      endY: 0,

      endX: 0,

      w: null,

      h: null,

      isDown: false

    };

  },

  props: {

    userid: String,

    agreementid: String

  },

  created() {},

  mounted() {

    let canvas = this.$refs.canvasF;

    canvas.height = this.$refs.canvasHW.offsetHeight - 60;

    canvas.width = this.$refs.canvasHW.offsetWidth - 10;

    this.canvasTxt = canvas.getContext("2d");

    this.canvasTxt.globalAlpha = 1; //画笔透明度

    this.canvasTxt.lineWidth = 4; //画笔大小

    this.canvasTxt.strokeStyle = this.color;

  },



  methods: {

    Setcolor(val) {

      console.log(val);

      this.color = val;

      // let canvas = this.$refs.canvasF;

      this.canvasTxt.strokeStyle = this.color;

    },

    Upload(file) {

      var chat = this;

      SignImage(file, this.agreementid, this.userid, function(response) {

        console.log(response);

        chat.$emit("draw_save", true);

      });

    },

    // 转换成base64

    toImg() {

      var image = this.$refs.canvasF.toDataURL();

      console.log(image);

      //转换后，上传

      this.Upload(image);

      return image;

    },

    backHome() {

      window.history.back();

    },

    //电脑设备事件

    mouseDown(ev) {

      ev = ev || event;

      ev.preventDefault();

      console.log(ev);

      if (1) {

        let obj = {

          x: ev.offsetX,

          y: ev.offsetY

        };

        console.log(obj);

        this.startX = obj.x;

        this.startY = obj.y;

        this.canvasTxt.beginPath();

        this.canvasTxt.moveTo(this.startX, this.startY);

        this.canvasTxt.lineTo(obj.x, obj.y);

        this.canvasTxt.stroke();

        this.canvasTxt.closePath();

        this.points.push(obj);

        this.isDown = true;

      }

    },

    //移动设备事件

    touchStart(ev) {

      ev = ev || event;

      ev.preventDefault();

      if (ev.touches.length == 1) {

        let obj = {

          x: ev.targetTouches[0].clientX,

          y: ev.targetTouches[0].clientY - 48

        };

        this.startX = obj.x;

        this.startY = obj.y;

        this.canvasTxt.beginPath();

        this.canvasTxt.moveTo(this.startX, this.startY);

        this.canvasTxt.lineTo(obj.x, obj.y);

        this.canvasTxt.stroke();

        this.canvasTxt.closePath();

        this.points.push(obj);

      }

    },

    //电脑设备事件

    mouseMove(ev) {

      ev = ev || event;

      ev.preventDefault();

      if (this.isDown) {

        let obj = {

          x: ev.offsetX,

          y: ev.offsetY

        };

        this.moveY = obj.y;

        this.moveX = obj.x;

        this.canvasTxt.beginPath();

        this.canvasTxt.moveTo(this.startX, this.startY);

        this.canvasTxt.lineTo(obj.x, obj.y);

        this.canvasTxt.stroke();

        this.canvasTxt.closePath();

        this.startY = obj.y;

        this.startX = obj.x;

        this.points.push(obj);

      }

    },

    //移动设备事件

    touchMove(ev) {

      ev = ev || event;

      ev.preventDefault();

      if (ev.touches.length == 1) {

        let obj = {

          x: ev.targetTouches[0].clientX,

          y: ev.targetTouches[0].clientY - 48

        };

        this.moveY = obj.y;

        this.moveX = obj.x;

        this.canvasTxt.beginPath();

        this.canvasTxt.moveTo(this.startX, this.startY);

        this.canvasTxt.lineTo(obj.x, obj.y);

        this.canvasTxt.stroke();

        this.canvasTxt.closePath();

        this.startY = obj.y;

        this.startX = obj.x;

        this.points.push(obj);

      }

    },

    //电脑设备事件

    mouseUp(ev) {

      ev = ev || event;

      ev.preventDefault();

      if (1) {

        let obj = {

          x: ev.offsetX,

          y: ev.offsetY

        };

        this.canvasTxt.beginPath();

        this.canvasTxt.moveTo(this.startX, this.startY);

        this.canvasTxt.lineTo(obj.x, obj.y);

        this.canvasTxt.stroke();

        this.canvasTxt.closePath();

        this.points.push(obj);

        this.points.push({ x: -1, y: -1 });

        this.isDown = false;

      }

    },

    //移动设备事件

    touchEnd(ev) {

      ev = ev || event;

      ev.preventDefault();

      console.log(ev);

      if (ev.touches.length == 1) {

        let obj = {

          x: ev.targetTouches[0].clientX,

          y: ev.targetTouches[0].clientY - 48

        };

        this.canvasTxt.beginPath();

        this.canvasTxt.moveTo(this.startX, this.startY);

        this.canvasTxt.lineTo(obj.x, obj.y);

        this.canvasTxt.stroke();

        this.canvasTxt.closePath();

        this.points.push(obj);

        this.points.push({ x: -1, y: -1 });

      }

    },

    //重写

    overwrite() {

      this.canvasTxt.clearRect(

        0,

        0,

        this.$refs.canvasF.width,

        this.$refs.canvasF.height

      );

      this.points = [];

    }

  }

};

</script>



<style scoped>

.signatureBox {

  position: absolute;

  top: 0px;

  left: 0px;

  width: 100%;

  height: 100%;

  box-sizing: border-box;

  overflow: hidden;

  background: #fff;

  z-index: 100;

  display: flex;

  flex-direction: column;

}

.sing-title {

  font-size: 20px;

  text-align: center;

}

.visaDetailTop {

  /*position: absolute;*/

  /*top: 0px;*/

  /*left: 0px;*/

  width: 100%;

  /*overflow: hidden;*/

  padding: 5px;

  box-sizing: border-box;

  z-index: 2;

  border-bottom: 1px solid #e5e5e5;

}

.visaDetailTop p {

  margin: 0px;

  text-align: center;

  color: #000;

  font-size: 1em;

  position: relative;

}

p.visaTitle {

  width: 100%;

  position: absolute;

  top: 5px;

  left: 0px;

  text-align: center;

  font-size: 1.2em;

}

.btnBack {

  display: block;

  position: absolute;

  top: 0px;

  left: 0px;

  width: 100%;

  height: 100%;

  z-index: 1;

  background: transparent;

  border-color: transparent;

  outline: none;

}

.btnDaoHang {

  display: block;

  position: absolute;

  left: 0px;

  top: 0px;

  height: 2.2em;

  width: 2em;

  z-index: 1;

  background: transparent;

  border-color: transparent;

  outline: none;

}

.visaDetailTop p span {

  color: #fff;

  font-size: 1.2em;

}

.visaDetailTop p:first-of-type {

  float: left;

}

.visaDetailTop p:nth-of-type(2) {

  float: right;

}

.canvasBox {

  padding: 0px 5px;

  box-sizing: border-box;

  flex: 1;

}

canvas {

  border: 1px solid #409eff;

}

.btnBox {

  padding: 5px;

  text-align: right;

  line-height: 30px;

  padding-bottom: 20px;

}

.btnBox button:first-of-type {

  border: 1px solid #409eff;

  background: transparent;

  border-radius: 4px;

  padding: 10px 10px;

}

.btnBox button:last-of-type {

  border: 1px solid #409eff;

  background: #409eff;

  color: #fff;

  border-radius: 4px;

  padding: 10px 10px;

}

@media only screen and (min-width: 750px) {

  .signatureBox {

    position: absolute;

    top: 0px;

    left: 0px;

    width: 100%;

    min-height: 100%;

    box-sizing: border-box;

    overflow: visible;

  }

}

</style>