签名组件 微信小程序/Vue

一、微信小程序

<template>
  <div class="bmxt box-jwbs">
    <div class="content-jwbs">
      <div>
        请在下面方框中使用正楷字体签名
      </div>
      <div class="box-autograph">
        <canvas
          class="firstCanvas"
          canvas-id="firstCanvas"
          @touchmove="move"
          @touchend="end"
          @error="error"
          disable-scroll="true"
        >
        </canvas>
      </div>
    </div>
    <div class="bottom-jwbs">
      <van-button
        class="b-btn btn-jwbs"
        type="primary"
        size="small"
        @click="clearClick()"
        >重 置</van-button
      >
      <van-button
        class="b-btn btn-jwbs"
        type="info"
        size="small"
        @click="saveClick"
        >确 认</van-button
      >
    </div>
  </div>
</template>

<script>
import store from '@/store/store'

let content = null
let touchs = []
let lineTouchs = []
let canvasw = 0
let canvash = 0
wx.getSystemInfo({ // 获取系统信息
  success: function(res) {
    canvasw = res.windowWidth // 可使用窗口宽度，单位px
    canvash = res.windowHeight // 可使用窗口高度，单位px
  }
})

export default {
  data() {
    return {
      allTochs: []
    }
  },
  onLoad() { // 初始化画布
    content = wx.createCanvasContext('firstCanvas', this)
    content.setStrokeStyle('#000000')
    content.setLineWidth(5)
    content.setLineCap('round')
    content.setLineJoin('round')
  },
  methods: {
    error(e) {
      wx.showModal({
        title: '错误'
      })
    },
    move(e) { // 移动
      let point = { x: e.touches[0].x, y: e.touches[0].y }
      touchs.push(point)
      lineTouchs.push(point)
      if (touchs.length >= 2) {
        this.draw(touchs)
      }
    },
    end(e) {
      this.allTochs.push(JSON.parse(JSON.stringify(lineTouchs)))
      lineTouchs = []
      for (let i = 0; i < touchs.length; i++) {
        touchs.pop()
      }
    },
    clearClick() { // 清除
      content.clearRect(0, 0, canvasw, canvash)
      content.draw(true)
      this.allTochs = []
    },
    saveClick() { // 保存图片
      let that = this
      wx.canvasToTempFilePath({
        canvasId: 'firstCanvas',
        x: 0,
        y: 0,
        width: canvasw,
        height: canvash,
        success: function(res) {
          wx.getFileSystemManager().readFile({
            filePath: res.tempFilePath, //图片路径
            encoding: 'base64', //编码格式
            success: res => {
							console.log(res.data)
            },
            fail: function(res) {
              console.log(res)
            }
          })
        },
        fail: function(res) {
          console.log(res)
        }
      })
    },
    draw(touchs) {
      let point1 = touchs[0]
      let point2 = touchs[1]
      touchs.shift()
      content.moveTo(point1.x, point1.y)
      content.lineTo(point2.x, point2.y)
      content.stroke()
      content.draw(true)
    }
  }
}
</script>

<style scoped>
.box-jwbs {
  background: #fff;
  border-radius: 6px;
  margin: 10px;
  padding: 20px;
  height: 100%;
}
.text-top {
  vertical-align: middle;
  margin-left: 8px;
  font-weight: 600;
}
.top-jwbs {
  padding-bottom: 20px;
  border-bottom: 1px solid #e7e7e7;
}
.content-jwbs {
  padding-top: 17px;
  color: #a9b4ba;
  padding-bottom: 10px;
}
.bottom-jwbs {
  display: flex;
  justify-content: space-between;
}
.box-autograph {
  width: 100%;
  height: 400px;
}
.firstCanvas {
  background-color: #fafafa;
  width: 100%;
  height: 390px;
  border: 1px solid #e7e7e7;
  margin-top: 16px;
  margin-bottom: 25px;
  border-radius: 6px;
}
</style>
<style>
.bottom-jwbs .van-button--info,
.bottom-jwbs .van-button--primary {
  display: inline-block;
  width: 140px;
}
.btn-jwbs {
  display: inline-block;
}
</style>

二、Vue PC和移动端都可用

1. 按照插件

npm install vue-esign --save

2. 组件代码

<template>
  <div class="bmxt box-jwbs box-autograph">
    <div class="content-jwbs">
      <div>请在下面方框中使用正楷字体签名后查看体检信息</div>
      <vue-esign
        ref="esign"
        :width="800"
        :height="400"
        :isCrop="isCrop"
        :lineWidth="lineWidth"
        :lineColor="lineColor"
        :bgColor.sync="bgColor"
        style="border: solid 1px #000; margin: 20px 0"
      />
    </div>
    <div class="bottom-jwbs">
      <van-button class="b-btn btn-jwbs" type="primary" size="small" @click="handleReset()">重 置</van-button>
      <van-button class="b-btn btn-jwbs" type="info" size="small" @click="handleGenerate">确 认</van-button>
    </div>
  </div>
</template>

<script>
import VueEsign from 'vue-esign'
import { Toast } from 'vant'
import { submitAutograph } from '@/api/autograph'
import { setLocalStorage, getLocalStorage } from '@/utils/auth'
export default {
  components: { VueEsign },
  data() {
    return {
      lineWidth: 6,
      lineColor: '#000000',
      bgColor: '',
      resultImg: '',
      isCrop: false
    }
  },
  methods: {
    handleReset() {
      this.$refs.esign.reset()
    },

    handleGenerate() {
      this.$refs.esign
        .generate()
        .then(res => {
          this.resultImg = res
        })
        .catch(err => {
          console.log(err)
          Toast.fail('请签名再提交')
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.box-autograph {
  position: fixed;
  left: 0;
  right: 0;
  top: 40px;
  bottom: 0;
  background: #fff;
  padding: 20px;
  .b-btn {
    margin-bottom: 20px;
  }
}
</style>