vue3-esign/lib/index.umd.js

A canvas signature component of vue

(function(n,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(n=typeof globalThis!="undefined"?globalThis:n||self,t(n.index={},n.Vue))})(this,function(n,t){"use strict";var Q=Object.defineProperty,Z=Object.defineProperties;var ee=Object.getOwnPropertyDescriptors;var X=Object.getOwnPropertySymbols;var te=Object.prototype.hasOwnProperty,le=Object.prototype.propertyIsEnumerable;var Y=(n,t,c)=>t in n?Q(n,t,{enumerable:!0,configurable:!0,writable:!0,value:c}):n[t]=c,I=(n,t)=>{for(var c in t||(t={}))te.call(t,c)&&Y(n,c,t[c]);if(X)for(var c of X(t))le.call(t,c)&&Y(n,c,t[c]);return n},P=(n,t)=>Z(n,ee(t));const c={name:"Vue3Esign"},y=t.defineComponent(P(I({},c),{props:{width:{default:800},height:{default:300},lineWidth:{default:4},lineColor:{default:"#000000"},bgColor:{default:""},isCrop:{type:Boolean,default:!1},isClearBgColor:{type:Boolean,default:!0}},emits:["update:bgColor"],setup(C,{expose:w,emit:O}){const s=C,D=t.ref(!1),L=t.ref("");let x=t.reactive([]);const l=t.ref(null),T=t.ref(0),b=t.ref(0),B=t.ref(!1),p=t.ref(1),a=t.ref(null),U=t.computed(()=>s.height/s.width),z=t.computed(()=>{var e;return(e=a.value)==null?void 0:e.getBoundingClientRect()}),M=t.computed(()=>s.bgColor?s.bgColor:"rgba(255,255,255,0.5)");t.watch(M,e=>{a.value.style.background=e});const R=()=>{var i,u;const e=a.value;e.style.width=`${s.width}px`;const o=parseFloat(window.getComputedStyle(e).width);e.style.height=`${U.value*o}px`,l.value=e.getContext("2d"),(i=l.value)==null||i.scale(1*p.value,1*p.value),p.value=o/s.width,(u=l.value)==null||u.scale(1/p.value,1/p.value)};t.onBeforeMount(()=>{window.addEventListener("resize",()=>{R()})}),t.onBeforeUnmount(()=>{window.removeEventListener("resize",R)}),t.onMounted(()=>{a.value.height=s.height,a.value.width=s.width,a.value.style.background=M.value,R(),document.onmouseup=()=>{B.value=!1}});const J=e=>{e.preventDefault(),B.value=!0,D.value=!0;const o={x:e.offsetX,y:e.offsetY};k(o)},$=e=>{if(e.preventDefault(),B.value){const o={x:e.offsetX,y:e.offsetY};E(o)}},q=e=>{if(e.preventDefault(),B.value){const o={x:e.offsetX,y:e.offsetY};S(o),B.value=!1}},A=e=>{if(e.preventDefault(),D.value=!0,e.touches.length===1){const o={x:e.targetTouches[0].clientX-a.value.getBoundingClientRect().left,y:e.targetTouches[0].clientY-a.value.getBoundingClientRect().top};k(o)}},F=e=>{if(e.preventDefault(),e.touches.length===1){const o={x:e.targetTouches[0].clientX-a.value.getBoundingClientRect().left,y:e.targetTouches[0].clientY-a.value.getBoundingClientRect().top};E(o)}},H=e=>{if(e.preventDefault(),e.touches.length===1){const o={x:e.targetTouches[0].clientX-a.value.getBoundingClientRect().left,y:e.targetTouches[0].clientY-a.value.getBoundingClientRect().top};S(o)}},k=e=>{var o,i,u,r,d;T.value=e.x,b.value=e.y,(o=l.value)==null||o.beginPath(),(i=l.value)==null||i.moveTo(T.value,b.value),(u=l.value)==null||u.lineTo(e.x,e.y),l.value.lineCap="round",l.value.lineJoin="round",l.value.lineWidth=s.lineWidth*p.value,(r=l.value)==null||r.stroke(),(d=l.value)==null||d.closePath(),x.push(e)},E=e=>{l.value.beginPath(),l.value.moveTo(T.value,b.value),l.value.lineTo(e.x,e.y),l.value.strokeStyle=s.lineColor,l.value.lineWidth=s.lineWidth*p.value,l.value.lineCap="round",l.value.lineJoin="round",l.value.stroke(),l.value.closePath(),b.value=e.y,T.value=e.x,x.push(e)},S=e=>{var o,i,u,r,d;(o=l.value)==null||o.beginPath(),(i=l.value)==null||i.moveTo(T.value,b.value),(u=l.value)==null||u.lineTo(e.x,e.y),l.value.lineCap="round",l.value.lineJoin="round",(r=l.value)==null||r.stroke(),(d=l.value)==null||d.closePath(),x.push(e),x.push({x:-1,y:-1})},N=()=>new Promise((o,i)=>{var d,h,f;if(!D.value){i(new Error("Warning: Not Signned!"));return}const u=l.value.getImageData(0,0,a.value.width,a.value.height);l.value.globalCompositeOperation="destination-over",l.value.fillStyle=M.value,(d=l.value)==null||d.fillRect(0,0,a.value.width,a.value.height);let r=a.value.toDataURL();if(l.value.clearRect(0,0,a.value.width,a.value.height),(h=l.value)==null||h.putImageData(u,0,0),l.value.globalCompositeOperation="source-over",s.isCrop){const v=G(u.data);let m=document.createElement("canvas");const g=m.getContext("2d");m.width=v[2]-v[0],m.height=v[3]-v[1];const K=(f=l.value)==null?void 0:f.getImageData(...v);g.globalCompositeOperation="destination-over",g==null||g.putImageData(K,0,0),g.fillStyle=M.value,g==null||g.fillRect(0,0,m.width,m.height),r=m.toDataURL(),m=null}o(r)}),j=()=>{var e;(e=l.value)==null||e.clearRect(0,0,a.value.width,a.value.height),s.isClearBgColor&&(O("update:bgColor",""),a.value.style.background="rgba(255,255,255,0)"),x=[],D.value=!1,L.value=""},G=e=>{let o=a.value.width,i=0,u=a.value.height,r=0;for(let h=0;h<a.value.width;h++)for(let f=0;f<a.value.height;f++){const v=(h+a.value.width*f)*4;(e[v]>0||e[v+1]>0||e[v+2]||e[v+3]>0)&&(r=Math.max(f,r),i=Math.max(h,i),u=Math.min(f,u),o=Math.min(h,o))}return o++,i++,u++,r++,[o,u,i,r]};return w({generate:N,reset:j,stageInfo:z}),(e,o)=>(t.openBlock(),t.createElementBlock("canvas",{ref_key:"canvas",ref:a,style:{"max-width":"100%",display:"block"},onMousedown:J,onMousemove:$,onMouseup:q,onTouchstart:A,onTouchmove:F,onTouchend:H},null,544))}}));y.install=function(C){C.component(y.name,y)};const V={Vue3Esign:y},_=function(C){Object.values(V).forEach(w=>{console.log("component",w),console.log("component.name",w.name),C.component(w.name,w)})};typeof window!="undefined"&&window.Vue&&_(window.Vue);var W={install:_};n.Vue3Esign=y,n.default=W,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});