deary-sign/dist/deary-sign.umd.js

AYY的签字板

(function(c,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],a):(c=typeof globalThis<"u"?globalThis:c||self,a(c.DearySign={},c.Vue))})(this,function(c,a){"use strict";const R={__name:"DearySign",props:{width:{type:Number,default:800},height:{type:Number,default:300},lineWidth:{type:Number,default:4},lineColor:{type:String,default:"#000000"},bgColor:{type:String,default:""},isCrop:{type:Boolean,default:!1},isClearBgColor:{type:Boolean,default:!0},format:{type:String,default:"image/png"},quality:{type:Number,default:1}},setup(X,{expose:Y}){const l=a.ref(null),x=a.ref(!1),T=a.ref(""),g=a.ref([]),p=a.ref(0),m=a.ref(0),w=a.ref(!1),h=a.ref(1),n=X,B=a.computed(()=>n.height/n.width),v=a.computed(()=>l.value.getBoundingClientRect()),b=a.computed(()=>n.bgColor?n.bgColor:"rgba(255, 255, 255, 0)"),D=()=>{const e=l.value;e.style.width=n.width+"px";const t=parseFloat(window.getComputedStyle(e).width);e.style.height=B.value*t+"px";const u=e.getContext("2d");u.scale(1*h.value,1*h.value),h.value=t/n.width,u.scale(1/h.value,1/h.value)},S=e=>{p.value=e.x,m.value=e.y;const t=l.value.getContext("2d");t.beginPath(),t.moveTo(p.value,m.value),t.lineTo(e.x,e.y),t.lineCap="round",t.lineJoin="round",t.lineWidth=n.lineWidth*h.value,t.stroke(),t.closePath(),g.value.push(e)},M=e=>{const t=l.value.getContext("2d");t.beginPath(),t.moveTo(p.value,m.value),t.lineTo(e.x,e.y),t.strokeStyle=n.lineColor,t.lineWidth=n.lineWidth*h.value,t.lineCap="round",t.lineJoin="round",t.stroke(),t.closePath(),m.value=e.y,p.value=e.x,g.value.push(e)},_=e=>{const t=l.value.getContext("2d");t.beginPath(),t.moveTo(p.value,m.value),t.lineTo(e.x,e.y),t.lineCap="round",t.lineJoin="round",t.stroke(),t.closePath(),g.value.push(e),g.value.push({x:-1,y:-1})},I=e=>{e.preventDefault(),w.value=!0,x.value=!0;let t={x:e.offsetX,y:e.offsetY};S(t)},E=e=>{if(e.preventDefault(),w.value){let t={x:e.offsetX,y:e.offsetY};M(t)}},q=e=>{e.preventDefault();let t={x:e.offsetX,y:e.offsetY};_(t),w.value=!1},W=e=>{if(e.preventDefault(),x.value=!0,e.touches.length===1){let t={x:e.targetTouches[0].clientX-v.value.left,y:e.targetTouches[0].clientY-v.value.top};S(t)}},F=e=>{if(e.preventDefault(),e.touches.length===1){let t={x:e.targetTouches[0].clientX-v.value.left,y:e.targetTouches[0].clientY-v.value.top};M(t)}},L=e=>{if(e.preventDefault(),e.touches.length===1){let t={x:e.targetTouches[0].clientX-v.value.left,y:e.targetTouches[0].clientY-v.value.top};_(t)}},k=e=>{let t=e&&e.format?e.format:n.format,u=e&&e.quality?e.quality:n.quality;return new Promise((i,r)=>{if(!x.value){r("未签名");return}const o=l.value,s=o.getContext("2d"),d=s.getImageData(0,0,o.width,o.height);s.globalCompositeOperation="destination-over",s.fillStyle=b.value,s.fillRect(0,0,o.width,o.height),T.value=o.toDataURL(t,u);let P=T.value;if(s.clearRect(0,0,o.width,o.height),s.putImageData(d,0,0),s.globalCompositeOperation="source-over",n.isCrop){const y=U(d.data);let f=document.createElement("canvas");const C=f.getContext("2d");f.width=y[2]-y[0],f.height=y[3]-y[1];const z=s.getImageData(...y);C.globalCompositeOperation="destination-over",C.putImageData(z,0,0),C.fillStyle=b.value,C.fillRect(0,0,0,f.width,f.height),P=f.toDataURL(t,u),f=null}i(P)})},N=e=>new Promise((t,u)=>{k(e).then(i=>{fetch(i).then(r=>r.blob()).then(r=>{const o=new File([r],"sign.png",{type:"image/png"});t({file:o,base64:i})})}).catch(i=>{u(i)})}),O=()=>{const e=l.value;e.getContext("2d").clearRect(0,0,e.width,e.height),n.isClearBgColor&&(e.style.background="rgba(255, 255, 255, 0)"),g.value=[],x.value=!1,T.value=""},U=e=>{let t=l.value.width,u=0,i=l.value.height,r=0;for(let o=0;o<l.value.width;o++)for(let s=0;s<l.value.height;s++){const d=(o+l.value.width*s)*4;(e[d]>0||e[d+1]>0||e[d+2]||e[d+3]>0)&&(r=Math.max(s,r),u=Math.max(o,u),i=Math.min(s,i),t=Math.min(o,t))}return t++,u++,i++,r++,[t,i,u,r]};return a.onMounted(()=>{const e=l.value;e.height=n.height,e.width=n.width,e.style.background=b.value,D(),document.onmouseup=()=>{w.value=!1},window.addEventListener("resize",D)}),a.onUnmounted(()=>{document.onmouseup=null,window.removeEventListener("resize",D)}),Y({generate:k,generateFile:N,reset:O}),(e,t)=>(a.openBlock(),a.createElementBlock("canvas",{class:"deary-sign",ref_key:"canvasRef",ref:l,style:{"max-width":"100%",display:"block"},onMousedown:I,onMousemove:E,onMouseup:q,onTouchstart:W,onTouchmove:F,onTouchend:L},null,544))}};c.DearySign=R,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});