2 lines
12 KiB
Vue
2 lines
12 KiB
Vue
import{o as g,c as d,a as m,e as f,ao as p,b as r,ae as A,af as T}from"./vendor.3937d42d.js";import{_ as v,u as I}from"./index.e47da145.js";import{v as x,i as C}from"./online.eb873553.js";const y={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}},data(){return{hasDrew:!1,resultImg:"",points:[],canvasTxt:null,startX:0,startY:0,isDrawing:!1,sratio:1}},computed:{ratio(){return this.height/this.width},stageInfo(){return this.$refs.canvas.getBoundingClientRect()},myBg(){return this.bgColor?this.bgColor:"rgba(255, 255, 255, 0)"}},watch:{myBg:function(t){this.$refs.canvas.style.background=t}},beforeMount(){window.addEventListener("resize",this.$_resizeHandler)},beforeDestroy(){window.removeEventListener("resize",this.$_resizeHandler)},mounted(){const t=this.$refs.canvas;t.height=this.height,t.width=this.width,t.style.background=this.myBg,this.$_resizeHandler(),document.onmouseup=()=>{this.isDrawing=!1}},methods:{$_resizeHandler(){const t=this.$refs.canvas;t.style.width=this.width+"px";const e=parseFloat(window.getComputedStyle(t).width);t.style.height=this.ratio*e+"px",this.canvasTxt=t.getContext("2d"),this.canvasTxt.scale(1*this.sratio,1*this.sratio),this.sratio=e/this.width,this.canvasTxt.scale(1/this.sratio,1/this.sratio)},mouseDown(t){t=t||event,t.preventDefault(),this.isDrawing=!0,this.hasDrew=!0;let e={x:t.offsetX,y:t.offsetY};this.drawStart(e)},mouseMove(t){if(t=t||event,t.preventDefault(),this.isDrawing){let e={x:t.offsetX,y:t.offsetY};this.drawMove(e)}},mouseUp(t){t=t||event,t.preventDefault();let e={x:t.offsetX,y:t.offsetY};this.drawEnd(e),this.isDrawing=!1},touchStart(t){if(t=t||event,t.preventDefault(),this.hasDrew=!0,t.touches.length===1){let e={x:t.targetTouches[0].clientX-this.$refs.canvas.getBoundingClientRect().left,y:t.targetTouches[0].clientY-this.$refs.canvas.getBoundingClientRect().top};this.drawStart(e)}},touchMove(t){if(t=t||event,t.preventDefault(),t.touches.length===1){let e={x:t.targetTouches[0].clientX-this.$refs.canvas.getBoundingClientRect().left,y:t.targetTouches[0].clientY-this.$refs.canvas.getBoundingClientRect().top};this.drawMove(e)}},touchEnd(t){if(t=t||event,t.preventDefault(),t.touches.length===1){let e={x:t.targetTouches[0].clientX-this.$refs.canvas.getBoundingClientRect().left,y:t.targetTouches[0].clientY-this.$refs.canvas.getBoundingClientRect().top};this.drawEnd(e)}},drawStart(t){this.startX=t.x,this.startY=t.y,this.canvasTxt.beginPath(),this.canvasTxt.moveTo(this.startX,this.startY),this.canvasTxt.lineTo(t.x,t.y),this.canvasTxt.lineCap="round",this.canvasTxt.lineJoin="round",this.canvasTxt.lineWidth=this.lineWidth*this.sratio,this.canvasTxt.stroke(),this.canvasTxt.closePath(),this.points.push(t)},drawMove(t){this.canvasTxt.beginPath(),this.canvasTxt.moveTo(this.startX,this.startY),this.canvasTxt.lineTo(t.x,t.y),this.canvasTxt.strokeStyle=this.lineColor,this.canvasTxt.lineWidth=this.lineWidth*this.sratio,this.canvasTxt.lineCap="round",this.canvasTxt.lineJoin="round",this.canvasTxt.stroke(),this.canvasTxt.closePath(),this.startY=t.y,this.startX=t.x,this.points.push(t)},drawEnd(t){this.canvasTxt.beginPath(),this.canvasTxt.moveTo(this.startX,this.startY),this.canvasTxt.lineTo(t.x,t.y),this.canvasTxt.lineCap="round",this.canvasTxt.lineJoin="round",this.canvasTxt.stroke(),this.canvasTxt.closePath(),this.points.push(t),this.points.push({x:-1,y:-1})},generate(){return new Promise((e,h)=>{if(!this.hasDrew){h("Warning: Not Signned!");return}var n=this.canvasTxt.getImageData(0,0,this.$refs.canvas.width,this.$refs.canvas.height);this.canvasTxt.globalCompositeOperation="destination-over",this.canvasTxt.fillStyle=this.myBg,this.canvasTxt.fillRect(0,0,this.$refs.canvas.width,this.$refs.canvas.height),this.resultImg=this.$refs.canvas.toDataURL();var i=this.resultImg;if(this.canvasTxt.clearRect(0,0,this.$refs.canvas.width,this.$refs.canvas.height),this.canvasTxt.putImageData(n,0,0),this.canvasTxt.globalCompositeOperation="source-over",this.isCrop){const a=this.getCropArea(n.data);var s=document.createElement("canvas");const o=s.getContext("2d");s.width=a[2]-a[0],s.height=a[3]-a[1];const l=this.canvasTxt.getImageData(...a);o.globalCompositeOperation="destination-over",o.putImageData(l,0,0),o.fillStyle=this.myBg,o.fillRect(0,0,s.width,s.height),i=s.toDataURL(),s=null}e(i)})},reset(){this.canvasTxt.clearRect(0,0,this.$refs.canvas.width,this.$refs.canvas.height),this.$emit("update:bgColor",""),this.$refs.canvas.style.background="rgba(255, 255, 255, 0)",this.points=[],this.hasDrew=!1,this.resultImg=""},getCropArea(t){for(var e=this.$refs.canvas.width,h=0,n=this.$refs.canvas.height,i=0,s=0;s<this.$refs.canvas.width;s++)for(var a=0;a<this.$refs.canvas.height;a++){var o=(s+this.$refs.canvas.width*a)*4;(t[o]>0||t[o+1]>0||t[o+2]||t[o+3]>0)&&(i=Math.max(a,i),h=Math.max(s,h),n=Math.min(a,n),e=Math.min(s,e))}return e++,h++,n++,i++,[e,n,h,i]}}};function B(t,e,h,n,i,s){return g(),d("canvas",{ref:"canvas",onMousedown:e[0]||(e[0]=(...a)=>s.mouseDown&&s.mouseDown(...a)),onMousemove:e[1]||(e[1]=(...a)=>s.mouseMove&&s.mouseMove(...a)),onMouseup:e[2]||(e[2]=(...a)=>s.mouseUp&&s.mouseUp(...a)),onTouchstart:e[3]||(e[3]=(...a)=>s.touchStart&&s.touchStart(...a)),onTouchmove:e[4]||(e[4]=(...a)=>s.touchMove&&s.touchMove(...a)),onTouchend:e[5]||(e[5]=(...a)=>s.touchEnd&&s.touchEnd(...a))},null,544)}var c=v(y,[["render",B],["__scopeId","data-v-59e3473b"]]),w="./assets/btn_cq.ee5e4b07.png",b="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARAAAABQCAYAAADRJSrNAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE4QUUxNzg4RTkyQjExRUJBQ0RFQzY4RTg3REIwRjQyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE4QUUxNzg5RTkyQjExRUJBQ0RFQzY4RTg3REIwRjQyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MThBRTE3ODZFOTJCMTFFQkFDREVDNjhFODdEQjBGNDIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MThBRTE3ODdFOTJCMTFFQkFDREVDNjhFODdEQjBGNDIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5iKZ8OAAAKsklEQVR42uyd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";const R={data(){return{lineWidth:6,lineColor:"#000000",bgColor:"white",resultImg:"",isCrop:!1,type:"",canvasWidth:0,canvasHeight:0,marginTop:""}},components:{vueEsign:c},created:function(){let t=document.body.clientHeight,e=document.body.clientWidth;this.canvasWidth=e*.9,this.canvasHeight=t*.95,this.marginTop=t*.025},mounted:function(){console.log(c)},methods:{handleReset(){this.$refs.esign.reset()},handleGenerate(){this.upload()},upload(){this.$dialog.confirm({title:"\u63D0\u793A",message:"\u786E\u8BA4\u7B7E\u540D\u65E0\u8BEF\u5E76\u63D0\u4EA4\u4E0B\u4E00\u6B65?"}).then(()=>{this.$refs.esign.generate().then(t=>{this.rotateImgByBase64(t).then(e=>{this.resultImg=e,I({studentPhotoUrl:this.resultImg}).then(h=>{let n=h.studentPhotoUrl;x({studentSignPhoto:n}).then(i=>{C({studentSignPhoto:n}),setTimeout(()=>{this.$router.push({path:"onlineRegist",query:{busiStatus:1}})},0)})})}).catch(e=>{console.log(e)})}).catch(t=>{console.log(t),Toast({message:"\u7B7E\u540D\u5931\u8D25~",position:"bottom",duration:2e3})})})},rotateImgByBase64(t){return new Promise((e,h)=>{var n=new Image;n.src=t,n.onload=function(){var i=this.naturalWidth,s=this.naturalHeight,a=document.createElement("canvas"),o=a.getContext("2d");a.width=i,a.height=s,o.drawImage(this,0,0,i,s),rotateImg(this,"left",a);let l=a.toDataURL("image/png");e(l)}})}}},u=t=>(A("data-v-76cda300"),t=t(),T(),t),D={class:"esign"},S={class:"buttons"},E=u(()=>r("img",{src:w},null,-1)),Q=[E],G=u(()=>r("img",{src:b},null,-1)),M=[G];function Z(t,e,h,n,i,s){const a=m("vue-esign");return g(),d("div",D,[f(a,{class:"canvasContainer",style:p({marginTop:i.marginTop+"px"}),ref:"esign",width:i.canvasWidth,height:i.canvasHeight,isCrop:i.isCrop,lineWidth:i.lineWidth,lineColor:i.lineColor},null,8,["style","width","height","isCrop","lineWidth","lineColor"]),r("div",S,[r("div",{class:"btn btn1",onClick:e[0]||(e[0]=(...o)=>s.handleReset&&s.handleReset(...o))},Q),r("div",{class:"btn btn2",onClick:e[1]||(e[1]=(...o)=>s.handleGenerate&&s.handleGenerate(...o))},M)])])}var L=v(R,[["render",Z],["__scopeId","data-v-76cda300"]]);export{L as default};
|