vue 를 사용 하여 핸드폰 서명 기능 실현
설치:
npm install vue-esign --save
사용:
1.main.js 에 도입
import vueEsign from 'vue-esign'
Vue.use(vueEsign)
<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>속성
유형
기본 값
설명 하 다.
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'
})
}
}
// 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
})
},이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
