You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 lines
3.8 KiB
2 lines
3.8 KiB
import{d as O,bg as U,a3 as z,P as J,f as C,O as N,o as V,g as A,aT as F}from"./index-f4658ae7.js";const H=O({__name:"ESignVue",props:{imageSrc:{type:String,default:""},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}},emits:["update:bgColor"],setup(D,{expose:S,emit:T}){const l=D;let o=null,m=!1,g=[],e=null,p=0,f=0,v=!1,u=1;U(()=>{window.addEventListener("resize",y)}),z(()=>{window.removeEventListener("resize",y)}),J(()=>{if(o=document.getElementById("canvas"),o.height=l.height,o.width=l.width,o.style.background=w.value,y(),l.imageSrc!=""){let t=new Image;t.src=l.imageSrc,o.strokeStyle="#000",e.drawImage(t,0,0,t.width,t.height),e.restore(),e.save()}document.onmouseup=()=>{v=!1}});const _=C(()=>l.height/l.width);C(()=>o.getBoundingClientRect());const w=C(()=>l.bgColor?l.bgColor:"rgba(255, 255, 255, 0)");N(w,t=>{o.style.background=t});const y=()=>{o.style.width=l.width+"px";const t=parseFloat(window.getComputedStyle(o).width);o.style.height=_.value*t+"px",e=o.getContext("2d"),e.scale(1*u,1*u),u=t/l.width,e.scale(1/u,1/u)},R=t=>{t=t||event,t.preventDefault(),v=!0,m=!0;let n={x:t.offsetX,y:t.offsetY};x(n)},E=t=>{if(t=t||event,t.preventDefault(),v){let n={x:t.offsetX,y:t.offsetY};b(n)}},M=t=>{t=t||event,t.preventDefault();let n={x:t.offsetX,y:t.offsetY};B(n),v=!1},k=t=>{if(t=t||event,t.preventDefault(),m=!0,t.touches.length===1){let n={x:t.targetTouches[0].clientX-o.getBoundingClientRect().left,y:t.targetTouches[0].clientY-o.getBoundingClientRect().top};x(n)}},I=t=>{if(t=t||event,t.preventDefault(),t.touches.length===1){let n={x:t.targetTouches[0].clientX-o.getBoundingClientRect().left,y:t.targetTouches[0].clientY-o.getBoundingClientRect().top};b(n)}},X=t=>{if(t=t||event,t.preventDefault(),t.touches.length===1){let n={x:t.targetTouches[0].clientX-o.getBoundingClientRect().left,y:t.targetTouches[0].clientY-o.getBoundingClientRect().top};B(n)}},x=t=>{p=t.x,f=t.y,e.beginPath(),e.moveTo(p,f),e.lineTo(t.x,t.y),e.lineCap="round",e.lineJoin="round",e.lineWidth=l.lineWidth*u,e.stroke(),e.closePath(),g.push(t)},b=t=>{e.beginPath(),e.moveTo(p,f),e.lineTo(t.x,t.y),e.strokeStyle=l.lineColor,e.lineWidth=l.lineWidth*u,e.lineCap="round",e.lineJoin="round",e.stroke(),e.closePath(),f=t.y,p=t.x,g.push(t)},B=t=>{e.beginPath(),e.moveTo(p,f),e.lineCap="round",e.lineJoin="round",e.stroke(),e.closePath(),g.push(t),g.push({x:-1,y:-1})},Y=()=>new Promise((n,d)=>{if(!m){d("\u6CA1\u6709\u91CD\u65B0\u7ED8\u5236\u624B\u5199\u7B7E\u540D");return}const c=e.getImageData(0,0,o.width,o.height);e.globalCompositeOperation="destination-over",e.fillStyle=w.value,e.fillRect(0,0,o.width,o.height),s=o.toDataURL();var s=s;if(e.clearRect(0,0,o.width,o.height),e.putImageData(c,0,0),e.globalCompositeOperation="source-over",l.isCrop){const a=L(c.data);var r=document.createElement("canvas");const i=r.getContext("2d");r.width=a[2]-a[0],r.height=a[3]-a[1];const h=e.getImageData(...a);i.globalCompositeOperation="destination-over",i.putImageData(h,0,0),i.fillStyle=w.value,i.fillRect(0,0,r.width,r.height),s=r.toDataURL(),r=null}n(s)}),P=T,W=()=>{e.clearRect(0,0,o.width,o.height),l.isClearBgColor&&(P("update:bgColor",""),o.style.background="rgba(255, 255, 255, 0)"),g=[],m=!1},L=t=>{let n=o.width,d=0,c=o.height,s=0;for(let a=0;a<o.width;a++)for(let i=0;i<o.height;i++){let h=(a+o.width*i)*4;(t[h]>0||t[h+1]>0||t[h+2]||t[h+3]>0)&&(s=Math.max(i,s),d=Math.max(a,d),c=Math.min(i,c),n=Math.min(a,n))}return n++,d++,c++,s++,[n,c,d,s]};return S({reset:W,generate:Y}),(t,n)=>(V(),A("canvas",{id:"canvas",onMousedown:R,onMousemove:E,onMouseup:M,onTouchstart:k,onTouchmove:I,onTouchend:X},null,32))}});const G=F(H,[["__scopeId","data-v-6167b566"]]);export{G as default};
|