VUE H5移动端 手写签名组件封装，

通过画布生成手写签名并生成图片

这里进行了组件封装 ，代码如下自己看记录一下

VUE HTML部分

<template>
  <div 
class="matter-check-sign"
:style="{
  '--C':BtnColumns
    }"
  >
<div class="sign-container" v-if='isShow'>
  <div class="canvas-container">
			<canvas id="signCanvas"></canvas>
		</div>
</div>
<div class="sign-btn-container">
  <div class=btn-container>
    <div 
      v-for="(item, i) in btnList"
      :key='i'
      class="btn-item" 
      @click="item.handle"
    >{{item.label}}</div>
  </div>
<transition name="show">
  <div class="color-container" v-if='colorShow'>
    <transition-group name="slide-left" class="item">
      <div class="color-item" key='1' v-if='itemShow'>
        <div class="color-box" :class="{'border-dark': activeIndex == 0}" @click="selectColorItem(0)">
          <span class='color'></span>
        </div>
      </div>
      <div class="color-item"  key='2' v-if='itemShow'>
        <div class="color-box" :class="{'border-blue': activeIndex == 1}" @click="selectColorItem(1)">
          <span class='color back-blue'></span>
        </div>
      </div>
    </transition-group>
    <transition-group name="slide-right" class="item">
      <div class="color-item " key='3' v-if='itemShow'>
        <div class="color-box" :class="{'border-green': activeIndex == 2}" @click="selectColorItem(2)">
          <span class='color back-green'></span>
        </div>
      </div>
      <div class="color-item " key='4' v-if='itemShow'>
        <div class="color-box" :class="{'border-red': activeIndex == 3}" @click="selectColorItem(3)">
          <span class='color back-red'></span>
        </div>
      </div>
    </transition-group>
  </div>
</transition>
</div>
<van-overlay :show="reviewShow" @click="reviewShow = false" class='review-container'>
  <div class="review-image-box">
    <img
      width="100%"
      height="100%"
      :src="imgSrc"
    />
  </div>
</van-overlay>
  </div>
</template>

JS部分

	<script>


  import { Toast } from 'vant'
