Nihilist Postmodern Mistake

    vue-signature

    2.5.4 • Public • Published

    vue-signature

    A electronic signature component by Vue.js

    For Vue 3

    vue3-signature

    Reference and Thanks

    signature_pad

    API


    Props

    w,h need units,like 100px or 100%

    name type default description
    sigOption Object {penColor:"rgb(0, 0, 0)", backgroundColor:"rgb(255,255,255)"} penColor, backgroundColor
    w String "100%" parent container width
    h String "100%" parent container height
    clearOnResize Boolean false Canvas is cleared on window resize
    waterMark Object {} check Usage addWaterMark
    disabled Boolean false disabled
    defaultUrl String "" you want show image by default

    Methods

    name params description
    save ()/("image/jpeg")/("image/svg+xml") save image as PNG/JPEG/SVG
    clear clear canvas
    isEmpty Returns true if canvas is empty, otherwise returns false
    undo remove the last dot or line
    addWaterMark {} // check Usage addWaterMark addWaterMark
    fromDataURL (url) Draws signature image from data URL.

    Usage


    npm install vue-signature 
    

    A.vue

    <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>
    import vueSignature from "vue-signature"
    export default {
    	name: "app",
    	components:{
    		vueSignature
    	},
    	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>

    License


    Released under the MIT License.

    Keywords

    none

    Install

    npm i vue-signature

    DownloadsWeekly Downloads

    2,194

    Version

    2.5.4

    License

    MIT

    Unpacked Size

    29.8 kB

    Total Files

    8

    Last publish

    Collaborators

    • shaynewang