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

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

import{defineComponent as e,ref as t,computed as o,onMounted as l,openBlock as a,createBlock as u,createVNode as n,renderSlot as i}from"vue";var r=e({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(e){const a=t(),u=t(),n=t(!1),i=o((()=>e.borderWidth>0&&e.width>2*e.borderWidth?`border: ${e.borderWidth}px solid ${e.borderColor}`:"")),r=()=>{const t=u.value;if(t){const{backgroundColor:o,color:l,lineWidth:u}=e,{width:n,height:i}=a.value||{};t.fillStyle=o,t.fillRect(0,0,n||0,i||0),t.strokeStyle=l,t.lineWidth=u,t.lineCap="round",t.lineJoin="round",t.shadowBlur=1,t.shadowColor=l}};return l((()=>{var e;const t=null==(e=a.value)?void 0:e.getContext("2d");t&&(u.value=t,r())})),{canvas:a,borderStyle:i,save:t=>{if(!a.value)return void t();let o;o="image/jpeg"===e.imageType?a.value.toDataURL("image/jpeg",e.imageQual):a.value.toDataURL(e.imageType),t(o)},clear:()=>{const{backgroundColor:t}=e,{width:o,height:l}=a.value||{};u.value&&(u.value.clearRect(0,0,o||0,l||0),u.value.fillStyle=t,u.value.fillRect(0,0,o||0,l||0))},reset:()=>{const t=u.value;if(t){const{width:o,height:l,borderWidth:a}=e;t.canvas.width=o>2*a?o-2*a:o,t.canvas.height=l,setTimeout(r,0)}},touchstart:e=>{var t,o,l;const{clientX:n,clientY:i,target:r}=e.changedTouches[0];if("CANVAS"===r.tagName){const{left:e,top:r}=(null==(t=a.value)?void 0:t.getBoundingClientRect())||{left:0,top:0};null==(o=u.value)||o.beginPath(),null==(l=u.value)||l.moveTo(n-e,i-r)}},mousedown:e=>{var t,o,l;if("CANVAS"===e.target.tagName){const{left:i,top:r}=(null==(t=a.value)?void 0:t.getBoundingClientRect())||{left:0,top:0};n.value=!0,null==(o=u.value)||o.beginPath(),null==(l=u.value)||l.moveTo(e.clientX-i,e.clientY-r)}},touchmove:e=>{var t;if(e.stopPropagation(),e.preventDefault(),!u.value)return;const{clientX:o,clientY:l,target:n}=e.changedTouches[0];if("CANVAS"===n.tagName){const{left:e,top:n}=(null==(t=a.value)?void 0:t.getBoundingClientRect())||{left:0,top:0};u.value.lineTo(o-e,l-n),u.value.stroke()}},mousemove:t=>{if(t.stopPropagation(),t.preventDefault(),n.value&&a.value&&u.value&&"CANVAS"===t.target.tagName){const{width:o,height:l}=a.value,{left:i,top:r}=a.value.getBoundingClientRect()||{left:0,top:0};u.value.lineTo(t.clientX-i,t.clientY-r),u.value.stroke(),(t.clientX-i<=e.borderWidth||t.clientX-i>=(o||0)-2*e.borderWidth||t.clientY-r<=e.borderWidth||t.clientY-r>=(l||0)-2*e.borderWidth)&&(n.value=!1)}},touchend:()=>{var e;null==(e=u.value)||e.closePath()},mouseup:()=>{var e;n.value=!1,null==(e=u.value)||e.closePath()}}}});r.render=function(e,t,o,l,r,d){return a(),u("div",null,[n("canvas",{ref:"canvas",width:e.width>2*e.borderWidth?e.width-2*e.borderWidth:e.width,height:e.height,style:e.borderStyle,onTouchstart:t[1]||(t[1]=(...t)=>e.touchstart&&e.touchstart(...t)),onMousedown:t[2]||(t[2]=(...t)=>e.mousedown&&e.mousedown(...t)),onTouchmove:t[3]||(t[3]=(...t)=>e.touchmove&&e.touchmove(...t)),onMousemove:t[4]||(t[4]=(...t)=>e.mousemove&&e.mousemove(...t)),onTouchend:t[5]||(t[5]=(...t)=>e.touchend&&e.touchend(...t)),onMouseup:t[6]||(t[6]=(...t)=>e.mouseup&&e.mouseup(...t))},null,44,["width","height"]),i(e.$slots,"default",{save:e.save,clear:e.clear})])},r.install=e=>{e.component(r.name,r)};export default r;