import api from '@/api/apiMatterCheck'
import { FOLDERPATH_FILE } from "@/utils/obs/huaweiUpload";
let {
  matterUploadFile
} = api
export default {
  name: 'MatterCheckSign',
  data(){
return {
  isShow: true,
  imgSrc: '',
  ImageFile:null,
  minSize:4754,
  colorShow:false,
  itemShow:false,
  activeIndex: 0,
  signColor: '#333',
  reviewShow: false,
  btnList:[
    {
      label:'重写',
      handle:this.handelClearEl
    },
    {
      label:'取消',
      handle:this.cancelHandle
    },
    {
      label:'确定',
      handle:this.submitSign
    }
    
  ],

  signUploadImage:''
}
  },
  mounted () {
	const _this = this
this.$nextTick(() => {
  setTimeout(() => {
    _this.initCanvas()
  }, 10)
})
},
  methods: {
initCanvas() {
  if (window.sessionStorage.getItem('sign')) {
			window.sessionStorage.removeItem('sign')
  }
  this.imgSrc = ''
  this.ImageFile = null
  let that = this
  let rate = 1
  let oCanvas = document.getElementById("signCanvas")
  oCanvas.width = oCanvas.offsetWidth * rate
  oCanvas.height = oCanvas.offsetHeight * rate -20
  let cxt = oCanvas.getContext("2d")
  cxt.fillStyle = '#fff' // 签名版背景颜色
  cxt.fillRect(0, 0, oCanvas.width, oCanvas.height)
  cxt.lineWidth = 3 * rate // 签名线条粗细
  cxt.strokeStyle = this.signColor  // 签名线条颜色
  let posX = 0 //x坐标
  let posY = 0 //y坐标
  let position = null
  let parentPosintin = oCanvas.getBoundingClientRect()
  // 解决canvas有间距 手指落点和实际绘画点有偏移的问题
  const offsetT = oCanvas.offsetTop
  const offsetL = oCanvas.offsetLeft

  //手指触摸屏幕可记录此时的位置作为起点
  oCanvas.addEventListener("touchstart", function(event) {
    that.colorShow = false
    posX = event.changedTouches[0].clientX

    posY = event.changedTouches[0].clientY - parentPosintin.top + 0.5
    cxt.beginPath()
    cxt.moveTo((posX - offsetL) * rate, (posY - offsetT + 20) * rate)
  })
  //手指屏滑动画线
  oCanvas.addEventListener("touchmove", function(event) {
    optimizedMove(event)
  })
  let requestAnimationFrame = window.requestAnimationFrame
  let optimizedMove = requestAnimationFrame ? function(e) {
  requestAnimationFrame(function() {
    move(e)
    })
  } : move
  function move(event) {
    posX = event.changedTouches[0].clientX + 0.5
    posY = event.changedTouches[0].clientY - parentPosintin.top + 0.5
    cxt.lineTo((posX - offsetL) * rate, (posY - offsetT + 20) * rate)
    cxt.stroke()
  }
},
// 清除画板
handelClearEl() {
  let oCanvas = document.getElementById("signCanvas")
  let cxt = oCanvas.getContext("2d")
  cxt.clearRect(0, 0, oCanvas.width, oCanvas.height)
  setTimeout(() => {
    // 清除画板后重新绘制画布
    this.initCanvas()
  }, 200)
},
//保存为图片
saveImage(handle = null) {
  let that = this
  let oCanvas = document.getElementById("signCanvas")


  let imgBase64 = oCanvas.toDataURL("image/png")
  oCanvas.toBlob(async (blobObj) => {
    let currentTime = Date.now()
    let file = new File([blobObj], `${currentTime}.png`, {
      type: blobObj.type,
      lastModified: Date.now()
    })
    try {
      let res = await that.checkCurrentImage(file)
      that.imgSrc = imgBase64
      that.ImageFile = res
      handle && handle(res, imgBase64)
    } catch (error) {
      
    }
  })
},

convertImg(file) {
  // 旋转图片操作不可见
		let _this = this
		let canvas1 = document.getElementById("signCanvas")
		let context1 = canvas1.getContext('2d')
		var oReader = new FileReader()
		oReader.readAsDataURL(file)
  oReader.onload = function (e) {
    var img = new Image()
			img.src = e.target.result
    img.onload = function () {
      // 图片原始尺寸
				const originWidth = this.width
				const originHeight = this.height
				// 最大尺寸限制
				const maxWidth = 1080,
					    maxHeight = 1080
				// 目标尺寸
				let targetWidth = originWidth,
					  targetHeight = originHeight
      
      // 图片尺寸超过300x300的限制
				if (originWidth > maxWidth || originHeight > maxHeight) {
					if (originWidth / originHeight > maxWidth / maxHeight) {
						targetWidth = maxWidth
						targetHeight = Math.round(
							maxWidth * (originHeight / originWidth)
						)
					} else {
						targetHeight = maxHeight
						targetWidth = Math.round(
							maxHeight * (originWidth / originHeight)
						)
					}
				}

      let type = "image/png"
				// canvas对图片进行缩放
				canvas1.width = targetHeight
				canvas1.height = targetWidth
				context1.save()
      // 旋转90度	
				// 设置画布旋转的中心点	
				context1.translate(canvas1.width / 2, canvas1.height / 2)
				context1.rotate(-90 * Math.PI / 180)
				context1.translate(-canvas1.width / 2, -canvas1.height / 2)
				// 吧图片绘制在旋转的中心点
				context1.drawImage(img, canvas1.width / 2 - img.width / 2, canvas1.height / 2 - img.height / 2)
				context1.translate(canvas1.width / 2, canvas1.height / 2)
				context1.rotate(90 * Math.PI / 180)
				context1.translate(canvas1.width / 2, canvas1.height / 2)
				context1.restore()

      // 将canvas的透明背景设置成白色
				var imageData = context1.getImageData(0,0,canvas1.width,canvas1.height)
      for (var i = 0; i < imageData.data.length; i += 4) {
        // 当该像素是透明的，则设置成白色
        if (imageData.data[i + 3] == 0) {
          imageData.data[i] = 255
          imageData.data[i + 1] = 255
          imageData.data[i + 2] = 255
          imageData.data[i + 3] = 255
        }
      }

      context1.putImageData(imageData, 0, 0)
				var dataurl = canvas1.toDataURL(type)
				_this.basedata = dataurl
				_this.getPolictReceiptImg()
    }
  }
},
	getPolictReceiptImg () {
		if (window.sessionStorage.getItem('sign')) {
			window.sessionStorage.removeItem('sign')
			window.sessionStorage.setItem('sign', this.basedata)
  } else {
			window.sessionStorage.setItem('sign', this.basedata)
		}
		this.$emit('returnImg')
	},

// 验证大小
checkCurrentImage(file){
  let {
    size
  } = file
  return new Promise((resolve, reject)=>{
    if(size <= this.minSize){
      Toast({
        message:'请签名',
        type: 'fail',
        icon: 'warning-o'
      })
      reject()
    }else{
      resolve(file)
    }
  })
},

selectColor(){
  if(this.colorShow){
    setTimeout(()=>{
      this.colorShow = false
    }, 10)
    this.itemShow = false
  } else {
    setTimeout(()=>{
      this.itemShow = true
    }, 10)
    this.colorShow = true
  }
},
selectColorItem(index){
  let colors = ['#333','#0286DF', '#07c160', '#ee0a24']
  this.activeIndex = index
  this.signColor = colors[index]
  this.initCanvas()
},
rotateImage(){
  this.saveImage((file)=>{
    this.convertImg(file)
  })
},

reviewImage(){
  let currentImage = window.sessionStorage.getItem('sign')

  if(currentImage){
    this.imgSrc = currentImage
    this.reviewShow = true
  }else{
    this.imgSrc 
      ? ( this.reviewShow = true )
      : this.saveImage(()=>{
        this.reviewShow = true
      })
  }
},

submitSign(){
  this.saveImage(this.uploadSign)
},

cancelHandle(){
  this.$emit('cancel')
},

   async uploadSign(file, imgSrc){
  let files = new FormData()
  files.append("file", file)
  this.$obsUpload
    .upload({file}, { folderPath: FOLDERPATH_FILE })
    .then((result) => {
      console.log(result, "obs直传成功结果");
      if (result.CommonMsg.Status == 200 && result.obs_upload_data) {
        Toast({
                icon:'passed',
                message: '签名成功'
              })
              this.$emit('upload', {
                imgUrl: result.obs_upload_data.fullUrl,
              })
        
      }else{
        Toast({
          message: '签名失败',
          icon: 'close'
        })
      }
     
    })
    .catch((err) => {
      Toast({
            message: '签名失败',
            icon: 'close'
          })
    });

  // try {
  //   let {code, data} = await matterUploadFile(files)
  //   if(code === 200){
  //     Toast({
  //       icon:'passed',
  //       message: '签名成功'
  //     })
  //     this.$emit('upload', {
  //       imgUrl: data,
  //       imgSrc
  //     })
  //     this.cancelHandle()
  //   }else {
  //     Toast({
  //       message: '签名失败',
  //       icon: 'close'
  //     })
  //   }
  // } catch (error) {
  //   Toast({
  //     message: '签名失败',
  //     icon: 'close'
  //   })
  // }
}

  },
  watch: {
  },
  computed: {
    BtnColumns(){
      return this.btnList.length
    }
  }
}
</script>

