vue-cropblg/lib/vue-cropblg.umd.min.js

vue 图片裁剪插件

(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["vue-cropblg"]=e():t["vue-cropblg"]=e()})("undefined"!==typeof self?self:this,function(){return function(t){var e={};function i(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,i),r.l=!0,r.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},i.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)i.d(n,r,function(e){return t[e]}.bind(null,r));return n},i.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s="fb15")}({f6fd:function(t,e){(function(t){var e="currentScript",i=t.getElementsByTagName("script");e in t||Object.defineProperty(t,e,{get:function(){try{throw new Error}catch(n){var t,e=(/.*at [^\(]*\((.*):.+:.+\)$/gi.exec(n.stack)||[!1])[1];for(t in i)if(i[t].src==e||"interactive"==i[t].readyState)return i[t];return null}}})})(document)},fb15:function(t,e,i){"use strict";var n;(i.r(e),"undefined"!==typeof window)&&(i("f6fd"),(n=window.document.currentScript)&&(n=n.src.match(/(.+\/)[^\/]+\.js(\?.*)?$/))&&(i.p=n[1]));var r=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{ref:"mountNode",staticClass:"mount-node",staticStyle:{overflow:"hidden"},on:{touchstart:function(e){return t.handleStart(e)},touchmove:function(e){return t.handleMove(e)},touchend:function(e){return t.handleEnd(e)}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.noImage,expression:"noImage"}],staticClass:"no-image-file",staticStyle:{height:"100%",display:"flex","justify-content":"center","align-items":"center","flex-wrap":"wrap"},on:{click:t.inputHandle,touchstart:function(t){t.stopPropagation()},touchmove:function(t){t.stopPropagation()}}},[t._t("placeholder",[i("span",[t._v("暂时没有图片,请选择图像")])]),i("div",{staticStyle:{display:"none"}},[i("input",{attrs:{type:"file",multiple:!1,id:"file-input",accept:"image/*"},on:{change:t.uploadImg}}),t._t("defaultImgUrl")],2)],2)])},a=[],o=function(t){return new Promise(function(e,i){h(t).then(function(t){var i=l(t)||1;e(i)}).catch(function(t){i(t)})})};function h(t){var e=null;return new Promise(function(i,n){if(t.src)if(/^data\:/i.test(t.src))e=s(t.src),i(e);else{var r=new XMLHttpRequest;r.onload=function(){if(200!=this.status&&0!==this.status)throw"Could not load image";e=r.response,i(e),r=null},r.open("GET",t.src,!0),r.responseType="arraybuffer",r.send(null)}else n("img error")})}function s(t){t=t.replace(/^data\:([^\;]+)\;base64,/gim,"");for(var e=atob(t),i=e.length,n=new ArrayBuffer(i),r=new Uint8Array(n),a=0;a<i;a++)r[a]=e.charCodeAt(a);return n}function c(t,e,i){var n,r="";for(n=e,i+=e;n<i;n++)r+=String.fromCharCode(t.getUint8(n));return r}function l(t){var e,i,n,r,a,o,h,s,l,d,u=new DataView(t),g=u.byteLength;if(255===u.getUint8(0)&&216===u.getUint8(1)){l=2;while(l<g){if(255===u.getUint8(l)&&225===u.getUint8(l+1)){h=l;break}l++}}if(h&&(i=h+4,n=h+10,"Exif"===c(u,i,4)&&(o=u.getUint16(n),a=18761===o,(a||19789===o)&&42===u.getUint16(n+2,a)&&(r=u.getUint32(n+4,a),r>=8&&(s=n+r)))),s)for(g=u.getUint16(s,a),d=0;d<g;d++)if(l=s+12*d+2,274===u.getUint16(l,a)){l+=8,e=u.getUint16(l,a);break}return e}function d(t,e,i,n,r,a,o){if(!/^[1-8]$/.test(e))throw new Error("orientation should be [1-8]");null==n&&(n=0),null==r&&(r=0),null==a&&(a=t.width),null==o&&(o=t.height);var h=document.createElement("canvas"),s=h.getContext("2d");switch(h.width=a,h.height=o,s.save(),+e){case 1:break;case 2:s.translate(a,0),s.scale(-1,1);break;case 3:s.translate(a,o),s.rotate(1*Math.PI);break;case 4:s.translate(0,o),s.scale(1,-1);break;case 5:h.width=o,h.height=a,s.rotate(.5*Math.PI),s.scale(1,-1);break;case 6:h.width=o,h.height=a,s.rotate(.5*Math.PI),s.translate(0,-o);break;case 7:h.width=o,h.height=a,s.rotate(1.5*Math.PI),s.translate(-a,o),s.scale(1,-1);break;case 8:h.width=o,h.height=a,s.translate(0,a),s.rotate(1.5*Math.PI);break}return s.drawImage(t,n,r,a,o),s.restore(),h}function u(t,e){return p(t)||f(t,e)||g()}function g(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}function f(t,e){var i=[],n=!0,r=!1,a=void 0;try{for(var o,h=t[Symbol.iterator]();!(n=(o=h.next()).done);n=!0)if(i.push(o.value),e&&i.length===e)break}catch(s){r=!0,a=s}finally{try{n||null==h["return"]||h["return"]()}finally{if(r)throw a}}return i}function p(t){if(Array.isArray(t))return t}function v(t){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{},n=Object.keys(i);"function"===typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(i).filter(function(t){return Object.getOwnPropertyDescriptor(i,t).enumerable}))),n.forEach(function(e){y(t,e,i[e])})}return t}function y(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}var m={name:"crop",props:["value","position","textWatermark","imgLoaded","imageWatermark","defaultImgUrl","color","angle","rotation","shape","penBtn","revokeBtn","rotateBtn"],data:function(){return{noImage:!0,ctx:null,options:null,pixelRatio:null,scale:1,canvas:null,image:{},points:[],lines:[],cropper:{},corePoint:{},startPoint:{},nookSide:20,rotateAngle:0,bgOpacity:0,touchBar:null,paintBrush:null,revokeBar:null}},watch:{shape:function(){this.noImage||this.draw()},rotation:function(){this.noImage||this.rotateBtn||this.drawAction||(this.rotateAngle=this.rotation,this.draw())}},methods:{init:function(t){this.pointList=[];var e=t.width,i=t.height,n=this.options,r=n.width,a=n.height,o=e,h=i,s=1;e>r&&(o=r,s=o/e,h=s*i),h>a&&(h=a,s=h/i,o=s*e);var c=120;e<c&&h<c&&(o=c,s=o/e,h=s*i),this.scale=s,this.image={element:t,width:o,height:h,x:(r-o)/2,y:(a-h)/2,clientWidth:e,clientHeight:i};var l=this.corePoint={x:r/2,y:a/2};this.maxRadius=Math.min(r,a)/2,this.arc={x:l.x,y:l.y,r:this.maxRadius/2},this.cropper={x:(r-o/2)/2,y:(a-h/2)/2,width:o/2,height:h/2};var d=8,u=0,g=void 0===this.rotateBtn||this.rotateBtn,f=void 0===this.penBtn||this.penBtn,p=void 0===this.revokeBtn||this.revokeBtn;g&&(this.touchBar={x:r-30-7,y:10,width:30,height:30},u++),f&&(this.paintBrush={x:r-30-7,y:10+(30+d)*u,width:30,height:30},u++),p&&(this.revokeBar={x:r-30-7,y:10+(30+d)*u,width:30,height:30},u++),this.draw()},draw:function(){var t=this.options,e=t.width,i=t.height,n=this.shape||"rect";this.ctx.clearRect(0,0,e,i),this.fillBackground(),this.fillImage(),this.drawPointFn(this.ctx),this.averageColor||(this.averageColor=this.getImageColor(this.ctx.getImageData(this.corePoint.x-25,this.corePoint.y-25,50,50).data)),"arc"===n?this.fillArcCropper():"rect"===n&&(this.updatePoint(),this.fillRectCropper()),this.drawTouchBar(this.touchBar),this.drawPaintBrush(this.paintBrush),this.drawRevokeBar(this.revokeBar)},drawPointFn:function(t){var e=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.image,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:this.image,a=this.pointList;a.length>0&&a.forEach(function(a){var o=e.scale/a.scale,h=e.limit(a.lineWidth*o,1,5);t.lineWidth=i?2*h:h,t.strokeStyle=a.color,t.lineCap="round",t.beginPath(),a.pointLine.forEach(function(e,a){0===a&&(i?t.moveTo((r.x+e.x*o-n.x)*i,(r.y+e.y*o-n.y)*i):t.moveTo(r.x+e.x*o,r.y+e.y*o)),i?t.lineTo((r.x+e.x*o-n.x)*i,(r.y+e.y*o-n.y)*i):t.lineTo(r.x+e.x*o,r.y+e.y*o)}),t.stroke()})},drawPaintBrush:function(t){if(t){var e=t.x,i=t.y,n=this.ctx,r=this.color||this.averageColor;n.lineWidth=2,n.lineCap="round",n.beginPath(),n.moveTo(e+20,i+5),n.lineTo(e+24,i+9),n.lineTo(e+12,i+21),n.lineTo(e+7,i+22),n.lineTo(e+8,i+17),n.closePath(),this.drawAction&&(n.fillStyle=r,n.fill()),n.moveTo(e+5,i+26),n.lineTo(e+25,i+26),n.stroke()}},drawRevokeBar:function(t){if(t){var e=t.x,i=t.y,n=this.ctx,r=this.color||this.averageColor;n.lineWidth=2,n.lineCap="round",n.beginPath(),n.moveTo(e+15,i+12),n.lineTo(e+15,i+8),n.lineTo(e+7,i+15),n.lineTo(e+15,i+22),n.lineTo(e+15,i+18),n.stroke(),n.fillStyle=r,n.fill(),n.beginPath(),n.arc(e+15,i+24,12,-Math.PI/2,-Math.PI/180*18,!1),n.arc(e+15,i+35,17,-Math.PI/180*45,-Math.PI/2,!0),n.stroke(),n.fillStyle=r,n.fill()}},drawTouchBar:function(t){if(t){var e=this.ctx,i=this.color||this.averageColor,n=t.x+.6*t.width,r=t.y+.64*t.height,a=.41*t.width,o=6,h=.1*t.width,s=.18*t.width;if(e.lineWidth=1,e.fillStyle=i,e.fillRect(n-t.width/6,r-t.height/6,.43*t.width,.43*t.height),e.beginPath(),e.arc(n,r,a,Math.PI/180*180,-Math.PI/2+o,!1),e.stroke(),o<2*Math.PI){var c=n+(a-h)*Math.sin(o),l=r-(a-h)*Math.cos(o),d=n+(a+h)*Math.sin(o),u=r-(a+h)*Math.cos(o),g=(c+d)/2+s*Math.sin(o+Math.PI/2),f=(l+u)/2-s*Math.cos(o+Math.PI/2);e.beginPath(),e.moveTo(g,f),e.lineTo(c,l),e.lineTo(d,u),e.fill()}}},fillImage:function(){var t=this.image,e=this.ctx,i=this.rotateAngle;this.canvasRotate("img",e,t.element,i,t.x,t.y,t.width,t.height)},updatePoint:function(){var t=this.cropper,e=this.nookSide,i=t.x+t.width,n=t.y+t.height,r=i-e,a=n-e;this.points=[{x:t.x,y:t.y,width:e,height:e,diffX:0,diffY:0},{x:r,y:t.y,width:e,height:e,diffX:e,diffY:0},{x:r,y:a,width:e,height:e,diffX:e,diffY:e},{x:t.x,y:a,width:e,height:e,diffX:0,diffY:e}];var o=e/.7,h=o/2;this.lines=[{x:t.x,y:t.y-h,width:t.width,height:o},{x:i-h,y:t.y,width:o,height:t.height},{x:t.x,y:n-h,width:t.width,height:o},{x:t.x-h,y:t.y,width:o,height:t.height}]},fillRectCropper:function(){var t=this.ctx,e=this.cropper,i=this.points,n=this.color||this.averageColor;t.strokeStyle=n,t.lineWidth=2,t.strokeRect(e.x,e.y,e.width,e.height),t.fillStyle=n;var r=this.nookSide/8;i.forEach(function(e,i){t.save(),t.translate(e.x+e.diffX,e.y+e.diffY),t.rotate(90*i*(Math.PI/180)),t.fillRect(-r,-r,e.height,2*r),t.fillRect(-r,-r,2*r,e.width),t.restore()})},fillArcCropper:function(){var t=this.ctx;t.beginPath(),t.strokeStyle=this.color||this.averageColor,t.lineWidth=2,t.arc(this.arc.x,this.arc.y,this.arc.r,0,2*Math.PI),t.stroke()},handleArcMove:function(t){var e=t.x,i=t.y;this.arc.r=this.limit(this.getDistance({pageX:e,pageY:i},{pageX:this.arc.x,pageY:this.arc.y}),2*this.nookSide,this.maxRadius),this.draw()},fillBackground:function(){var t=this.options,e=t.width,i=t.height,n=this.ctx;n.save(),n.fillStyle="#fff",n.fillStyle="rgba(0, 0, 0, ".concat(this.bgOpacity,")"),n.fillRect(0,0,e,i),n.restore()},getNewCropper:function(t,e,i){return{cropperWidth:i.x+i.width-t,cropperHeight:i.y+i.height-e,cropperX:t-i.x,cropperY:e-i.y}},handlePointMove:function(t){var e=t.x,i=t.y,n=this.cropper,r={},a=this.getNewCropper(e,i,n),o=a.cropperWidth,h=a.cropperHeight,s=a.cropperX,c=a.cropperY;switch(this.index){case 0:r.width=o,r.height=h,r.x=e,r.y=i;break;case 1:r.width=s,r.height=h,r.y=i;break;case 3:r.width=o,r.height=c,r.x=e;break;case 2:r.width=s,r.height=c;break;default:break}this.renderCropper(r)},handleLineMove:function(t){var e=t.x,i=t.y,n=this.cropper,r={},a=this.getNewCropper(e,i,n),o=a.cropperWidth,h=a.cropperHeight,s=a.cropperX,c=a.cropperY;switch(this.index){case 3:r.width=o,r.x=e;break;case 0:r.height=h,r.y=i;break;case 1:r.width=s;break;case 2:r.height=c;break;default:break}this.renderCropper(r)},renderCropper:function(t){t.width<=4*this.nookSide||t.height<=4*this.nookSide||(this.cropper=v({},this.cropper,t),this.draw())},handleImageMove:function(t){var e=t.x,i=t.y,n=this.startPoint;this.image.x=e-n.offsetX,this.image.y=i-n.offsetY,this.draw()},getCoordinateByEvent:function(t){var e=t.target.getBoundingClientRect(),i=t.touches[0],n=this.options,r=n.width,a=n.height,o={x:this.limit(i.clientX-e.left,2,r-2),y:this.limit(i.clientY-e.top,2,a-2)};return o},handleEnd:function(){if(this.changeDrawAction)return this.drawAction?(this.drawAction=!1,this.bgOpacity=0,this.draw()):(this.drawAction=!0,this.bgOpacity=.4,this.draw()),void(this.changeDrawAction=!1);if(this.drawAction&&this.pointLine.length>0){this.drawPoint.x=this.drawPoint.x-this.image.x,this.drawPoint.y=this.drawPoint.y-this.image.y,this.pointLine.push(this.drawPoint);var t={pointLine:this.pointLine,scale:this.scale,lineWidth:3,color:this.color||this.averageColor,rotateAngle:this.rotateAngle};this.pointList.push(t),this.pointLine=[]}},handleStart:function(t){if(t.preventDefault(),t.touches.length>1)return this.startTouches=t.touches,void(this.startPoint.type=null);this.drawPoint=this.getCoordinateByEvent(t),this.startPoint=this.getPointByCoordinate(this.drawPoint),this.drawAction&&(this.pointLine=[],this.ctx.beginPath(),this.ctx.moveTo(this.drawPoint.x,this.drawPoint.y))},handleMove:function(t){t.preventDefault();var e=t.touches,i=this.image;if(e.length>1&&!this.drawAction){var n,r=this.startTouches,a=this.scale;n=this.getDistance(e[0],e[1])/this.getDistance(r[0],r[1]),n=n<1?1/(1+n/80):1+Math.abs(n)/160,n*=a,this.scale=this.limit(n,.02,1.07);var o=i.clientWidth*this.scale,h=i.clientHeight*this.scale;return this.image.x+=(i.width-o)/2,this.image.y+=(i.height-h)/2,this.image.width=o,this.image.height=h,void this.draw()}if(this.drawAction){var s=this.drawPoint,c=this.getCoordinateByEvent(t),l=this.ctx,d=this.color||this.averageColor;return l.lineTo(c.x,c.y),l.lineWidth=3,l.strokeStyle=d,l.lineCap="round",l.stroke(),s.x=s.x-i.x,s.y=s.y-i.y,this.pointLine.push(s),void(this.drawPoint=c)}var u=this.startPoint?this.startPoint.type:null;u&&this.getCoordinateByEvent(t)&&this[u](this.getCoordinateByEvent(t))},checkRegion:function(t,e,i){return t>i.x&&t<i.x+i.width&&e>i.y&&e<i.y+i.height},checkArc:function(t,e){var i=this.ctx;return i.beginPath(),i.lineWidth=this.nookSide/.7,i.arc(this.arc.x,this.arc.y,this.arc.r+i.lineWidth,0,2*Math.PI),i.isPointInPath(t*this.pixelRatio,e*this.pixelRatio)&&this.getDistance({pageX:t,pageY:e},{pageX:this.arc.x,pageY:this.arc.y})>this.arc.r-i.lineWidth/2},getPointByCoordinate:function(t){var e=this,i=t.x,n=t.y,r=this.image,a=this.shape||"rect",o={},h=0;if(this.paintBrush&&this.checkRegion(i,n,this.paintBrush))this.changeDrawAction=!0;else{if(this.revokeBar&&this.checkRegion(i,n,this.revokeBar))return this.pointList.pop(),void this.draw();if(this.touchBar&&this.checkRegion(i,n,this.touchBar))return this.rotateAngle=(this.rotateAngle+this.angle)%360,void this.draw();if(!this.drawAction)return"arc"===a&&this.checkArc(i,n)?o.type="handleArcMove":"arc"!==a&&this.points.some(function(t,r){return h=r,e.checkRegion(i,n,t)})?(o.type="handlePointMove",this.index=h):"rect"===a&&this.lines.some(function(t,r){return h=r,e.checkRegion(i,n,t)})?(o.type="handleLineMove",this.index=h):this.checkRegion(i,n,r)&&(o.offsetX=i-r.x,o.offsetY=n-r.y,o.type="handleImageMove"),o}},getDistance:function(t,e){var i=e.pageX-t.pageX,n=e.pageY-t.pageY;return Math.sqrt(i*i+n*n)},limit:function(t,e,i){return t<e?e:t>i?i:t},getImage:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"Base64",i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"image/jpeg",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;if(!this.noImage){var r=this.shape||"rect",a=this.cropper;"imgage"==r?a=this.image:"arc"===r&&(a={x:this.arc.x-this.arc.r,y:this.arc.y-this.arc.r,width:2*this.arc.r,height:2*this.arc.r});var o=this.image,h=this.pixelRatio,s={Base64:function(t,e,i){i(t.toDataURL(e))},Blob:function(t,e,i){t.toBlob(function(t){i(t)},e)}},c=a.width*n,l=a.height*n,d=document.createElement("canvas"),g=d.getContext("2d");d.width=c*h,d.height=l*h,g.scale(h,h),g.clearRect(0,0,c,l);var f=this.rotateAngle;if("arc"===r){var p=c/2;g.beginPath(),g.arc(p,p,p,0,2*Math.PI,!1),g.clip()}return this.canvasRotate("img",g,o.element,f,(o.x-a.x)*n,(o.y-a.y)*n,o.width*n,o.height*n),this.drawPointFn(g,n,a),new Promise(function(r,a){if(s[e]){var o=u(t.position,4),h=o[0],f=void 0===h?"50%":h,p=o[1],v=void 0===p?"50%":p,y=o[2],m=void 0===y?1:y,w=o[3],x=void 0===w?0:w;if(t.imageWatermark){var b=new Image;return b.src=t.getFileSrc(t.imageWatermark),b.crossOrigin="anonymous",void(b.onload=function(){var a=b.width*m*n/100,o=b.height*m*n/100,h=(c-a)*parseInt(f)/100,u=(l-o)*parseInt(v)/100;t.canvasRotate("img",g,b,x,h,u,a,o),s[e](d,i,r)})}if(t.textWatermark){var P=t.limit(m,12,100);g.font=P+"px Georgia";var k=t.textWatermark,I=g.measureText(k).width,B=(c-1.031*I)*parseInt(f)/100,C=(l+.72*P)*parseInt(v)/100;return g.fillStyle=t.color||t.averageColor,"#ffffff"===g.fillStyle&&(g.fillStyle="#000"),t.canvasRotate("text",g,k,x,B,C,I,P),void s[e](d,i,r)}s[e](d,i,r)}else a("type = Blob || Base64")})}},canvasRotate:function(t,e,i,n,r,a,o,h){e.save();var s=h/2,c=o/2;e.translate(r+c,a+s),e.rotate(Math.PI/180*n),"img"===t?e.drawImage(i,-c,-s,o,h):"text"===t&&e.fillText(i,-c,-s),e.restore()},changeImage:function(t){this.noImage||(this.averageColor=null,t?this.createImage(t):this.inputHandle())},getPixelRatio:function(t){var e=t.backingStorePixelRatio||t.webkitBackingStorePixelRatio||t.mozBackingStorePixelRatio||t.msBackingStorePixelRatio||t.oBackingStorePixelRatio||t.backingStorePixelRatio||1;return(window.devicePixelRatio||1)/e},uploadImg:function(t){this.createImage(t.target.files[0]),this.noImage=!1},getFileSrc:function(t){return"[object File]"===Object.prototype.toString.call(t)&&(t=window.URL.createObjectURL(t)),t},createImage:function(t){var e=this,i=new Image;i.crossOrigin="anonymous",i.src=this.getFileSrc(t),i.onload=function(){o(i).then(function(t){if(1===t)return e.init(i),void e.$emit("imgLoaded");e.init(i),e.init(d(i,t)),e.$emit("imgLoaded")}).catch(function(t){console.error(t)})}},inputHandle:function(){document.getElementById("file-input").click()},getImageColor:function(t){for(var e=0,i=0,n=0,r=this.limit(t.length,1,20),a=0;a<r;a++)for(var o=0;o<r;o++)e+=t[4*(r*a+o)],i+=t[4*(r*a+o)+1],n+=t[4*(r*a+o)+2];return e/=r*r,i/=r*r,n/=r*r,e=Math.round(e),i=Math.round(i),n=Math.round(n),"rgba(".concat(255-e,", ").concat(255-i,", ").concat(255-n,", 1)")}},mounted:function(){var t=this.$refs.mountNode,e=t.clientWidth,i=t.clientHeight;this.options={width:e,height:i};var n=document.createElement("canvas");n.style.width=e+"px",n.style.height=i+"px",n.style.backgroundColor="#fff",n.style.backgroundImage="linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%)",n.style.backgroundSize="29px 29px",n.style.backgroundPosition="0 0, 15px 15px",t.appendChild(n),this.ctx=n.getContext("2d");var r=this.pixelRatio=this.getPixelRatio(this.ctx);if(n.width=e*r,n.height=i*r,this.ctx.scale(r,r),this.defaultImgUrl||this.$slots.defaultImgUrl){var a=this.defaultImgUrl?this.defaultImgUrl:this.$slots.defaultImgUrl[0].data.attrs.src;this.createImage(a),this.noImage=!1}this.$emit("input",{getImage:this.getImage,changeImage:this.changeImage})}},w=m;function x(t,e,i,n,r,a,o,h){var s,c="function"===typeof t?t.options:t;if(e&&(c.render=e,c.staticRenderFns=i,c._compiled=!0),n&&(c.functional=!0),a&&(c._scopeId="data-v-"+a),o?(s=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__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},c._ssrRegister=s):r&&(s=h?function(){r.call(this,this.$root.$options.shadowRoot)}:r),s)if(c.functional){c._injectStyles=s;var l=c.render;c.render=function(t,e){return s.call(e),l(t,e)}}else{var d=c.beforeCreate;c.beforeCreate=d?[].concat(d,s):[s]}return{exports:t,options:c}}var b=x(w,r,a,!1,null,null,null),P=b.exports,k=function t(e){t.installed||(t.installed=!0,e.component(P.name,P))};"undefined"!==typeof window&&window.Vue&&k(window.Vue);var I={install:k,crop:P};i.d(e,"crop",function(){return P});e["default"]=I}})});
//# sourceMappingURL=vue-cropblg.umd.min.js.map