simplepictureuploader/dist/vue-simplepictureuploader.js

Simple Picture Uploader for Vue with scaling, framing

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("vue-simplepictureuploader",[],e):"object"==typeof exports?exports["vue-simplepictureuploader"]=e():t["vue-simplepictureuploader"]=e()}("undefined"!=typeof self?self:this,function(){return function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},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="",e(e.s=11)}([function(t,e){var n=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},function(t,e){var n=t.exports={version:"2.6.5"};"number"==typeof __e&&(__e=n)},function(t,e){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,e,n){t.exports=!n(4)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(t,e){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,e,n){"use strict";var r=n(18),o=n.n(r),i=n(47),a=n.n(i);e.a={name:"PictureUploadPowered",model:{prop:"value",event:"change"},props:{value:String,width:{type:Number,required:!0},height:{type:Number,required:!0}},data:function(){return{somethingOver:!1,movingStartPoint:null,imageParams:{x:0,y:0,scale:1},startImageParams:{x:0,y:0,scale:1},loadedImage:null}},computed:{filePreview:function(){return this.loadedImage||this.value},scaledWidth:function(){return 2*this.width},scaledHeight:function(){return 2*this.height}},methods:{onDragOver:function(t){t.preventDefault()},onDragEnter:function(){this.somethingOver=!0},onDragLeave:function(){this.somethingOver=!1},onDrop:function(t){this.somethingOver=!1;var e=t.dataTransfer.files;this.handleFiles(e)},onFileSelected:function(t){this.somethingOver=!1,this.handleFiles(t.target.files)},onClick:function(){this.$refs.input.click()},handleFiles:function(t){var e=t.length>0?t[0]:null;if(e)return e.type.includes("image")?void this.readFile(URL.createObjectURL(e)):void alert("Пожалуйста используйте следующие типы файлов для загрузки: JPG, PNG, BMP")},readFile:function(t){var e=this,n=new Image;n.onload=function(){e.loadedImage=n,e.setNormalizeImageParams(0,0,1)},n.src=t},startMoving:function(t){this.movingStartPoint={x:t.x,y:t.y},this.startImageParams=o()({},this.imageParams)},stopMoving:function(){this.movingStartPoint&&(this.movingStartPoint=null)},mouseUp:function(t){var e=this.movingStartPoint,n=e.x,r=e.y,o=Math.sqrt(Math.pow(t.x-n,2)+Math.pow(t.y-r,2));console.log(o,10),this.stopMoving(),o<10&&this.onClick()},moving:function(t){if(this.movingStartPoint){var e=.8*(this.movingStartPoint.x-t.x),n=.8*(this.movingStartPoint.y-t.y),r=Math.min(0,this.startImageParams.x-e),o=Math.min(0,this.startImageParams.y-n);this.setNormalizeImageParams(r,o,this.imageParams.scale)}},setNormalizeImageParams:function(t,e,n){var r=this.$refs.canvas,o=r.width/this.loadedImage.width,i=r.height/this.loadedImage.height,a=Math.max(o,i),u=Math.min(2,Math.max(a,n||this.imageParams.scale)),s=-1*(this.loadedImage.width*u-r.width),c=-1*(this.loadedImage.height*u-r.height);this.imageParams={scale:u,x:Math.max(t,s),y:Math.max(e,c)}},scaling:function(t){if(t.target===this.$refs.canvas){t.preventDefault(),t.stopPropagation();var e=Math.max(0,this.imageParams.scale-5e-4*t.wheelDelta);this.setNormalizeImageParams(this.imageParams.x,this.imageParams.y,e)}},updateCanvas:function(){var t=this.$refs.canvas,e=t.getContext("2d");e.clearRect(0,0,t.width,t.height),e.drawImage(this.loadedImage,this.imageParams.x,this.imageParams.y,this.loadedImage.width*this.imageParams.scale,this.loadedImage.height*this.imageParams.scale),this.updateModel()},updateModel:a()(function(){this.$emit("change",this.$refs.canvas.toDataURL())},1e3)},watch:{loadedImage:function(){this.updateCanvas()},imageParams:function(){this.updateCanvas()},value:function(t,e){e||!t||this.loadedImage||this.readFile(t)}},mounted:function(){window.document.addEventListener("mousemove",this.moving),window.document.addEventListener("mouseup",this.stopMoving),window.document.addEventListener("mousewheel",this.scaling)},destroyed:function(){window.document.removeEventListener("mousemove",this.moving),window.document.removeEventListener("mouseup",this.stopMoving),window.document.removeEventListener("mousewheel",this.scaling)}}},function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},function(t,e,n){var r=n(8),o=n(9);t.exports=function(t){return r(o(t))}},function(t,e,n){var r=n(35);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==r(t)?t.split(""):Object(t)}},function(t,e){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on  "+t);return t}},function(t,e){var n=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:n)(t)}},function(t,e,n){"use strict";function r(t){a||n(12)}Object.defineProperty(e,"__esModule",{value:!0});var o=n(5),i=n(49),a=!1,u=n(17),s=r,c=u(o.a,i.a,!1,s,"data-v-5000de51",null);c.options.__file="src/SimplePictureUploader.vue",e.default=c.exports},function(t,e,n){var r=n(13);"string"==typeof r&&(r=[[t.i,r,""]]),r.locals&&(t.exports=r.locals);n(15)("64739820",r,!1,{})},function(t,e,n){e=t.exports=n(14)(!1),e.push([t.i,'\n.pup[data-v-5000de51] {\n    display: inline-block;\n    padding: 20px;\n    background-color: #f7f9fa;\n}\n.pup_container[data-v-5000de51] {\n    position: relative;\n    border: 1px dashed #c1c2c3;\n}\n.nomouseevents[data-v-5000de51] {\n    pointer-events: none;\n}\n.filepreview canvas[data-v-5000de51] {\n    cursor: move;\n}\ninput[type="file"][data-v-5000de51] {\n    display: none;\n}\n',""])},function(t,e){function n(t,e){var n=t[1]||"",o=t[3];if(!o)return n;if(e&&"function"==typeof btoa){var i=r(o);return[n].concat(o.sources.map(function(t){return"/*# sourceURL="+o.sourceRoot+t+" */"})).concat([i]).join("\n")}return[n].join("\n")}function r(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 r=n(e,t);return e[2]?"@media "+e[2]+"{"+r+"}":r}).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},o=0;o<this.length;o++){var i=this[o][0];"number"==typeof i&&(r[i]=!0)}for(o=0;o<t.length;o++){var a=t[o];"number"==typeof a[0]&&r[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),e.push(a))}},e}},function(t,e,n){function r(t){for(var e=0;e<t.length;e++){var n=t[e],r=f[n.id];if(r){r.refs++;for(var o=0;o<r.parts.length;o++)r.parts[o](n.parts[o]);for(;o<n.parts.length;o++)r.parts.push(i(n.parts[o]));r.parts.length>n.parts.length&&(r.parts.length=n.parts.length)}else{for(var a=[],o=0;o<n.parts.length;o++)a.push(i(n.parts[o]));f[n.id]={id:n.id,refs:1,parts:a}}}}function o(){var t=document.createElement("style");return t.type="text/css",l.appendChild(t),t}function i(t){var e,n,r=document.querySelector("style["+g+'~="'+t.id+'"]');if(r){if(v)return h;r.parentNode.removeChild(r)}if(y){var i=d++;r=p||(p=o()),e=a.bind(null,r,i,!1),n=a.bind(null,r,i,!0)}else r=o(),e=u.bind(null,r),n=function(){r.parentNode.removeChild(r)};return e(t),function(r){if(r){if(r.css===t.css&&r.media===t.media&&r.sourceMap===t.sourceMap)return;e(t=r)}else n()}}function a(t,e,n,r){var o=n?"":r.css;if(t.styleSheet)t.styleSheet.cssText=x(e,o);else{var i=document.createTextNode(o),a=t.childNodes;a[e]&&t.removeChild(a[e]),a.length?t.insertBefore(i,a[e]):t.appendChild(i)}}function u(t,e){var n=e.css,r=e.media,o=e.sourceMap;if(r&&t.setAttribute("media",r),m.ssrId&&t.setAttribute(g,e.id),o&&(n+="\n/*# sourceURL="+o.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}var s="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!s)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(16),f={},l=s&&(document.head||document.getElementsByTagName("head")[0]),p=null,d=0,v=!1,h=function(){},m=null,g="data-vue-ssr-id",y="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());t.exports=function(t,e,n,o){v=n,m=o||{};var i=c(t,e);return r(i),function(e){for(var n=[],o=0;o<i.length;o++){var a=i[o],u=f[a.id];u.refs--,n.push(u)}e?(i=c(t,e),r(i)):i=[];for(var o=0;o<n.length;o++){var u=n[o];if(0===u.refs){for(var s=0;s<u.parts.length;s++)u.parts[s]();delete f[u.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=[],r={},o=0;o<e.length;o++){var i=e[o],a=i[0],u=i[1],s=i[2],c=i[3],f={id:t+":"+o,css:u,media:s,sourceMap:c};r[a]?r[a].parts.push(f):n.push(r[a]={id:a,parts:[f]})}return n}},function(t,e){t.exports=function(t,e,n,r,o,i){var a,u=t=t||{},s=typeof t.default;"object"!==s&&"function"!==s||(a=t,u=t.default);var c="function"==typeof u?u.options:u;e&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0),n&&(c.functional=!0),o&&(c._scopeId=o);var f;if(i?(f=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(i)},c._ssrRegister=f):r&&(f=r),f){var l=c.functional,p=l?c.render:c.beforeCreate;l?(c._injectStyles=f,c.render=function(t,e){return f.call(e),p(t,e)}):c.beforeCreate=p?[].concat(p,f):[f]}return{esModule:a,exports:u,options:c}}},function(t,e,n){"use strict";e.__esModule=!0;var r=n(19),o=function(t){return t&&t.__esModule?t:{default:t}}(r);e.default=o.default||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t}},function(t,e,n){t.exports={default:n(20),__esModule:!0}},function(t,e,n){n(21),t.exports=n(1).Object.assign},function(t,e,n){var r=n(22);r(r.S+r.F,"Object",{assign:n(32)})},function(t,e,n){var r=n(0),o=n(1),i=n(23),a=n(25),u=n(6),s=function(t,e,n){var c,f,l,p=t&s.F,d=t&s.G,v=t&s.S,h=t&s.P,m=t&s.B,g=t&s.W,y=d?o:o[e]||(o[e]={}),x=y.prototype,b=d?r:v?r[e]:(r[e]||{}).prototype;d&&(n=e);for(c in n)(f=!p&&b&&void 0!==b[c])&&u(y,c)||(l=f?b[c]:n[c],y[c]=d&&"function"!=typeof b[c]?n[c]:m&&f?i(l,r):g&&b[c]==l?function(t){var e=function(e,n,r){if(this instanceof t){switch(arguments.length){case 0:return new t;case 1:return new t(e);case 2:return new t(e,n)}return new t(e,n,r)}return t.apply(this,arguments)};return e.prototype=t.prototype,e}(l):h&&"function"==typeof l?i(Function.call,l):l,h&&((y.virtual||(y.virtual={}))[c]=l,t&s.R&&x&&!x[c]&&a(x,c,l)))};s.F=1,s.G=2,s.S=4,s.P=8,s.B=16,s.W=32,s.U=64,s.R=128,t.exports=s},function(t,e,n){var r=n(24);t.exports=function(t,e,n){if(r(t),void 0===e)return t;switch(n){case 1:return function(n){return t.call(e,n)};case 2:return function(n,r){return t.call(e,n,r)};case 3:return function(n,r,o){return t.call(e,n,r,o)}}return function(){return t.apply(e,arguments)}}},function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,e,n){var r=n(26),o=n(31);t.exports=n(3)?function(t,e,n){return r.f(t,e,o(1,n))}:function(t,e,n){return t[e]=n,t}},function(t,e,n){var r=n(27),o=n(28),i=n(30),a=Object.defineProperty;e.f=n(3)?Object.defineProperty:function(t,e,n){if(r(t),e=i(e,!0),r(n),o)try{return a(t,e,n)}catch(t){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(t[e]=n.value),t}},function(t,e,n){var r=n(2);t.exports=function(t){if(!r(t))throw TypeError(t+" is not an object!");return t}},function(t,e,n){t.exports=!n(3)&&!n(4)(function(){return 7!=Object.defineProperty(n(29)("div"),"a",{get:function(){return 7}}).a})},function(t,e,n){var r=n(2),o=n(0).document,i=r(o)&&r(o.createElement);t.exports=function(t){return i?o.createElement(t):{}}},function(t,e,n){var r=n(2);t.exports=function(t,e){if(!r(t))return t;var n,o;if(e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;if("function"==typeof(n=t.valueOf)&&!r(o=n.call(t)))return o;if(!e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e,n){"use strict";var r=n(33),o=n(44),i=n(45),a=n(46),u=n(8),s=Object.assign;t.exports=!s||n(4)(function(){var t={},e={},n=Symbol(),r="abcdefghijklmnopqrst";return t[n]=7,r.split("").forEach(function(t){e[t]=t}),7!=s({},t)[n]||Object.keys(s({},e)).join("")!=r})?function(t,e){for(var n=a(t),s=arguments.length,c=1,f=o.f,l=i.f;s>c;)for(var p,d=u(arguments[c++]),v=f?r(d).concat(f(d)):r(d),h=v.length,m=0;h>m;)l.call(d,p=v[m++])&&(n[p]=d[p]);return n}:s},function(t,e,n){var r=n(34),o=n(43);t.exports=Object.keys||function(t){return r(t,o)}},function(t,e,n){var r=n(6),o=n(7),i=n(36)(!1),a=n(39)("IE_PROTO");t.exports=function(t,e){var n,u=o(t),s=0,c=[];for(n in u)n!=a&&r(u,n)&&c.push(n);for(;e.length>s;)r(u,n=e[s++])&&(~i(c,n)||c.push(n));return c}},function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},function(t,e,n){var r=n(7),o=n(37),i=n(38);t.exports=function(t){return function(e,n,a){var u,s=r(e),c=o(s.length),f=i(a,c);if(t&&n!=n){for(;c>f;)if((u=s[f++])!=u)return!0}else for(;c>f;f++)if((t||f in s)&&s[f]===n)return t||f||0;return!t&&-1}}},function(t,e,n){var r=n(10),o=Math.min;t.exports=function(t){return t>0?o(r(t),9007199254740991):0}},function(t,e,n){var r=n(10),o=Math.max,i=Math.min;t.exports=function(t,e){return t=r(t),t<0?o(t+e,0):i(t,e)}},function(t,e,n){var r=n(40)("keys"),o=n(42);t.exports=function(t){return r[t]||(r[t]=o(t))}},function(t,e,n){var r=n(1),o=n(0),i=o["__core-js_shared__"]||(o["__core-js_shared__"]={});(t.exports=function(t,e){return i[t]||(i[t]=void 0!==e?e:{})})("versions",[]).push({version:r.version,mode:n(41)?"pure":"global",copyright:"© 2019 Denis Pushkarev (zloirock.ru)"})},function(t,e){t.exports=!0},function(t,e){var n=0,r=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++n+r).toString(36))}},function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,e){e.f=Object.getOwnPropertySymbols},function(t,e){e.f={}.propertyIsEnumerable},function(t,e,n){var r=n(9);t.exports=function(t){return Object(r(t))}},function(t,e,n){(function(e){function n(t,e,n){function r(e){var n=h,r=m;return h=m=void 0,O=e,y=t.apply(r,n)}function i(t){return O=t,x=setTimeout(f,e),j?r(t):y}function a(t){var n=t-b,r=t-O,o=e-n;return M?_(o,g-r):o}function c(t){var n=t-b,r=t-O;return void 0===b||n>=e||n<0||M&&r>=g}function f(){var t=P();if(c(t))return l(t);x=setTimeout(f,a(t))}function l(t){return x=void 0,S&&h?r(t):(h=m=void 0,y)}function p(){void 0!==x&&clearTimeout(x),O=0,h=b=m=x=void 0}function d(){return void 0===x?y:l(P())}function v(){var t=P(),n=c(t);if(h=arguments,m=this,b=t,n){if(void 0===x)return i(b);if(M)return x=setTimeout(f,e),r(b)}return void 0===x&&(x=setTimeout(f,e)),y}var h,m,g,y,x,b,O=0,j=!1,M=!1,S=!0;if("function"!=typeof t)throw new TypeError(s);return e=u(e)||0,o(n)&&(j=!!n.leading,M="maxWait"in n,g=M?w(u(n.maxWait)||0,e):g,S="trailing"in n?!!n.trailing:S),v.cancel=p,v.flush=d,v}function r(t,e,r){var i=!0,a=!0;if("function"!=typeof t)throw new TypeError(s);return o(r)&&(i="leading"in r?!!r.leading:i,a="trailing"in r?!!r.trailing:a),n(t,e,{leading:i,maxWait:e,trailing:a})}function o(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}function i(t){return!!t&&"object"==typeof t}function a(t){return"symbol"==typeof t||i(t)&&b.call(t)==f}function u(t){if("number"==typeof t)return t;if(a(t))return c;if(o(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=o(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(l,"");var n=d.test(t);return n||v.test(t)?h(t.slice(2),n?2:8):p.test(t)?c:+t}var s="Expected a function",c=NaN,f="[object Symbol]",l=/^\s+|\s+$/g,p=/^[-+]0x[0-9a-f]+$/i,d=/^0b[01]+$/i,v=/^0o[0-7]+$/i,h=parseInt,m="object"==typeof e&&e&&e.Object===Object&&e,g="object"==typeof self&&self&&self.Object===Object&&self,y=m||g||Function("return this")(),x=Object.prototype,b=x.toString,w=Math.max,_=Math.min,P=function(){return y.Date.now()};t.exports=r}).call(e,n(48))},function(t,e){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(t){"object"==typeof window&&(n=window)}t.exports=n},function(t,e,n){"use strict";var r=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"pup"},[n("div",{staticClass:"pup_container",style:{width:t.width+"px",height:t.height+"px"},on:{dragenter:function(e){return e.stopPropagation(),e.preventDefault(),t.onDragEnter(e)},dragleave:function(e){return e.stopPropagation(),e.preventDefault(),t.onDragLeave(e)},click:t.onClick,drop:function(e){return e.stopPropagation(),e.preventDefault(),t.onDrop(e)},dragover:function(e){return e.stopPropagation(),e.preventDefault(),t.onDragOver(e)}}},[n("div",{staticClass:"filepreview",style:{display:t.loadedImage?"block":"none"}},[n("canvas",{ref:"canvas",style:{width:t.width+"px",height:t.height+"px"},attrs:{width:t.scaledWidth,height:t.scaledHeight},on:{mousedown:function(e){return e.stopPropagation(),e.preventDefault(),t.startMoving(e)},mouseup:function(e){return e.stopPropagation(),e.preventDefault(),t.mouseUp(e)},click:function(t){t.stopPropagation(),t.preventDefault()}}})]),t._v(" "),t.somethingOver||t.filePreview?t._e():t._t("empty",[t._v("\n            No file selected, drop file here or click\n        ")]),t._v(" "),t.somethingOver&&!t.filePreview?t._t("over",[t._v("\n            Drop it!\n        ")]):t._e()],2),t._v(" "),n("input",{ref:"input",attrs:{type:"file",accept:"image/*"},on:{change:t.onFileSelected}})])},o=[];r._withStripped=!0;var i={render:r,staticRenderFns:o};e.a=i}])});