css部分

	<style lang="stylus" scoped>
.matter-check-sign{
  position: fixed;
  top:0;
  left:0;
  z-index 100;
  background: #f4f4f4;
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .sign-container{
width:100%;
flex: 1;
padding: 15px;
	background: linear-gradient(to left, black, black) left top no-repeat,
	linear-gradient(to bottom, black, black) left top no-repeat,
	linear-gradient(to left, black, black) right top no-repeat,
	linear-gradient(to bottom, black, black) right top no-repeat,
	linear-gradient(to left, black, black) left bottom no-repeat,
	linear-gradient(to bottom, black, black) left bottom no-repeat,
	linear-gradient(to left, black, black) right bottom no-repeat,
	linear-gradient(to left, black, black) right bottom no-repeat;
	background-size: 10px 30px, 30px 10px, 10px 30px, 30px 10px;
.canvas-container{
  width: 100%;
		height: 100%;
		#signCanvas {
			width: 100%;
			height: 100%;
			background: #FFF;
			border: none;
			// overflow: hidden;
		}
}
  }
  .sign-btn-container{
    width:100%;
padding: 15px;
display: flex;
justify-content: center;
align-items: center;
position relative;
.btn-container{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--C), 1fr);
  grid-column-gap: 4px;
  .btn-item{
    width:100%;
    height:30px;
    color: #666;
    font-size: 14px;
    font-weight: 600;
    background: #fff;
    box-shadow: 0 0 8px 3px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    &:first-child{
      border-bottom-left-radius: 30px;
      border-top-left-radius: 30px
    }
    &:last-child{
      border-bottom-right-radius: 30px;
      border-top-right-radius: 30px
    }
  }
  .color-blue{
    color: #0286DF
  }
  .color-green{
    color: #07c160
  }
  .color-orange{
    color: #ff976a
  }
  .color-dust{
    color:rgb(114, 50, 221)
  }
}

