第一步
|
1 |
npm install vue-signature |
第二步 main.js
|
1 2 |
import vueSignature from "vue-signature" Vue.use(vueSignature) |
vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<template> <div id="app"> <vueSignature ref="signature" :sigOption="option" :w="'800px'" :h="'400px'" :disabled="disabled" :defaultUrl="dataUrl" ></vueSignature> <vueSignature ref="signature1" :sigOption="option"></vueSignature> <button @click="save">Save</button> <button @click="clear">Clear</button> <button @click="undo">Undo</button> <button @click="addWaterMark">addWaterMark</button> <button @click="handleDisabled">disabled</button> </div> </template> <script> export default { name: "app", data() { return { option: { penColor: "rgb(0, 0, 0)", backgroundColor: "rgb(255,255,255)", }, disabled: false, dataUrl: "https://avatars2.githubusercontent.com/u/17644818?s=460&v=4", }; }, methods: { save() { var _this = this; var png = _this.$refs.signature.save(); var jpeg = _this.$refs.signature.save("image/jpeg"); var svg = _this.$refs.signature.save("image/svg+xml"); console.log(png); console.log(jpeg); console.log(svg); }, clear() { var _this = this; _this.$refs.signature.clear(); }, undo() { var _this = this; _this.$refs.signature.undo(); }, addWaterMark() { var _this = this; _this.$refs.signature.addWaterMark({ text: "mark text", // watermark text, > default '' font: "20px Arial", // mark font, > default '20px sans-serif' style: "all", // fillText and strokeText, 'all'/'stroke'/'fill', > default 'fill fillStyle: "red", // fillcolor, > default '#333' strokeStyle: "blue", // strokecolor, > default '#333' x: 100, // fill positionX, > default 20 y: 200, // fill positionY, > default 20 sx: 100, // stroke positionX, > default 40 sy: 200, // stroke positionY, > default 40 }); }, fromDataURL(url) { var _this = this; _this.$refs.signature.fromDataURL( "data:image/png;base64,iVBORw0K..." ); }, handleDisabled() { var _this = this; _this.disabled = !_this.disabled; }, }, }; </script> |
from:https://blog.csdn.net/XLL20001022/article/details/101548655