vue-canvas-sign/lib/vue-canvas-sign.umd.js

vue canvas签名组件（vue canvas sign component），with vue@3.x

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self)["vue-canvas-sign"]=t(e.Vue)}(this,(function(e){"use strict";var t=e.defineComponent({name:"CanvasSign",props:{width:{type:Number,default:document.documentElement.clientWidth||document.body.clientWidth},height:{type:Number,default:200},lineWidth:{type:Number,default:2},color:{type:String,default:"#000"},backgroundColor:{type:String,default:"rgba(255, 255, 255, 0)"},borderWidth:{type:Number,default:1},borderColor:{type:String,default:"#333"},imageType:{type:String,default:"image/png",validator:e=>["image/png","image/jpeg","image/webp"].includes(e)},imageQual:{type:Number,default:.92,validator:e=>e<=1&&e>=0}},setup(t){const o=e.ref(),l=e.ref(),n=e.ref(!1),a=e.computed((()=>t.borderWidth>0&&t.width>2*t.borderWidth?`border: ${t.borderWidth}px solid ${t.borderColor}`:"")),u=()=>{const e=l.value;if(e){const{backgroundColor:l,color:n,lineWidth:a}=t,{width:u,height:i}=o.value||{};e.fillStyle=l,e.fillRect(0,0,u||0,i||0),e.strokeStyle=n,e.lineWidth=a,e.lineCap="round",e.lineJoin="round",e.shadowBlur=1,e.shadowColor=n}};return e.onMounted((()=>{var e;const t=null==(e=o.value)?void 0:e.getContext("2d");t&&(l.value=t,u())})),{canvas:o,borderStyle:a,save:e=>{if(!o.value)return void e();let l;l="image/jpeg"===t.imageType?o.value.toDataURL("image/jpeg",t.imageQual):o.value.toDataURL(t.imageType),e(l)},clear:()=>{const{backgroundColor:e}=t,{width:n,height:a}=o.value||{};l.value&&(l.value.clearRect(0,0,n||0,a||0),l.value.fillStyle=e,l.value.fillRect(0,0,n||0,a||0))},reset:()=>{const e=l.value;if(e){const{width:o,height:l,borderWidth:n}=t;e.canvas.width=o>2*n?o-2*n:o,e.canvas.height=l,setTimeout(u,0)}},touchstart:e=>{var t,n,a;const{clientX:u,clientY:i,target:r}=e.changedTouches[0];if("CANVAS"===r.tagName){const{left:e,top:r}=(null==(t=o.value)?void 0:t.getBoundingClientRect())||{left:0,top:0};null==(n=l.value)||n.beginPath(),null==(a=l.value)||a.moveTo(u-e,i-r)}},mousedown:e=>{var t,a,u;if("CANVAS"===e.target.tagName){const{left:i,top:r}=(null==(t=o.value)?void 0:t.getBoundingClientRect())||{left:0,top:0};n.value=!0,null==(a=l.value)||a.beginPath(),null==(u=l.value)||u.moveTo(e.clientX-i,e.clientY-r)}},touchmove:e=>{var t;if(e.stopPropagation(),e.preventDefault(),!l.value)return;const{clientX:n,clientY:a,target:u}=e.changedTouches[0];if("CANVAS"===u.tagName){const{left:e,top:u}=(null==(t=o.value)?void 0:t.getBoundingClientRect())||{left:0,top:0};l.value.lineTo(n-e,a-u),l.value.stroke()}},mousemove:e=>{if(e.stopPropagation(),e.preventDefault(),n.value&&o.value&&l.value&&"CANVAS"===e.target.tagName){const{width:a,height:u}=o.value,{left:i,top:r}=o.value.getBoundingClientRect()||{left:0,top:0};l.value.lineTo(e.clientX-i,e.clientY-r),l.value.stroke(),(e.clientX-i<=t.borderWidth||e.clientX-i>=(a||0)-2*t.borderWidth||e.clientY-r<=t.borderWidth||e.clientY-r>=(u||0)-2*t.borderWidth)&&(n.value=!1)}},touchend:()=>{var e;null==(e=l.value)||e.closePath()},mouseup:()=>{var e;n.value=!1,null==(e=l.value)||e.closePath()}}}});return t.render=function(t,o,l,n,a,u){return e.openBlock(),e.createBlock("div",null,[e.createVNode("canvas",{ref:"canvas",width:t.width>2*t.borderWidth?t.width-2*t.borderWidth:t.width,height:t.height,style:t.borderStyle,onTouchstart:o[1]||(o[1]=(...e)=>t.touchstart&&t.touchstart(...e)),onMousedown:o[2]||(o[2]=(...e)=>t.mousedown&&t.mousedown(...e)),onTouchmove:o[3]||(o[3]=(...e)=>t.touchmove&&t.touchmove(...e)),onMousemove:o[4]||(o[4]=(...e)=>t.mousemove&&t.mousemove(...e)),onTouchend:o[5]||(o[5]=(...e)=>t.touchend&&t.touchend(...e)),onMouseup:o[6]||(o[6]=(...e)=>t.mouseup&&t.mouseup(...e))},null,44,["width","height"]),e.renderSlot(t.$slots,"default",{save:t.save,clear:t.clear})])},t.install=e=>{e.component(t.name,t)},t}));