npm install vue3-signature
main.js
import Vue3Signature from "vue3-signature"
createApp(App).use(Vue3Signature).mount("#app")
A.vue
<template>
<Vue3Signature ref="signature1" :sigOption="state.option" :w="'1280px'" :h="'400px'"
:disabled="state.disabled" class="example"></Vue3Signature>
<button @click="save('image/jpeg')">Save</button>
<button @click="clear">Clear</button>
<button @click="undo">Undo</button>
<button @click="addWaterMark">addWaterMark</button>
<button @click="fromDataURL">fromDataURL</button>
<button @click="handleDisabled">disabled</button>
</template>
<script setup>
import {reactive, ref} from 'vue'
const state = reactive({
count: 0,
option: {
penColor: "rgb(0, 0, 0)",
backgroundColor: "rgb(255,255,255)"
},
disabled: false
})
const signature1 = ref(null)
const save = (t) => {
console.log(signature1.value.save(t))
}
const clear = () => {
signature1.value.clear()
}
const undo = () => {
signature1.value.undo();
}
const addWaterMark = () => {
signature1.value.addWaterMark({
text: "mark text",
font: "20px Arial",
fillStyle: "red",
strokeStyle: "blue",
x: 100,
y: 200,
sx: 100,
sy: 200
});
}
const fromDataURL = (url) => {
signature1.value.fromDataURL("https://avatars2.githubusercontent.com/u/17644818?s=460&v=4");
}
const handleDisabled = () => {
state.disabled = !state.disabled
}
</script>
<style scoped>
.example{
margin: 0 auto;
}
</style>