vue-nuxt-cropper
Version:
💇 A simple image crop upload component for Vue, Nuxt
7 lines (6 loc) • 16.1 kB
JavaScript
/*!
* vue-nuxt-cropper v1.0.0
* Copyright (c) 2018-present, JMRezaee
* Released under the MIT License.
*/
"use strict";var e,t=(e=require("cropperjs"))&&"object"==typeof e&&"default"in e?e.default:e;var r=function(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e};var o=function(e,t){return e(t={exports:{}},t.exports),t.exports}(function(e){var t=function(e){var t,r=Object.prototype,o=r.hasOwnProperty,n="function"==typeof Symbol?Symbol:{},i=n.iterator||"@@iterator",p=n.asyncIterator||"@@asyncIterator",c=n.toStringTag||"@@toStringTag";function a(e,t,r,o){var n=t&&t.prototype instanceof g?t:g,i=Object.create(n.prototype),p=new L(o||[]);return i._invoke=function(e,t,r){var o=u;return function(n,i){if(o===h)throw new Error("Generator is already running");if(o===f){if("throw"===n)throw i;return j()}for(r.method=n,r.arg=i;;){var p=r.delegate;if(p){var c=_(p,r);if(c){if(c===d)continue;return c}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if(o===u)throw o=f,r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);o=h;var a=s(e,t,r);if("normal"===a.type){if(o=r.done?f:l,a.arg===d)continue;return{value:a.arg,done:r.done}}"throw"===a.type&&(o=f,r.method="throw",r.arg=a.arg)}}}(e,r,p),i}function s(e,t,r){try{return{type:"normal",arg:e.call(t,r)}}catch(e){return{type:"throw",arg:e}}}e.wrap=a;var u="suspendedStart",l="suspendedYield",h="executing",f="completed",d={};function g(){}function m(){}function v(){}var y={};y[i]=function(){return this};var x=Object.getPrototypeOf,w=x&&x(x(O([])));w&&w!==r&&o.call(w,i)&&(y=w);var b=v.prototype=g.prototype=Object.create(y);function A(e){["next","throw","return"].forEach(function(t){e[t]=function(e){return this._invoke(t,e)}})}function k(e){var t;this._invoke=function(r,n){function i(){return new Promise(function(t,i){!function t(r,n,i,p){var c=s(e[r],e,n);if("throw"!==c.type){var a=c.arg,u=a.value;return u&&"object"==typeof u&&o.call(u,"__await")?Promise.resolve(u.__await).then(function(e){t("next",e,i,p)},function(e){t("throw",e,i,p)}):Promise.resolve(u).then(function(e){a.value=e,i(a)},function(e){return t("throw",e,i,p)})}p(c.arg)}(r,n,t,i)})}return t=t?t.then(i,i):i()}}function _(e,r){var o=e.iterator[r.method];if(o===t){if(r.delegate=null,"throw"===r.method){if(e.iterator.return&&(r.method="return",r.arg=t,_(e,r),"throw"===r.method))return d;r.method="throw",r.arg=new TypeError("The iterator does not provide a 'throw' method")}return d}var n=s(o,e.iterator,r.arg);if("throw"===n.type)return r.method="throw",r.arg=n.arg,r.delegate=null,d;var i=n.arg;return i?i.done?(r[e.resultName]=i.value,r.next=e.nextLoc,"return"!==r.method&&(r.method="next",r.arg=t),r.delegate=null,d):i:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,d)}function E(e){var t={tryLoc:e[0]};1 in e&&(t.catchLoc=e[1]),2 in e&&(t.finallyLoc=e[2],t.afterLoc=e[3]),this.tryEntries.push(t)}function C(e){var t=e.completion||{};t.type="normal",delete t.arg,e.completion=t}function L(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(E,this),this.reset(!0)}function O(e){if(e){var r=e[i];if(r)return r.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var n=-1,p=function r(){for(;++n<e.length;)if(o.call(e,n))return r.value=e[n],r.done=!1,r;return r.value=t,r.done=!0,r};return p.next=p}}return{next:j}}function j(){return{value:t,done:!0}}return m.prototype=b.constructor=v,v.constructor=m,v[c]=m.displayName="GeneratorFunction",e.isGeneratorFunction=function(e){var t="function"==typeof e&&e.constructor;return!!t&&(t===m||"GeneratorFunction"===(t.displayName||t.name))},e.mark=function(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,v):(e.__proto__=v,c in e||(e[c]="GeneratorFunction")),e.prototype=Object.create(b),e},e.awrap=function(e){return{__await:e}},A(k.prototype),k.prototype[p]=function(){return this},e.AsyncIterator=k,e.async=function(t,r,o,n){var i=new k(a(t,r,o,n));return e.isGeneratorFunction(r)?i:i.next().then(function(e){return e.done?e.value:i.next()})},A(b),b[c]="Generator",b[i]=function(){return this},b.toString=function(){return"[object Generator]"},e.keys=function(e){var t=[];for(var r in e)t.push(r);return t.reverse(),function r(){for(;t.length;){var o=t.pop();if(o in e)return r.value=o,r.done=!1,r}return r.done=!0,r}},e.values=O,L.prototype={constructor:L,reset:function(e){if(this.prev=0,this.next=0,this.sent=this._sent=t,this.done=!1,this.delegate=null,this.method="next",this.arg=t,this.tryEntries.forEach(C),!e)for(var r in this)"t"===r.charAt(0)&&o.call(this,r)&&!isNaN(+r.slice(1))&&(this[r]=t)},stop:function(){this.done=!0;var e=this.tryEntries[0].completion;if("throw"===e.type)throw e.arg;return this.rval},dispatchException:function(e){if(this.done)throw e;var r=this;function n(o,n){return c.type="throw",c.arg=e,r.next=o,n&&(r.method="next",r.arg=t),!!n}for(var i=this.tryEntries.length-1;i>=0;--i){var p=this.tryEntries[i],c=p.completion;if("root"===p.tryLoc)return n("end");if(p.tryLoc<=this.prev){var a=o.call(p,"catchLoc"),s=o.call(p,"finallyLoc");if(a&&s){if(this.prev<p.catchLoc)return n(p.catchLoc,!0);if(this.prev<p.finallyLoc)return n(p.finallyLoc)}else if(a){if(this.prev<p.catchLoc)return n(p.catchLoc,!0)}else{if(!s)throw new Error("try statement without catch or finally");if(this.prev<p.finallyLoc)return n(p.finallyLoc)}}}},abrupt:function(e,t){for(var r=this.tryEntries.length-1;r>=0;--r){var n=this.tryEntries[r];if(n.tryLoc<=this.prev&&o.call(n,"finallyLoc")&&this.prev<n.finallyLoc){var i=n;break}}i&&("break"===e||"continue"===e)&&i.tryLoc<=t&&t<=i.finallyLoc&&(i=null);var p=i?i.completion:{};return p.type=e,p.arg=t,i?(this.method="next",this.next=i.finallyLoc,d):this.complete(p)},complete:function(e,t){if("throw"===e.type)throw e.arg;return"break"===e.type||"continue"===e.type?this.next=e.arg:"return"===e.type?(this.rval=this.arg=e.arg,this.method="return",this.next="end"):"normal"===e.type&&t&&(this.next=t),d},finish:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var r=this.tryEntries[t];if(r.finallyLoc===e)return this.complete(r.completion,r.afterLoc),C(r),d}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var r=this.tryEntries[t];if(r.tryLoc===e){var o=r.completion;if("throw"===o.type){var n=o.arg;C(r)}return n}}throw new Error("illegal catch attempt")},delegateYield:function(e,r,o){return this.delegate={iterator:O(e),resultName:r,nextLoc:o},"next"===this.method&&(this.arg=t),d}},e}(e.exports);try{regeneratorRuntime=t}catch(e){Function("r","regeneratorRuntime = r")(t)}});function n(e,t,r,o,n,i,p){try{var c=e[i](p),a=c.value}catch(e){return void r(e)}c.done?t(a):Promise.resolve(a).then(o,n)}var i=function(e){return function(){var t=this,r=arguments;return new Promise(function(o,i){var p=e.apply(t,r);function c(e){n(p,o,i,c,a,"next",e)}function a(e){n(p,o,i,c,a,"throw",e)}c(void 0)})}},p="vue-nuxt-cropper",c={methods:{c:function(e){return e?"".concat(p).concat(e):"".concat(p)}}};!function(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===r&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}('/*!\n * Cropper.js v1.5.2\n * https://fengyuanchen.github.io/cropperjs\n *\n * Copyright 2015-present Chen Fengyuan\n * Released under the MIT license\n *\n * Date: 2019-06-30T06:01:02.389Z\n */.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}'),HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(e,t,r){for(var o=atob(this.toDataURL(t,r).split(",")[1]),n=o.length,i=new Uint8Array(n),p=0;p<n;p++)i[p]=o.charCodeAt(p);e(new Blob([i],{type:t||"image/png"}))}});var a={name:"NuxtCropper",mixins:[c],props:{src:{type:String,default:void 0},aspectRatio:{type:Number,default:1},quality:{type:Number,default:1},cropperOptions:{type:Object,default:null}},data:function(){return{}},watch:{src:function(){var e=i(o.mark(function e(t){return o.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:if(!t){e.next=8;break}if(!this.cropper){e.next=5;break}this.cropper.replace(t),e.next=8;break;case 5:return e.next=7,this.$nextTick();case 7:this.init();case 8:case"end":return e.stop()}},e,this)}));return function(t){return e.apply(this,arguments)}}()},mounted:function(){var e=i(o.mark(function e(){return o.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:if(this.cropper=null,!this.src){e.next=5;break}return e.next=4,this.$nextTick();case 4:this.init();case 5:case"end":return e.stop()}},e,this)}));return function(){return e.apply(this,arguments)}}(),methods:{init:function(){var e=function(e){for(var t=1;t<arguments.length;t++)if(t%2){var o=null!=arguments[t]?arguments[t]:{},n=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(o).filter(function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable}))),n.forEach(function(t){r(e,t,o[t])})}else Object.defineProperties(e,Object.getOwnPropertyDescriptors(arguments[t]));return e}({viewMode:1,dragMode:"move",cropBoxMovable:!1,guides:!1,center:!1,background:!1,autoCropArea:1,toggleDragModeOnDblclick:!1,aspectRatio:this.aspectRatio},this.cropperOptions);this.cropper=new t(this.$refs.img,e)},getCroppedBlob:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"image/jpeg",r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.quality;return new Promise(function(o,n){e.cropper.getCroppedCanvas().toBlob(function(e){o(e)},t,r)})}}};var s=function(e,t,r,o,n,i,p,c,a,s){"boolean"!=typeof p&&(a=c,c=p,p=!1);var u,l="function"==typeof r?r.options:r;if(e&&e.render&&(l.render=e.render,l.staticRenderFns=e.staticRenderFns,l._compiled=!0,n&&(l.functional=!0)),o&&(l._scopeId=o),i?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,a(e)),e&&e._registeredComponents&&e._registeredComponents.add(i)},l._ssrRegister=u):t&&(u=p?function(){t.call(this,s(this.$root.$options.shadowRoot))}:function(e){t.call(this,c(e))}),u)if(l.functional){var h=l.render;l.render=function(e,t){return u.call(t),h(e,t)}}else{var f=l.beforeCreate;l.beforeCreate=f?[].concat(f,u):[u]}return r},u="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var l=document.head||document.getElementsByTagName("head")[0],h={};var f=s({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",{class:this.c()},[t("img",{ref:"img",class:this.c("__img"),attrs:{src:this.src}})])},staticRenderFns:[]},function(e){e&&e("data-v-26a3cbac_0",{source:".vue-nuxt-cropper{width:100%;height:100%;margin:auto;overflow:hidden;display:flex;justify-content:center;align-items:center}.vue-nuxt-cropper__img{width:100%}.vue-nuxt-cropper .cropper-container .cropper-view-box{outline:1px solid #fff;outline-color:#fff}.vue-nuxt-cropper .cropper-container .cropper-line{background-color:#fff}.vue-nuxt-cropper .cropper-container .cropper-point{background-color:#fff;opacity:1}.vue-nuxt-cropper .cropper-container .point-e,.vue-nuxt-cropper .cropper-container .point-n,.vue-nuxt-cropper .cropper-container .point-s,.vue-nuxt-cropper .cropper-container .point-w{display:none}.vue-nuxt-cropper .cropper-container .point-ne,.vue-nuxt-cropper .cropper-container .point-nw,.vue-nuxt-cropper .cropper-container .point-se,.vue-nuxt-cropper .cropper-container .point-sw{width:10px;height:10px;opacity:.8}",map:void 0,media:void 0})},a,void 0,!1,void 0,function(e){return function(e,t){return function(e,t){var r=u?t.media||"default":e,o=h[r]||(h[r]={ids:new Set,styles:[]});if(!o.ids.has(e)){o.ids.add(e);var n=t.source;if(t.map&&(n+="\n/*# sourceURL="+t.map.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),o.element||(o.element=document.createElement("style"),o.element.type="text/css",t.media&&o.element.setAttribute("media",t.media),l.appendChild(o.element)),"styleSheet"in o.element)o.styles.push(n),o.element.styleSheet.cssText=o.styles.filter(Boolean).join("\n");else{var i=o.ids.size-1,p=document.createTextNode(n),c=o.element.childNodes;c[i]&&o.element.removeChild(c[i]),c.length?o.element.insertBefore(p,c[i]):o.element.appendChild(p)}}}(e,t)}},void 0);f.install=function(e){e.component(f.name,f)},module.exports=f;