.color-container{
  position: absolute;
  width: 80%;
  height: 50px;
  // background: rgba(0,0,0, 0.3);
  top:-58px;
  left:50%;
  transform: translateX(-50%);
  z-index: 100;
  // box-shadow:0 0 15px 18px rgba(0,0,0, 0.3)

  display: grid;
  grid-template-columns: repeat(2,1fr);
  .item{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    .color-item{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .color-box{
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(150,150,150, 0.1);
        padding: 4px;
        display flex;
        justify-content: center;
        align-items: center;
        // box-shadow: 0 0 5px 5px rgba(0,0,0,0.1)
        .color{
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background: #333;
        }
        .back-blue{
          background:#0286DF
        }
        .back-green{
          background: #07c160
        }
        .back-red{
          background: #ee0a24
        }
      }
      .border-dark{
        box-shadow: 0 0 3px 3px rgba(0,0,0,0.3)
      }

      .border-blue{
        box-shadow: 0 0 3px 3px rgba(40,159,239,0.9)
      }
      .border-green{
        box-shadow: 0 0 3px 3px #07c160
      }
      .border-red{
        box-shadow: 0 0 3px 3px #ee0a24
      }
    }
  }
}
  }
}
.review-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .review-image-box{
    width: 90%
  }
}



.show-enter-active{
  animation: open 0.5s;
  -webkit-animation:open 0.5s;
}
.show-leave-active{
  animation: hidden 0.5s;
  -webkit-animation:hidden 0.5s;
}

@keyframes open{
  0% {
    opacity :0
  }
  100%{
opacity :1
  }
}

@keyframes hidden{
  0% {
opacity : 1
  }
  100%{
opacity : 0
  }
}

.slide-left-enter-active{
  animation: go-left 0.5s
  -webkit-animation:go-left 0.5s;
}
.slide-left-leave-active{
  animation: go-left 0.5s reverse;
  -webkit-animation:go-left 0.5s reverse;
}

@keyframes go-left {
  0%{
transform: translate3d(-100%, 0, 0)
  }
  100%{
    transform: translate3d(0, 0, 0)
  }
}

.slide-right-enter-active{
  animation: go-right 0.5s;
}
.slide-right-leave-active{
  animation: go-right 0.5s reverse
}

@keyframes go-right {
  0%{
transform: translate3d(100%, 0, 0)
  }
  100%{
    transform: translate3d(0, 0, 0)
  }
}
</style>

CSDN私信我，接私活