九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

vue3實現(xiàn)電子簽名且對電子簽名可進行修改畫筆粗細、畫筆顏色、撤銷、清屏、保存等功能。

實現(xiàn)效果：查看源碼

<div class='signaturePad-Box w100 h100 flex-center'>
	<el-space class='mb10' size='large'>
		<div>
			<el-text>畫筆粗細：</el-text>
			<el-input-number v-model='state.signOptions.lineWidth' :min='2' :max='10' :step='1' @change='initCanvas' />
		</div>
		<div>
			<el-text>畫筆顏色：</el-text>
			<el-color-picker v-model='state.signOptions.penColor' color-format='hex' @blur='initCanvas'> 
		</el-color-picker></div>
	</el-space>
	
	<canvas ref='canvas' @mousedown='startDrawing' @mousemove='draw' @mouseup='stopDrawing'></canvas>
	
	<el-space class='mt10'>
		<el-button  @click='clear'>清除</el-button>
		<el-button type='success' @click='view'>查看</el-button>
		<el-button type='primary' @click='save'>保存</el-button>
	</el-space>
	
	
	<el-dialog v-model='state.dialogVisible' title='查看圖片'  >
		<el-image :src='state.dataURL' />
	    <template #footer>
			<div class='dialog-footer'>
				<el-button type='primary' @click='state.dialogVisible = false'> 確定 </el-button>
			</div>
	    </template>
	</el-dialog>
</div>

<script setup> import {ref,reactive,onMounted} from 'vue'; const canvas = ref(null); const state=reactive({ dialogVisible:false, dataURL:'', signOptions: { penColor: '#000000', lineWidth: 2, }, }) let isDrawing = false; let lastX = 0; let lastY = 0; /* 初始化畫布 */ const initCanvas = () => { const ctx = canvas.value.getContext('2d'); ctx.strokeStyle = state.signOptions.penColor; ctx.lineWidth = state.signOptions.lineWidth; } /* 開始繪制 */ const startDrawing = (event) => { isDrawing = true; [lastX, lastY] = [event.offsetX, event.offsetY]; } /* 繪制線條 */ const draw = (event) => { if (!isDrawing) return; const ctx = canvas.value.getContext('2d'); const currentX = event.offsetX; const currentY = event.offsetY; ctx.beginPath(); ctx.moveTo(lastX, lastY); ctx.lineTo(currentX, currentY); ctx.stroke(); [lastX, lastY] = [currentX, currentY]; } /* 停止繪制 */ const stopDrawing = () => { isDrawing = false; } /* 清除畫布 */ const clear = () => { const ctx = canvas.value.getContext('2d'); ctx.clearRect(0, 0, canvas.value.width, canvas.value.height); } /* 保存簽名 */ const save = () => { state.dataURL = canvas.value.toDataURL('image/png'); console.log('簽名地址為:', state.dataURL); } /* 查看簽名 */ const view=()=>{ state.dataURL = canvas.value.toDataURL('image/png'); state.dialogVisible=true; } onMounted(() => initCanvas()); </script>

第二種：通過vue-signature-pad

安裝依賴：

// npm npm i vue-signature-pad // yarn yarn add vue-signature-pad //pnpm pnpm i vue-signature-pad

在main.js里引用依賴：
注：在官網(wǎng)上寫的是全局引入非單文件引入

import VueSignaturePad from 'vue-signature-pad';

createApp(App).use(router).use(VueSignaturePad).mount('#app')

實現(xiàn)代碼：

<template> <div> <el-space class='mb10' size='large'> <div> <el-text>畫筆粗細：</el-text> <el-input-number v-model='state.size' :min='2' :max='10' :step='1' @change='onChange' /> </div> <div> <el-text>畫筆顏色：</el-text> <el-color-picker v-model='state.color' color-format='hex' @change='onChange'> </el-color-picker> </div> </el-space> <VueSignaturePad class='line' ref='signaturePad' :options='signOptions' width='400px' height='200px' /> <el-space class='mt10'> <el-button @click='unDoSign'>撤銷</el-button> <el-button @click='clearSign'>清屏</el-button> <el-button type='primary' @click='saveUploadSign'>保存</el-button> </el-space> </div> </template>

<script setup>
	import {ref,watch} from 'vue';

	const signaturePad = ref();
	
	const signOptions=ref({
		penColor: '#000000',
		minWidth: 1,
		maxWidth:1
	})
	
	const state=ref({
		color:'#000',
		size:1
	})
	
	// 畫筆顏色粗細改變時
	const onChange=()=>{
		signOptions.value={
			penColor:state.value.color,
			maxWidth:state.value.size
		}
	}
	
	// 撤銷電子簽名
	const unDoSign = () => {
		signaturePad.value.undoSignature();
	};

	// 清空電子簽名
	const clearSign = () => {
		signaturePad.value.clearSignature();
	};
	
	// 保存并上傳電子簽名
	const saveUploadSign = async () => {
		const {isEmpty,data} = signaturePad.value.saveSignature();
		if (isEmpty) return;
		console.log('picture url：',data);
	};

</script>