vue 를 사용 하여 핸드폰 서명 기능 실현

개인 구현 캡 처:

설치:
npm install vue-esign --save
사용:
1.main.js 에 도입

import vueEsign from 'vue-esign'
Vue.use(vueEsign)

 2.페이지 에서 참조

<vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
 
<button @click="handleReset">    </button>
 
<button @click="handleGenerate">    </button>

3.설명
속성
유형
기본 값
설명 하 다.
width
Number
800
캔버스 너비
height
Number
300
캔버스 높이,즉 그림 내 보 내기 높이
lineWidth
4
Number
붓 굵기
lineColor
String
#000000
화필 색
bgColor
String
비다
캔버스 배경 색,비 었 을 때 캔버스 배경 이 투명 합 니 다.
다양한 형식 지원'\#ccc','\#E5A1A 1','rgb(229,161,161)','rgba(0,0,0,6)','red'
isCrop
Boolean
false
재단 할 지 여부 입 니 다.캔버스 의 사 이 즈 를 설정 한 토대 에서 사방 의 빈 부분 을 잘라 냅 니 다.
오래 기 다 렸 습 니 다.

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 //         base64  
    }).catch(err => { //      ，         
      this.$message({
        message: err + '    ！',
        type: 'warning'
      })
      alert(err) //              'Not Signned'
    })
  }
}

첨부:base 64 를 그림 으로 바 꾸 는 방법:

//  base64，     
 
base64ImgtoFile(dataurl, filename = 'file') {
 
const arr = dataurl.split(',')
 
const mime = arr[0].match(/:(.*?);/)[1]
 
const suffix = mime.split('/')[1]
 
const bstr = atob(arr[1])
 
let n = bstr.length
 
const u8arr = new Uint8Array(n)
 
while (n--) {
 
u8arr[n] = bstr.charCodeAt(n)
 
}
 
return new File([u8arr], `${filename}.${suffix}`, {
 
type: mime
 
})
 
},

여기 서 vue 를 사용 하여 손 글씨 서명 기능 을 실현 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 가 손 글씨 서명 내용 을 실현 하 는 것 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!