vue-esign.js

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("vue-esign",[],e):"object"==typeof exports?exports["vue-esign"]=e():t["vue-esign"]=e()}("undefined"!=typeof self?self:this,function(){return function(t){function e(s){if(n[s])return n[s].exports;var a=n[s]={i:s,l:!1,exports:{}};return t[s].call(a.exports,a,a.exports,e),a.l=!0,a.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,s){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:s})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/dist/",e(e.s=1)}([function(t,e,n){"use strict";function s(t){if(Array.isArray(t)){for(var e=0,n=Array(t.length);e<t.length;e++)n[e]=t[e];return n}return Array.from(t)}e.a={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}},data:function(){return{hasDrew:!1,resultImg:"",points:[],canvasTxt:null,startX:0,startY:0,isDrawing:!1,sratio:1}},computed:{ratio:function(){return this.height/this.width},stageInfo:function(){return this.$refs.canvas.getBoundingClientRect()},myBg:function(){return this.bgColor?this.bgColor:"rgba(255, 255, 255, 0)"}},watch:{myBg:function(t){this.$refs.canvas.style.background=t}},beforeMount:function(){window.addEventListener("resize",this.$_resizeHandler)},beforeDestroy:function(){window.removeEventListener("resize",this.$_resizeHandler)},mounted:function(){var t=this,e=this.$refs.canvas;e.height=this.height,e.width=this.width,e.style.background=this.myBg,this.$_resizeHandler(),document.onmouseup=function(){t.isDrawing=!1}},methods:{$_resizeHandler:function(){var t=this.$refs.canvas;t.style.width=this.width+"px";var 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:function(t){t=t||event,t.preventDefault(),this.isDrawing=!0,this.hasDrew=!0;var e={x:t.offsetX,y:t.offsetY};this.drawStart(e)},mouseMove:function(t){if(t=t||event,t.preventDefault(),this.isDrawing){var e={x:t.offsetX,y:t.offsetY};this.drawMove(e)}},mouseUp:function(t){t=t||event,t.preventDefault();var e={x:t.offsetX,y:t.offsetY};this.drawEnd(e),this.isDrawing=!1},touchStart:function(t){if(t=t||event,t.preventDefault(),this.hasDrew=!0,1===t.touches.length){var 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:function(t){if(t=t||event,t.preventDefault(),1===t.touches.length){var 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:function(t){if(t=t||event,t.preventDefault(),1===t.touches.length){var 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:function(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:function(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:function(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:function(t){var e=this,n=t&&t.format?t.format:this.format,a=t&&t.quality?t.quality:this.quality;return new Promise(function(t,i){if(!e.hasDrew)return void i("Warning: Not Signned!");var r=e.canvasTxt.getImageData(0,0,e.$refs.canvas.width,e.$refs.canvas.height);e.canvasTxt.globalCompositeOperation="destination-over",e.canvasTxt.fillStyle=e.myBg,e.canvasTxt.fillRect(0,0,e.$refs.canvas.width,e.$refs.canvas.height),e.resultImg=e.$refs.canvas.toDataURL(n,a);var o=e.resultImg;if(e.canvasTxt.clearRect(0,0,e.$refs.canvas.width,e.$refs.canvas.height),e.canvasTxt.putImageData(r,0,0),e.canvasTxt.globalCompositeOperation="source-over",e.isCrop){var u,c=e.getCropArea(r.data),h=document.createElement("canvas"),f=h.getContext("2d");h.width=c[2]-c[0],h.height=c[3]-c[1];var l=(u=e.canvasTxt).getImageData.apply(u,s(c));f.globalCompositeOperation="destination-over",f.putImageData(l,0,0),f.fillStyle=e.myBg,f.fillRect(0,0,h.width,h.height),o=h.toDataURL(n,a),h=null}t(o)})},reset:function(){this.canvasTxt.clearRect(0,0,this.$refs.canvas.width,this.$refs.canvas.height),this.isClearBgColor&&(this.$emit("update:bgColor",""),this.$refs.canvas.style.background="rgba(255, 255, 255, 0)"),this.points=[],this.hasDrew=!1,this.resultImg=""},getCropArea:function(t){for(var e=this.$refs.canvas.width,n=0,s=this.$refs.canvas.height,a=0,i=0;i<this.$refs.canvas.width;i++)for(var r=0;r<this.$refs.canvas.height;r++){var o=4*(i+this.$refs.canvas.width*r);(t[o]>0||t[o+1]>0||t[o+2]||t[o+3]>0)&&(a=Math.max(r,a),n=Math.max(i,n),s=Math.min(r,s),e=Math.min(i,e))}return e++,n++,s++,a++,[e,s,n,a]}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var s=n(2);s.a.install=function(t){this.installed||(this.installed=!0,t.component("vueEsign",s.a))},"undefined"!=typeof window&&window.Vue&&window.Vue.use(s.a),e.default=s.a},function(t,e,n){"use strict";function s(t){n(3)}var a=n(0),i=n(9),r=n(8),o=s,u=r(a.a,i.a,!1,o,"data-v-3c4c4767",null);e.a=u.exports},function(t,e,n){var s=n(4);"string"==typeof s&&(s=[[t.i,s,""]]),s.locals&&(t.exports=s.locals);n(6)("4776b451",s,!0,{})},function(t,e,n){e=t.exports=n(5)(!1),e.push([t.i,"canvas[data-v-3c4c4767]{max-width:100%;display:block}",""])},function(t,e){function n(t,e){var n=t[1]||"",a=t[3];if(!a)return n;if(e&&"function"==typeof btoa){var i=s(a);return[n].concat(a.sources.map(function(t){return"/*# sourceURL="+a.sourceRoot+t+" */"})).concat([i]).join("\n")}return[n].join("\n")}function s(t){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t))))+" */"}t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var s=n(e,t);return e[2]?"@media "+e[2]+"{"+s+"}":s}).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var s={},a=0;a<this.length;a++){var i=this[a][0];"number"==typeof i&&(s[i]=!0)}for(a=0;a<t.length;a++){var r=t[a];"number"==typeof r[0]&&s[r[0]]||(n&&!r[2]?r[2]=n:n&&(r[2]="("+r[2]+") and ("+n+")"),e.push(r))}},e}},function(t,e,n){function s(t){for(var e=0;e<t.length;e++){var n=t[e],s=h[n.id];if(s){s.refs++;for(var a=0;a<s.parts.length;a++)s.parts[a](n.parts[a]);for(;a<n.parts.length;a++)s.parts.push(i(n.parts[a]));s.parts.length>n.parts.length&&(s.parts.length=n.parts.length)}else{for(var r=[],a=0;a<n.parts.length;a++)r.push(i(n.parts[a]));h[n.id]={id:n.id,refs:1,parts:r}}}}function a(){var t=document.createElement("style");return t.type="text/css",f.appendChild(t),t}function i(t){var e,n,s=document.querySelector("style["+m+'~="'+t.id+'"]');if(s){if(v)return p;s.parentNode.removeChild(s)}if(y){var i=d++;s=l||(l=a()),e=r.bind(null,s,i,!1),n=r.bind(null,s,i,!0)}else s=a(),e=o.bind(null,s),n=function(){s.parentNode.removeChild(s)};return e(t),function(s){if(s){if(s.css===t.css&&s.media===t.media&&s.sourceMap===t.sourceMap)return;e(t=s)}else n()}}function r(t,e,n,s){var a=n?"":s.css;if(t.styleSheet)t.styleSheet.cssText=x(e,a);else{var i=document.createTextNode(a),r=t.childNodes;r[e]&&t.removeChild(r[e]),r.length?t.insertBefore(i,r[e]):t.appendChild(i)}}function o(t,e){var n=e.css,s=e.media,a=e.sourceMap;if(s&&t.setAttribute("media",s),g.ssrId&&t.setAttribute(m,e.id),a&&(n+="\n/*# sourceURL="+a.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(a))))+" */"),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}var u="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!u)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var c=n(7),h={},f=u&&(document.head||document.getElementsByTagName("head")[0]),l=null,d=0,v=!1,p=function(){},g=null,m="data-vue-ssr-id",y="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());t.exports=function(t,e,n,a){v=n,g=a||{};var i=c(t,e);return s(i),function(e){for(var n=[],a=0;a<i.length;a++){var r=i[a],o=h[r.id];o.refs--,n.push(o)}e?(i=c(t,e),s(i)):i=[];for(var a=0;a<n.length;a++){var o=n[a];if(0===o.refs){for(var u=0;u<o.parts.length;u++)o.parts[u]();delete h[o.id]}}}};var x=function(){var t=[];return function(e,n){return t[e]=n,t.filter(Boolean).join("\n")}}()},function(t,e){t.exports=function(t,e){for(var n=[],s={},a=0;a<e.length;a++){var i=e[a],r=i[0],o=i[1],u=i[2],c=i[3],h={id:t+":"+a,css:o,media:u,sourceMap:c};s[r]?s[r].parts.push(h):n.push(s[r]={id:r,parts:[h]})}return n}},function(t,e){t.exports=function(t,e,n,s,a,i){var r,o=t=t||{},u=typeof t.default;"object"!==u&&"function"!==u||(r=t,o=t.default);var c="function"==typeof o?o.options:o;e&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0),n&&(c.functional=!0),a&&(c._scopeId=a);var h;if(i?(h=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),s&&s.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(i)},c._ssrRegister=h):s&&(h=s),h){var f=c.functional,l=f?c.render:c.beforeCreate;f?(c._injectStyles=h,c.render=function(t,e){return h.call(e),l(t,e)}):c.beforeCreate=l?[].concat(l,h):[h]}return{esModule:r,exports:o,options:c}}},function(t,e,n){"use strict";var s=function(){var t=this,e=t.$createElement;return(t._self._c||e)("canvas",{ref:"canvas",on:{mousedown:t.mouseDown,mousemove:t.mouseMove,mouseup:t.mouseUp,touchstart:t.touchStart,touchmove:t.touchMove,touchend:t.touchEnd}})},a=[],i={render:s,staticRenderFns:a};e.a=i}])});
//# sourceMappingURL=vue-esign.js.map