vue-image-crop demo

├── .env ├── .env.app ├── .env.lib ├── .eslintignore ├── babel.config.js ├── public ├── mic.png ├── mic2.png └── index.html ├── examples ├── main.js ├── index.html └── App.vue ├── vue.config.js ├── lib ├── demo.html ├── vue-image-crop.css ├── vue-image-crop.umd.min.js ├── vue-image-crop.common.js └── vue-image-crop.umd.js ├── deploy.js ├── .gitignore ├── src ├── index.js ├── iconfont.js └── m-image-crop.vue ├── demo.html ├── package.json └── README.md /.env: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.env.app: -------------------------------------------------------------------------------- 1 | NODE_ENV=production 2 | outputDir=dist -------------------------------------------------------------------------------- /.env.lib: -------------------------------------------------------------------------------- 1 | NODE_ENV=production 2 | outputDir=lib -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/ 2 | src/iconfont.js 3 | lib/ -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /public/mic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jczzq/vue-image-crop/HEAD/public/mic.png -------------------------------------------------------------------------------- /public/mic2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jczzq/vue-image-crop/HEAD/public/mic2.png -------------------------------------------------------------------------------- /examples/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App'; 3 | import mic from '../src/index'; 4 | 5 | Vue.use(mic); 6 | 7 | new Vue({ 8 | el: '#app', 9 | render: h => h(App) 10 | }); 11 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | // const path = require("path"); 2 | 3 | console.log(process.env.outputDir); 4 | 5 | module.exports = { 6 | baseUrl: "./", 7 | outputDir: process.env.outputDir, 8 | configureWebpack: {} 9 | }; 10 | -------------------------------------------------------------------------------- /lib/demo.html: -------------------------------------------------------------------------------- 1 | 2 | vue-image-crop demo 3 | 4 | 5 | 6 | 9 | -------------------------------------------------------------------------------- /deploy.js: -------------------------------------------------------------------------------- 1 | var ghpages = require("gh-pages"); 2 | console.log("正在发布 github gh-pages 分支"); 3 | 4 | ghpages.publish("dist", function(err) { 5 | if (err) { 6 | console.log(err); 7 | return; 8 | } 9 | console.log("发布成功"); 10 | }); 11 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | test 7 | 8 | 9 | 10 |

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw* 23 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import mImageCrop from "./m-image-crop"; 2 | 3 | mImageCrop.install = Vue => { 4 | if (mImageCrop.installed) return; 5 | mImageCrop.installed = true; 6 | Vue.component(mImageCrop.name, mImageCrop); 7 | }; 8 | 9 | if (window.Vue) { 10 | mImageCrop.install(window.Vue) 11 | } 12 | 13 | export default mImageCrop; 14 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue-image-crop 9 | 10 | 11 | 14 |

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | vue-image-crop demo 7 | 8 | 17 | 18 | 19 | 20 |

21 | {{ msg }} 22 | 23 |

24 | 25 | 26 | 27 | 28 | 37 | 38 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-image-crop", 3 | "version": "0.1.0", 4 | "scripts": { 5 | "dev": "vue-cli-service serve examples/main.js", 6 | "build": "vue-cli-service build examples/main.js --mode app && node deploy.js", 7 | "lib": "vue-cli-service build --target lib --name vue-image-crop src/index.js --mode lib", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "description": "基于Vue的移动端图片裁剪组件", 11 | "author": "jczzq <1195262383@qq.com>", 12 | "main": "lib/index.js", 13 | "dependencies": { 14 | "gh-pages": "^2.0.1", 15 | "less": "^3.8.1", 16 | "less-loader": "^4.1.0", 17 | "vue": "^2.5.17" 18 | }, 19 | "devDependencies": { 20 | "@vue/cli-plugin-babel": "^3.0.1", 21 | "@vue/cli-plugin-eslint": "^3.0.1", 22 | "@vue/cli-service": "^3.0.1", 23 | "vue-template-compiler": "^2.5.17" 24 | }, 25 | "eslintConfig": { 26 | "root": true, 27 | "env": { 28 | "node": true 29 | }, 30 | "extends": [ 31 | "plugin:vue/essential", 32 | "eslint:recommended" 33 | ], 34 | "rules": { 35 | "no-console": 0 36 | }, 37 | "parserOptions": { 38 | "parser": "babel-eslint" 39 | } 40 | }, 41 | "postcss": { 42 | "plugins": { 43 | "autoprefixer": {} 44 | } 45 | }, 46 | "browserslist": [ 47 | "> 1%", 48 | "last 2 versions", 49 | "not ie <= 8" 50 | ] 51 | } 52 | -------------------------------------------------------------------------------- /lib/vue-image-crop.css: -------------------------------------------------------------------------------- 1 | .m-image-crop{position:relative;display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;width:100%;height:100%}.m-image-crop img.show-img{width:100%;height:100%;position:absolute;left:0;top:0;z-index:1}.m-image-crop img.show-img[src=""]{opacity:0}.m-image-crop input.path{width:100%;height:100%;position:absolute;opacity:0;left:0;top:0;z-index:2}.m-image-crop .icon-remove{position:absolute;width:24px;height:24px;right:0;bottom:0;z-index:3}.file-view{position:fixed;top:0;left:0;z-index:9999;background:rgba(0,0,0,.9)}.file-view .file{position:absolute;top:0;left:0;z-index:1}.file-view .imgView{position:absolute;top:0;left:0;z-index:2;background:rgba(0,0,0,.4)}.file-view .imgViewBox{position:absolute;top:10px;left:10px;border:1px solid #fff;overflow:hidden}.file-view canvas{position:absolute;top:0;left:0;z-index:4}.file-view .ctrl{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;word-break:break-all;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;position:absolute;bottom:0;left:0;z-index:5;width:100%;text-align:center;font-size:16px;color:#fff;height:50px}.file-view .ctrl>div{line-height:50px;border:1px solid hsla(0,0%,100%,.1);background:hsla(0,0%,100%,.1);-webkit-box-flex:1;-ms-flex:1;flex:1} -------------------------------------------------------------------------------- /examples/App.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 49 | 50 | 86 | -------------------------------------------------------------------------------- /src/iconfont.js: -------------------------------------------------------------------------------- 1 | (function(window){var svgSprite='';var script=function(){var scripts=document.getElementsByTagName("script");return scripts[scripts.length-1]}();var shouldInjectCss=script.getAttribute("data-injectcss");var ready=function(fn){if(document.addEventListener){if(~["complete","loaded","interactive"].indexOf(document.readyState)){setTimeout(fn,0)}else{var loadFn=function(){document.removeEventListener("DOMContentLoaded",loadFn,false);fn()};document.addEventListener("DOMContentLoaded",loadFn,false)}}else if(document.attachEvent){IEContentLoaded(window,fn)}function IEContentLoaded(w,fn){var d=w.document,done=false,init=function(){if(!done){done=true;fn()}};var polling=function(){try{d.documentElement.doScroll("left")}catch(e){setTimeout(polling,50);return}init()};polling();d.onreadystatechange=function(){if(d.readyState=="complete"){d.onreadystatechange=null;init()}}}};var before=function(el,target){target.parentNode.insertBefore(el,target)};var prepend=function(el,target){if(target.firstChild){before(el,target.firstChild)}else{target.appendChild(el)}};function appendSvg(){var div,svg;div=document.createElement("div");div.innerHTML=svgSprite;svgSprite=null;svg=div.getElementsByTagName("svg")[0];if(svg){svg.setAttribute("aria-hidden","true");svg.style.position="absolute";svg.style.width=0;svg.style.height=0;svg.style.overflow="hidden";prepend(svg,document.body)}}if(shouldInjectCss&&!window.__iconfont__svg__cssinject__){window.__iconfont__svg__cssinject__=true;try{document.write("")}catch(e){console&&console.log(e)}}ready(appendSvg)})(window) -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-image-crop 2 | 3 | 基于 Vue 的移动端图片裁剪组件 4 | 5 | > 组件使用`URL.createObjectURL()`等新特性，使用前注意兼容问题，IE >= 10 6 | > 没写测试所以就不发npm了，需要的话自行fork吧 7 | 8 | ## 功能预览 9 | 10 | ![预览](public/mic.png)![裁剪](public/mic2.png) 11 | 12 | ## 开发 13 | 14 | 安装 Node >= `8.9.0`（推荐 LTS = `8.11.0`） 15 | 16 | ``` 17 | npm install 18 | npm run dev 19 | ``` 20 | 21 | 启动开发模式即可定制功能 22 | 23 | ## 构建 24 | 25 | ``` 26 | npm run build 27 | ``` 28 | 29 | build 之后会重新生成 lib 文件夹 30 | 31 | ## API 32 | 33 | ### props 34 | 35 | | 属性名 | 类型 | 默认值 | 说明 | 36 | | ---------- | ------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 37 | | value | Object | {} | 裁剪后的图片对象；必传；可使用 v-model 绑定 | 38 | | proportion | Object | { w: 2, h: 1 } | 图片宽高比例对象；非必传；用于动态计算宽高比例，所以 w 和 h 两个属性没有固定值 | 39 | | quality | Number | 0.92 | 清晰度；非必传；[HTMLCanvasElement.toDataURL()](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL)的第二个参数 | 40 | | hasRemove | Boolean | false | 是否显示移除按钮；非必传；列表中使用时可能会用到 | 41 | | skipCrop | Boolean | false | 是否直接上传；非必传；设置为 true 的时候图片将不会裁剪直接返回 | 42 | | config | Object | { size: 1200, isSlice: true, path: null } | 配置对象；此对象不传有默认值，若传时对象里的每个属性都必须传；size:图片最大宽度（px），isSlice:是否需要裁剪，path:显示图片时的路径，path 参数将直接与图片 id 拼接(path + id) | 43 | 44 | ### events 45 | 46 | | 事件名 | 说明 | 回调参数 | 47 | | ------ | -------------------- | ----------------------------- | 48 | | remove | 移除按钮被点击时触发 | - | 49 | | change | 改变选中图片时触发 | event.target.files[0]，新文件 | 50 | | submit | 图片操作完成时触发 | 当前裁剪后的图片对象 | 51 | | cancel | 图片操作取消时触发 | - | 52 | 53 | ## 使用 54 | ### umd用法 55 | https://github.com/jczzq/vue-image-crop/blob/master/demo.html 56 | 57 | ### vue单文件组件用法 58 | ``` 59 | 87 | 88 | 112 | 113 | 149 | ``` 150 | -------------------------------------------------------------------------------- /src/m-image-crop.vue: -------------------------------------------------------------------------------- 1 | 67 | 68 | 728 | 729 | 822 | -------------------------------------------------------------------------------- /lib/vue-image-crop.umd.min.js: -------------------------------------------------------------------------------- 1 | (function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["vue-image-crop"]=e():t["vue-image-crop"]=e()})("undefined"!==typeof self?self:this,function(){return function(t){var e={};function i(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,i),o.l=!0,o.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 o in t)i.d(n,o,function(e){return t[e]}.bind(null,o));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")}({"0b10":function(t,e,i){"use strict";var n=i("526d"),o=i.n(n);o.a},"0d58":function(t,e,i){var n=i("ce10"),o=i("e11e");t.exports=Object.keys||function(t){return n(t,o)}},"11e9":function(t,e,i){var n=i("52a7"),o=i("4630"),r=i("6821"),s=i("6a99"),h=i("69a8"),f=i("c69a"),a=Object.getOwnPropertyDescriptor;e.f=i("9e1e")?a:function(t,e){if(t=r(t),e=s(e,!0),f)try{return a(t,e)}catch(t){}if(h(t,e))return o(!n.f.call(t,e),t[e])}},1495:function(t,e,i){var n=i("86cc"),o=i("cb7c"),r=i("0d58");t.exports=i("9e1e")?Object.defineProperties:function(t,e){o(t);var i,s=r(e),h=s.length,f=0;while(h>f)n.f(t,i=s[f++],e[i]);return t}},"1eb2":function(t,e,i){var n;"undefined"!==typeof window&&((n=window.document.currentScript)&&(n=n.src.match(/(.+\/)[^/]+\.js$/))&&(i.p=n[1]))},"230e":function(t,e,i){var n=i("d3f4"),o=i("7726").document,r=n(o)&&n(o.createElement);t.exports=function(t){return r?o.createElement(t):{}}},"2aba":function(t,e,i){var n=i("7726"),o=i("32e9"),r=i("69a8"),s=i("ca5a")("src"),h="toString",f=Function[h],a=(""+f).split(h);i("8378").inspectSource=function(t){return f.call(t)},(t.exports=function(t,e,i,h){var f="function"==typeof i;f&&(r(i,"name")||o(i,"name",e)),t[e]!==i&&(f&&(r(i,s)||o(i,s,t[e]?""+t[e]:a.join(String(e)))),t===n?t[e]=i:h?t[e]?t[e]=i:o(t,e,i):(delete t[e],o(t,e,i)))})(Function.prototype,h,function(){return"function"==typeof this&&this[s]||f.call(this)})},"2aeb":function(t,e,i){var n=i("cb7c"),o=i("1495"),r=i("e11e"),s=i("613b")("IE_PROTO"),h=function(){},f="prototype",a=function(){var t,e=i("230e")("iframe"),n=r.length,o="<",s=">";e.style.display="none",i("fab2").appendChild(e),e.src="javascript:",t=e.contentWindow.document,t.open(),t.write(o+"script"+s+"document.F=Object"+o+"/script"+s),t.close(),a=t.F;while(n--)delete a[f][r[n]];return a()};t.exports=Object.create||function(t,e){var i;return null!==t?(h[f]=n(t),i=new h,h[f]=null,i[s]=t):i=a(),void 0===e?i:o(i,e)}},"2d00":function(t,e){t.exports=!1},"2d95":function(t,e){var i={}.toString;t.exports=function(t){return i.call(t).slice(8,-1)}},"32e9":function(t,e,i){var n=i("86cc"),o=i("4630");t.exports=i("9e1e")?function(t,e,i){return n.f(t,e,o(1,i))}:function(t,e,i){return t[e]=i,t}},4588:function(t,e){var i=Math.ceil,n=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?n:i)(t)}},4630:function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},"526d":function(t,e,i){},"52a7":function(t,e){e.f={}.propertyIsEnumerable},5537:function(t,e,i){var n=i("8378"),o=i("7726"),r="__core-js_shared__",s=o[r]||(o[r]={});(t.exports=function(t,e){return s[t]||(s[t]=void 0!==e?e:{})})("versions",[]).push({version:n.version,mode:i("2d00")?"pure":"global",copyright:"© 2018 Denis Pushkarev (zloirock.ru)"})},"5ca1":function(t,e,i){var n=i("7726"),o=i("8378"),r=i("32e9"),s=i("2aba"),h=i("9b43"),f="prototype",a=function(t,e,i){var c,l,u,d,p=t&a.F,v=t&a.G,w=t&a.S,g=t&a.P,m=t&a.B,b=v?n:w?n[e]||(n[e]={}):(n[e]||{})[f],y=v?o:o[e]||(o[e]={}),S=y[f]||(y[f]={});for(c in v&&(i=e),i)l=!p&&b&&void 0!==b[c],u=(l?b:i)[c],d=m&&l?h(u,n):g&&"function"==typeof u?h(Function.call,u):u,b&&s(b,c,u,t&a.U),y[c]!=u&&r(y,c,d),g&&S[c]!=u&&(S[c]=u)};n.core=o,a.F=1,a.G=2,a.S=4,a.P=8,a.B=16,a.W=32,a.U=64,a.R=128,t.exports=a},"5dbc":function(t,e,i){var n=i("d3f4"),o=i("8b97").set;t.exports=function(t,e,i){var r,s=e.constructor;return s!==i&&"function"==typeof s&&(r=s.prototype)!==i.prototype&&n(r)&&o&&o(t,r),t}},"613b":function(t,e,i){var n=i("5537")("keys"),o=i("ca5a");t.exports=function(t){return n[t]||(n[t]=o(t))}},"626a":function(t,e,i){var n=i("2d95");t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==n(t)?t.split(""):Object(t)}},6821:function(t,e,i){var n=i("626a"),o=i("be13");t.exports=function(t){return n(o(t))}},"69a8":function(t,e){var i={}.hasOwnProperty;t.exports=function(t,e){return i.call(t,e)}},"6a99":function(t,e,i){var n=i("d3f4");t.exports=function(t,e){if(!n(t))return t;var i,o;if(e&&"function"==typeof(i=t.toString)&&!n(o=i.call(t)))return o;if("function"==typeof(i=t.valueOf)&&!n(o=i.call(t)))return o;if(!e&&"function"==typeof(i=t.toString)&&!n(o=i.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},7726:function(t,e){var i=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=i)},"77f1":function(t,e,i){var n=i("4588"),o=Math.max,r=Math.min;t.exports=function(t,e){return t=n(t),t<0?o(t+e,0):r(t,e)}},"79e5":function(t,e){t.exports=function(t){try{return!!t()}catch(t){return!0}}},"7f35":function(t,e){(function(t){var e='',i=function(){var t=document.getElementsByTagName("script");return t[t.length-1]}(),n=i.getAttribute("data-injectcss"),o=function(e){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(e,0);else{var i=function t(){document.removeEventListener("DOMContentLoaded",t,!1),e()};document.addEventListener("DOMContentLoaded",i,!1)}else document.attachEvent&&n(t,e);function n(t,e){var i=t.document,n=!1,o=function(){n||(n=!0,e())},r=function t(){try{i.documentElement.doScroll("left")}catch(e){return void setTimeout(t,50)}o()};r(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,o())}}},r=function(t,e){e.parentNode.insertBefore(t,e)},s=function(t,e){e.firstChild?r(t,e.firstChild):e.appendChild(t)};function h(){var t,i;t=document.createElement("div"),t.innerHTML=e,e=null,i=t.getElementsByTagName("svg")[0],i&&(i.setAttribute("aria-hidden","true"),i.style.position="absolute",i.style.width=0,i.style.height=0,i.style.overflow="hidden",s(i,document.body))}if(n&&!t.__iconfont__svg__cssinject__){t.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}o(h)})(window)},"7f7f":function(t,e,i){var n=i("86cc").f,o=Function.prototype,r=/^\s*function ([^ (]*)/,s="name";s in o||i("9e1e")&&n(o,s,{configurable:!0,get:function(){try{return(""+this).match(r)[1]}catch(t){return""}}})},8378:function(t,e){var i=t.exports={version:"2.5.7"};"number"==typeof __e&&(__e=i)},"86cc":function(t,e,i){var n=i("cb7c"),o=i("c69a"),r=i("6a99"),s=Object.defineProperty;e.f=i("9e1e")?Object.defineProperty:function(t,e,i){if(n(t),e=r(e,!0),n(i),o)try{return s(t,e,i)}catch(t){}if("get"in i||"set"in i)throw TypeError("Accessors not supported!");return"value"in i&&(t[e]=i.value),t}},"8b97":function(t,e,i){var n=i("d3f4"),o=i("cb7c"),r=function(t,e){if(o(t),!n(e)&&null!==e)throw TypeError(e+": can't set as prototype!")};t.exports={set:Object.setPrototypeOf||("__proto__"in{}?function(t,e,n){try{n=i("9b43")(Function.call,i("11e9").f(Object.prototype,"__proto__").set,2),n(t,[]),e=!(t instanceof Array)}catch(t){e=!0}return function(t,i){return r(t,i),e?t.__proto__=i:n(t,i),t}}({},!1):void 0),check:r}},9093:function(t,e,i){var n=i("ce10"),o=i("e11e").concat("length","prototype");e.f=Object.getOwnPropertyNames||function(t){return n(t,o)}},"9b43":function(t,e,i){var n=i("d8e8");t.exports=function(t,e,i){if(n(t),void 0===e)return t;switch(i){case 1:return function(i){return t.call(e,i)};case 2:return function(i,n){return t.call(e,i,n)};case 3:return function(i,n,o){return t.call(e,i,n,o)}}return function(){return t.apply(e,arguments)}}},"9def":function(t,e,i){var n=i("4588"),o=Math.min;t.exports=function(t){return t>0?o(n(t),9007199254740991):0}},"9e1e":function(t,e,i){t.exports=!i("79e5")(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},aa77:function(t,e,i){var n=i("5ca1"),o=i("be13"),r=i("79e5"),s=i("fdef"),h="["+s+"]",f="",a=RegExp("^"+h+h+"*"),c=RegExp(h+h+"*$"),l=function(t,e,i){var o={},h=r(function(){return!!s[t]()||f[t]()!=f}),a=o[t]=h?e(u):s[t];i&&(o[i]=a),n(n.P+n.F*h,"String",o)},u=l.trim=function(t,e){return t=String(o(t)),1&e&&(t=t.replace(a,"")),2&e&&(t=t.replace(c,"")),t};t.exports=l},be13:function(t,e){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on "+t);return t}},c366:function(t,e,i){var n=i("6821"),o=i("9def"),r=i("77f1");t.exports=function(t){return function(e,i,s){var h,f=n(e),a=o(f.length),c=r(s,a);if(t&&i!=i){while(a>c)if(h=f[c++],h!=h)return!0}else for(;a>c;c++)if((t||c in f)&&f[c]===i)return t||c||0;return!t&&-1}}},c5f6:function(t,e,i){"use strict";var n=i("7726"),o=i("69a8"),r=i("2d95"),s=i("5dbc"),h=i("6a99"),f=i("79e5"),a=i("9093").f,c=i("11e9").f,l=i("86cc").f,u=i("aa77").trim,d="Number",p=n[d],v=p,w=p.prototype,g=r(i("2aeb")(w))==d,m="trim"in String.prototype,b=function(t){var e=h(t,!1);if("string"==typeof e&&e.length>2){e=m?e.trim():u(e,3);var i,n,o,r=e.charCodeAt(0);if(43===r||45===r){if(i=e.charCodeAt(2),88===i||120===i)return NaN}else if(48===r){switch(e.charCodeAt(1)){case 66:case 98:n=2,o=49;break;case 79:case 111:n=8,o=55;break;default:return+e}for(var s,f=e.slice(2),a=0,c=f.length;ao)return NaN;return parseInt(f,n)}}return+e};if(!p(" 0o1")||!p("0b1")||p("+0x1")){p=function(t){var e=arguments.length<1?0:t,i=this;return i instanceof p&&(g?f(function(){w.valueOf.call(i)}):r(i)!=d)?s(new v(b(e)),i,p):b(e)};for(var y,S=i("9e1e")?a(v):"MAX_VALUE,MIN_VALUE,NaN,NEGATIVE_INFINITY,POSITIVE_INFINITY,EPSILON,isFinite,isInteger,isNaN,isSafeInteger,MAX_SAFE_INTEGER,MIN_SAFE_INTEGER,parseFloat,parseInt,isInteger".split(","),x=0;S.length>x;x++)o(v,y=S[x])&&!o(p,y)&&l(p,y,c(v,y));p.prototype=w,w.constructor=p,i("2aba")(n,d,p)}},c69a:function(t,e,i){t.exports=!i("9e1e")&&!i("79e5")(function(){return 7!=Object.defineProperty(i("230e")("div"),"a",{get:function(){return 7}}).a})},ca5a:function(t,e){var i=0,n=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++i+n).toString(36))}},cb7c:function(t,e,i){var n=i("d3f4");t.exports=function(t){if(!n(t))throw TypeError(t+" is not an object!");return t}},ce10:function(t,e,i){var n=i("69a8"),o=i("6821"),r=i("c366")(!1),s=i("613b")("IE_PROTO");t.exports=function(t,e){var i,h=o(t),f=0,a=[];for(i in h)i!=s&&n(h,i)&&a.push(i);while(e.length>f)n(h,i=e[f++])&&(~r(a,i)||a.push(i));return a}},d3f4:function(t,e){t.exports=function(t){return"object"===typeof t?null!==t:"function"===typeof t}},d8e8:function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},e11e:function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},fab2:function(t,e,i){var n=i("7726").document;t.exports=n&&n.documentElement},fb15:function(t,e,i){"use strict";i.r(e);i("1eb2"),i("7f7f");var n=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"m-image-crop"},[i("img",{staticClass:"show-img",attrs:{src:t._f("fileSrc")(t.currentValue)}}),t.hasRemove?i("svg",{staticClass:"icon icon-remove",attrs:{"aria-hidden":"true"},on:{click:function(e){e.stopPropagation(),t.$emit("remove")}}},[i("use",{attrs:{"xlink:href":"#icon-remove"}})]):t._e(),t._t("default"),i("input",{directives:[{name:"show",rawName:"v-show",value:1==t.state,expression:"state == 1"}],ref:"path",staticClass:"path",attrs:{accept:"image/*",type:"file"},on:{change:t.imageChange}}),i("div",{directives:[{name:"show",rawName:"v-show",value:2==t.state,expression:"state == 2"},{name:"touch",rawName:"v-touch:move",value:t.move,expression:"move",arg:"move"},{name:"touch",rawName:"v-touch:end",value:t.end,expression:"end",arg:"end"},{name:"touch",rawName:"v-touch:scale",value:t.scale,expression:"scale",arg:"scale"}],ref:"fileView",staticClass:"file-view"},[i("img",{ref:"file",staticClass:"file",attrs:{src:t.url,alt:""}}),i("div",{ref:"imgView",staticClass:"imgView"},[i("div",{ref:"imgViewBox",staticClass:"imgViewBox"},[i("img",{ref:"file2",staticClass:"file",attrs:{src:t.url,alt:""}})])]),i("div",{staticClass:"ctrl"},[i("div",{staticClass:"back",attrs:{flex:"33",layout:"column","layout-align":"center center"},on:{click:t.back}},[t._v("\n 取消\n ")]),i("div",{staticClass:"rotate",attrs:{flex:"33",layout:"column","layout-align":"center center"},on:{click:t.rotateChange}},[t._v("\n 旋转\n ")]),i("div",{staticClass:"submit",attrs:{flex:"33",layout:"column","layout-align":"center center"},on:{click:t.submitFile}},[t._v("\n 确认\n ")])])])],2)},o=[],r=(i("c5f6"),i("7f35"),{name:"m-image-crop",data:function(){return{state:1,top:null,left:null,url:null,img:new Image,maxSize:3,initViewWidth:.74,borderWidth:1,view:{width:0,height:0},fileSize:{width:0,height:0,top:0,left:0},fileInitSize:{width:0,height:0},filRealitySize:{width:0,height:0},viewBox:{width:0,height:0,left:0,top:0},rotate:0,point1:null,point2:null,indicator:{visible:!1}}},props:{value:{type:Object,required:!0,default:function(){return{}}},proportion:{type:Object,default:function(){return{w:2,h:1}}},quality:{type:Number,default:.92},hasRemove:{type:Boolean,default:!1},skipCrop:{type:Boolean,default:!1},config:{type:Object,default:function(){return{size:1200,isSlice:!0,path:null}}}},components:{},beforeDestroy:function(){document.removeEventListener("touchmove",this.preventDefault,!1),document.body.removeChild(this.$refs.fileView)},mounted:function(){document.body.appendChild(this.$refs.fileView),this.currentValue.origin={},this.$nextTick(function(){this.initViewSize()})},methods:{imageChange:function(t){var e=this,i=t.target.files[0];if(this.$emit("change",i),i){var n=URL.createObjectURL(i);this.currentValue.origin=i,this.img.src=n,this.img.onload=function(){e.filRealitySize={width:e.img.width,height:e.img.height};var t=function(){e.indicator.visible=!0,e.loadImg(),setTimeout(function(){e.indicator.visible=!1,e.state=2,e.$nextTick(function(){this.file2SizePosition()})},800)};if(e.skipCrop)e.uploadCanvas();else if(e.config.isSlice&&e.filRealitySize.width/e.filRealitySize.height==e.proportion.w/e.proportion.h){var i=window.confirm("文件已符合规定尺寸，是否直接使用？");i?e.uploadCanvas():t()}else t()}}},loadImg:function(){var t=this.filRealitySize.width;t>this.config.size&&(t=this.config.size);var e=t*(this.filRealitySize.height/this.filRealitySize.width),i=document.createElement("canvas"),n=i.getContext("2d");switch(this.rotate){case 0:i.setAttribute("width",t),i.setAttribute("height",e),n.drawImage(this.img,0,0,t,e);break;case 1:t+=e,e=t-e,t-=e,i.setAttribute("width",t),i.setAttribute("height",e),n.translate(t,0),n.rotate(90*Math.PI/180),n.drawImage(this.img,0,0,e,t);break;case 2:i.setAttribute("width",t),i.setAttribute("height",e),n.translate(t,e),n.rotate(180*Math.PI/180),n.drawImage(this.img,0,0,t,e);break;case 3:t+=e,e=t-e,t-=e,i.setAttribute("width",t),i.setAttribute("height",e),n.translate(0,e),n.rotate(270*Math.PI/180),n.drawImage(this.img,0,0,e,t);break}if(this.url=i.toDataURL(this.currentValue.origin.type,this.quality),t/e>=this.view.width/this.view.height){var o={width:this.view.width,height:e/t*this.view.width};o.height=this.viewBox.top+this.borderWidth?this.fileSize.top=this.viewBox.top+this.borderWidth:this.fileSize.top+this.fileSize.height<=this.viewBox.top+this.viewBox.height+this.borderWidth&&(this.fileSize.top=this.viewBox.top+this.viewBox.height-this.fileSize.height+this.borderWidth),this.fileSize.left>=this.viewBox.left+this.borderWidth?this.fileSize.left=this.viewBox.left+this.borderWidth:this.fileSize.left+this.fileSize.width<=this.viewBox.left+this.viewBox.width+this.borderWidth&&(this.fileSize.left=this.viewBox.left+this.viewBox.width-this.fileSize.width+this.borderWidth),this.fileSize.width<=this.viewBox.width&&(this.fileSize.width=this.viewBox.width,this.fileSize.height=this.fileInitSize.height/this.fileInitSize.width*this.fileSize.width),this.fileSize.height<=this.viewBox.height&&(this.fileSize.height=this.viewBox.height,this.fileSize.width=this.fileInitSize.width/this.fileInitSize.height*this.fileSize.height),this.fileSize.width>this.fileInitSize.width*this.maxSize&&(this.fileSize.width=this.fileInitSize.width*this.maxSize,this.fileSize.height=this.fileInitSize.height/this.fileInitSize.width*this.fileSize.width,t=!0),this.fileSize.height>this.fileInitSize.height*this.maxSize&&(this.fileSize.height=this.fileInitSize.height*this.maxSize,this.fileSize.width=this.fileInitSize.width/this.fileInitSize.height*this.fileSize.height,t=!0),t&&(this.fileSize.left=this.$refs.file.offsetLeft,this.fileSize.top=this.$refs.file.offsetTop)},move:function(t){this.top&&(this.fileSize.top=Math.floor(this.$refs.file.offsetTop+t.touches[0].clientY-this.top),this.fileSize.left=Math.floor(this.$refs.file.offsetLeft+t.touches[0].clientX-this.left),this.checkPosition(),this.fileSizePosition()),this.top=t.touches[0].clientY,this.left=t.touches[0].clientX},scale:function(t){if(this.point1){var e=this.distance(t.touches),i={width:this.fileSize.width,height:this.fileSize.height},n={width:i.width*e,height:i.height*e};this.fileSize.width=n.width,this.fileSize.height=n.height,this.fileSize.left=this.$refs.file.offsetLeft-(n.width-i.width)/2,this.fileSize.top=this.$refs.file.offsetTop-(n.height-i.height)/2,this.checkPosition(),this.fileSizePosition()}this.point1=JSON.stringify(t.touches[0]).length<3?t.touches[0]:JSON.parse(JSON.stringify(t.touches[0])),this.point2=JSON.stringify(t.touches[1]).length<3?t.touches[1]:JSON.parse(JSON.stringify(t.touches[1]))},distance:function(t){var e=Math.sqrt(Math.pow(t[0].clientX-t[1].clientX,2)+Math.pow(t[0].clientY-t[1].clientY,2)),i=Math.sqrt(Math.pow(this.point1.clientX-this.point2.clientX,2)+Math.pow(this.point1.clientY-this.point2.clientY,2)),n=e/i;return n},imgSizeScale:function(){var t;return t=this.viewBox.width/this.$refs.file.offsetWidth*this.filRealitySize.widththis.config.size&&(t=this.config.size);var e=t*(this.filRealitySize.height/this.filRealitySize.width),i=document.createElement("canvas"),n=i.getContext("2d");i.setAttribute("width",t),i.setAttribute("height",e),n.drawImage(this.img,0,0,t,e);var o=i.toDataURL("image/jpeg",this.quality);this.$set(this.currentValue,"base64",o),this.currentValue.id=null,this.$emit("submit",this.currentValue)},end:function(){this.top=null,this.left=null,this.point1=null,this.point2=null},preventDefault:function(t){t.preventDefault()},addEventDefault:function(){document.addEventListener("touchmove",this.preventDefault,{passive:!1})},removeEventDefault:function(){document.removeEventListener("touchmove",this.preventDefault,!1)},submitFile:function(){this.state=1,this.$refs.path.value=null,this.setCanvas()},rotateChange:function(){this.rotate++,this.rotate%=4,this.loadImg()},back:function(){this.state=1,this.$refs.path.value=null,this.$emit("cancel")}},watch:{state:function(t){2===t?this.addEventDefault():this.removeEventDefault()}},computed:{currentValue:{get:function(){return this.value},set:function(t){this.$emit("input",t)}}},filters:{fileSrc:function(t){return t?t.base64?t.base64:t.id?this.config.path+t.id:"":""}},directives:{touch:{bind:function(t,e){var i,n,o=e.arg,r=0,s="";function h(t,e){return 180*Math.atan2(e,t)/Math.PI}function f(t,e,i,n){var o=e-n,r=i-t,s=0;if(Math.abs(r)<2&&Math.abs(o)<2)return"tap";var f=h(r,o);return f>=-45&&f<45?s="swiperight":f>=45&&f<135?s="swipeup":f>=-135&&f<-45?s="swipedown":(f>=135&&f<=180||f>=-180&&f<-135)&&(s="swipeleft"),s}t.addEventListener("touchstart",function(t){i=t.touches[0].pageX,n=t.touches[0].pageY,r=setTimeout(function(){r=0,"press"===o&&e.value(t)},500)},!1),t.addEventListener("touchmove",function(t){clearTimeout(r),r=0,1===t.touches.length?"move"===o&&e.value(t):2===event.touches.length&&"scale"===o&&e.value(t)}),t.addEventListener("touchend",function(t){var h,a;switch(h=t.changedTouches[0].pageX,a=t.changedTouches[0].pageY,s=f(i,n,h,a),clearTimeout(r),"end"===o&&e.value(t),s){case 0:break;case"tap":"tap"===o&&e.value(t);break;case"swipeup":"swipeup"===o&&e.value(t);break;case"swipedown":"swipedown"===o&&e.value(t);break;case"swipeleft":"swipeleft"===o&&e.value(t);break;case"swiperight":"swiperight"===o&&e.value(t);break;default:break}},!1)}}}}),s=r;i("0b10");function h(t,e,i,n,o,r,s,h){var f,a="function"===typeof t?t.options:t;if(e&&(a.render=e,a.staticRenderFns=i,a._compiled=!0),n&&(a.functional=!0),r&&(a._scopeId="data-v-"+r),s?(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__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(s)},a._ssrRegister=f):o&&(f=h?function(){o.call(this,this.$root.$options.shadowRoot)}:o),f)if(a.functional){a._injectStyles=f;var c=a.render;a.render=function(t,e){return f.call(e),c(t,e)}}else{var l=a.beforeCreate;a.beforeCreate=l?[].concat(l,f):[f]}return{exports:t,options:a}}var f=h(s,n,o,!1,null,null,null);f.options.__file="m-image-crop.vue";var a=f.exports;a.install=function(t){a.installed||(a.installed=!0,t.component(a.name,a))},window.Vue&&a.install(window.Vue);var c=a;e["default"]=c},fdef:function(t,e){t.exports="\t\n\v\f\r  ᠎   　\u2028\u2029\ufeff"}})}); 2 | //# sourceMappingURL=vue-image-crop.umd.min.js.map -------------------------------------------------------------------------------- /lib/vue-image-crop.common.js: -------------------------------------------------------------------------------- 1 | module.exports = 2 | /******/ (function(modules) { // webpackBootstrap 3 | /******/ // The module cache 4 | /******/ var installedModules = {}; 5 | /******/ 6 | /******/ // The require function 7 | /******/ function __webpack_require__(moduleId) { 8 | /******/ 9 | /******/ // Check if module is in cache 10 | /******/ if(installedModules[moduleId]) { 11 | /******/ return installedModules[moduleId].exports; 12 | /******/ } 13 | /******/ // Create a new module (and put it into the cache) 14 | /******/ var module = installedModules[moduleId] = { 15 | /******/ i: moduleId, 16 | /******/ l: false, 17 | /******/ exports: {} 18 | /******/ }; 19 | /******/ 20 | /******/ // Execute the module function 21 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 22 | /******/ 23 | /******/ // Flag the module as loaded 24 | /******/ module.l = true; 25 | /******/ 26 | /******/ // Return the exports of the module 27 | /******/ return module.exports; 28 | /******/ } 29 | /******/ 30 | /******/ 31 | /******/ // expose the modules object (__webpack_modules__) 32 | /******/ __webpack_require__.m = modules; 33 | /******/ 34 | /******/ // expose the module cache 35 | /******/ __webpack_require__.c = installedModules; 36 | /******/ 37 | /******/ // define getter function for harmony exports 38 | /******/ __webpack_require__.d = function(exports, name, getter) { 39 | /******/ if(!__webpack_require__.o(exports, name)) { 40 | /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); 41 | /******/ } 42 | /******/ }; 43 | /******/ 44 | /******/ // define __esModule on exports 45 | /******/ __webpack_require__.r = function(exports) { 46 | /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 47 | /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 48 | /******/ } 49 | /******/ Object.defineProperty(exports, '__esModule', { value: true }); 50 | /******/ }; 51 | /******/ 52 | /******/ // create a fake namespace object 53 | /******/ // mode & 1: value is a module id, require it 54 | /******/ // mode & 2: merge all properties of value into the ns 55 | /******/ // mode & 4: return value when already ns object 56 | /******/ // mode & 8|1: behave like require 57 | /******/ __webpack_require__.t = function(value, mode) { 58 | /******/ if(mode & 1) value = __webpack_require__(value); 59 | /******/ if(mode & 8) return value; 60 | /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; 61 | /******/ var ns = Object.create(null); 62 | /******/ __webpack_require__.r(ns); 63 | /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); 64 | /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); 65 | /******/ return ns; 66 | /******/ }; 67 | /******/ 68 | /******/ // getDefaultExport function for compatibility with non-harmony modules 69 | /******/ __webpack_require__.n = function(module) { 70 | /******/ var getter = module && module.__esModule ? 71 | /******/ function getDefault() { return module['default']; } : 72 | /******/ function getModuleExports() { return module; }; 73 | /******/ __webpack_require__.d(getter, 'a', getter); 74 | /******/ return getter; 75 | /******/ }; 76 | /******/ 77 | /******/ // Object.prototype.hasOwnProperty.call 78 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 79 | /******/ 80 | /******/ // __webpack_public_path__ 81 | /******/ __webpack_require__.p = ""; 82 | /******/ 83 | /******/ 84 | /******/ // Load entry module and return exports 85 | /******/ return __webpack_require__(__webpack_require__.s = "fb15"); 86 | /******/ }) 87 | /************************************************************************/ 88 | /******/ ({ 89 | 90 | /***/ "0b10": 91 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 92 | 93 | "use strict"; 94 | /* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_10_oneOf_1_0_node_modules_css_loader_index_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_lib_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_m_image_crop_vue_vue_type_style_index_0_lang_less___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("526d"); 95 | /* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_10_oneOf_1_0_node_modules_css_loader_index_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_lib_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_m_image_crop_vue_vue_type_style_index_0_lang_less___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_10_oneOf_1_0_node_modules_css_loader_index_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_lib_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_m_image_crop_vue_vue_type_style_index_0_lang_less___WEBPACK_IMPORTED_MODULE_0__); 96 | /* unused harmony reexport * */ 97 | /* unused harmony default export */ var _unused_webpack_default_export = (_node_modules_mini_css_extract_plugin_dist_loader_js_ref_10_oneOf_1_0_node_modules_css_loader_index_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_lib_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_m_image_crop_vue_vue_type_style_index_0_lang_less___WEBPACK_IMPORTED_MODULE_0___default.a); 98 | 99 | /***/ }), 100 | 101 | /***/ "0d58": 102 | /***/ (function(module, exports, __webpack_require__) { 103 | 104 | // 19.1.2.14 / 15.2.3.14 Object.keys(O) 105 | var $keys = __webpack_require__("ce10"); 106 | var enumBugKeys = __webpack_require__("e11e"); 107 | 108 | module.exports = Object.keys || function keys(O) { 109 | return $keys(O, enumBugKeys); 110 | }; 111 | 112 | 113 | /***/ }), 114 | 115 | /***/ "11e9": 116 | /***/ (function(module, exports, __webpack_require__) { 117 | 118 | var pIE = __webpack_require__("52a7"); 119 | var createDesc = __webpack_require__("4630"); 120 | var toIObject = __webpack_require__("6821"); 121 | var toPrimitive = __webpack_require__("6a99"); 122 | var has = __webpack_require__("69a8"); 123 | var IE8_DOM_DEFINE = __webpack_require__("c69a"); 124 | var gOPD = Object.getOwnPropertyDescriptor; 125 | 126 | exports.f = __webpack_require__("9e1e") ? gOPD : function getOwnPropertyDescriptor(O, P) { 127 | O = toIObject(O); 128 | P = toPrimitive(P, true); 129 | if (IE8_DOM_DEFINE) try { 130 | return gOPD(O, P); 131 | } catch (e) { /* empty */ } 132 | if (has(O, P)) return createDesc(!pIE.f.call(O, P), O[P]); 133 | }; 134 | 135 | 136 | /***/ }), 137 | 138 | /***/ "1495": 139 | /***/ (function(module, exports, __webpack_require__) { 140 | 141 | var dP = __webpack_require__("86cc"); 142 | var anObject = __webpack_require__("cb7c"); 143 | var getKeys = __webpack_require__("0d58"); 144 | 145 | module.exports = __webpack_require__("9e1e") ? Object.defineProperties : function defineProperties(O, Properties) { 146 | anObject(O); 147 | var keys = getKeys(Properties); 148 | var length = keys.length; 149 | var i = 0; 150 | var P; 151 | while (length > i) dP.f(O, P = keys[i++], Properties[P]); 152 | return O; 153 | }; 154 | 155 | 156 | /***/ }), 157 | 158 | /***/ "1eb2": 159 | /***/ (function(module, exports, __webpack_require__) { 160 | 161 | // This file is imported into lib/wc client bundles. 162 | 163 | if (typeof window !== 'undefined') { 164 | var i 165 | if ((i = window.document.currentScript) && (i = i.src.match(/(.+\/)[^/]+\.js$/))) { 166 | __webpack_require__.p = i[1] // eslint-disable-line 167 | } 168 | } 169 | 170 | 171 | /***/ }), 172 | 173 | /***/ "230e": 174 | /***/ (function(module, exports, __webpack_require__) { 175 | 176 | var isObject = __webpack_require__("d3f4"); 177 | var document = __webpack_require__("7726").document; 178 | // typeof document.createElement is 'object' in old IE 179 | var is = isObject(document) && isObject(document.createElement); 180 | module.exports = function (it) { 181 | return is ? document.createElement(it) : {}; 182 | }; 183 | 184 | 185 | /***/ }), 186 | 187 | /***/ "2aba": 188 | /***/ (function(module, exports, __webpack_require__) { 189 | 190 | var global = __webpack_require__("7726"); 191 | var hide = __webpack_require__("32e9"); 192 | var has = __webpack_require__("69a8"); 193 | var SRC = __webpack_require__("ca5a")('src'); 194 | var TO_STRING = 'toString'; 195 | var $toString = Function[TO_STRING]; 196 | var TPL = ('' + $toString).split(TO_STRING); 197 | 198 | __webpack_require__("8378").inspectSource = function (it) { 199 | return $toString.call(it); 200 | }; 201 | 202 | (module.exports = function (O, key, val, safe) { 203 | var isFunction = typeof val == 'function'; 204 | if (isFunction) has(val, 'name') || hide(val, 'name', key); 205 | if (O[key] === val) return; 206 | if (isFunction) has(val, SRC) || hide(val, SRC, O[key] ? '' + O[key] : TPL.join(String(key))); 207 | if (O === global) { 208 | O[key] = val; 209 | } else if (!safe) { 210 | delete O[key]; 211 | hide(O, key, val); 212 | } else if (O[key]) { 213 | O[key] = val; 214 | } else { 215 | hide(O, key, val); 216 | } 217 | // add fake Function#toString for correct work wrapped methods / constructors with methods like LoDash isNative 218 | })(Function.prototype, TO_STRING, function toString() { 219 | return typeof this == 'function' && this[SRC] || $toString.call(this); 220 | }); 221 | 222 | 223 | /***/ }), 224 | 225 | /***/ "2aeb": 226 | /***/ (function(module, exports, __webpack_require__) { 227 | 228 | // 19.1.2.2 / 15.2.3.5 Object.create(O [, Properties]) 229 | var anObject = __webpack_require__("cb7c"); 230 | var dPs = __webpack_require__("1495"); 231 | var enumBugKeys = __webpack_require__("e11e"); 232 | var IE_PROTO = __webpack_require__("613b")('IE_PROTO'); 233 | var Empty = function () { /* empty */ }; 234 | var PROTOTYPE = 'prototype'; 235 | 236 | // Create object with fake `null` prototype: use iframe Object with cleared prototype 237 | var createDict = function () { 238 | // Thrash, waste and sodomy: IE GC bug 239 | var iframe = __webpack_require__("230e")('iframe'); 240 | var i = enumBugKeys.length; 241 | var lt = '<'; 242 | var gt = '>'; 243 | var iframeDocument; 244 | iframe.style.display = 'none'; 245 | __webpack_require__("fab2").appendChild(iframe); 246 | iframe.src = 'javascript:'; // eslint-disable-line no-script-url 247 | // createDict = iframe.contentWindow.Object; 248 | // html.removeChild(iframe); 249 | iframeDocument = iframe.contentWindow.document; 250 | iframeDocument.open(); 251 | iframeDocument.write(lt + 'script' + gt + 'document.F=Object' + lt + '/script' + gt); 252 | iframeDocument.close(); 253 | createDict = iframeDocument.F; 254 | while (i--) delete createDict[PROTOTYPE][enumBugKeys[i]]; 255 | return createDict(); 256 | }; 257 | 258 | module.exports = Object.create || function create(O, Properties) { 259 | var result; 260 | if (O !== null) { 261 | Empty[PROTOTYPE] = anObject(O); 262 | result = new Empty(); 263 | Empty[PROTOTYPE] = null; 264 | // add "__proto__" for Object.getPrototypeOf polyfill 265 | result[IE_PROTO] = O; 266 | } else result = createDict(); 267 | return Properties === undefined ? result : dPs(result, Properties); 268 | }; 269 | 270 | 271 | /***/ }), 272 | 273 | /***/ "2d00": 274 | /***/ (function(module, exports) { 275 | 276 | module.exports = false; 277 | 278 | 279 | /***/ }), 280 | 281 | /***/ "2d95": 282 | /***/ (function(module, exports) { 283 | 284 | var toString = {}.toString; 285 | 286 | module.exports = function (it) { 287 | return toString.call(it).slice(8, -1); 288 | }; 289 | 290 | 291 | /***/ }), 292 | 293 | /***/ "32e9": 294 | /***/ (function(module, exports, __webpack_require__) { 295 | 296 | var dP = __webpack_require__("86cc"); 297 | var createDesc = __webpack_require__("4630"); 298 | module.exports = __webpack_require__("9e1e") ? function (object, key, value) { 299 | return dP.f(object, key, createDesc(1, value)); 300 | } : function (object, key, value) { 301 | object[key] = value; 302 | return object; 303 | }; 304 | 305 | 306 | /***/ }), 307 | 308 | /***/ "4588": 309 | /***/ (function(module, exports) { 310 | 311 | // 7.1.4 ToInteger 312 | var ceil = Math.ceil; 313 | var floor = Math.floor; 314 | module.exports = function (it) { 315 | return isNaN(it = +it) ? 0 : (it > 0 ? floor : ceil)(it); 316 | }; 317 | 318 | 319 | /***/ }), 320 | 321 | /***/ "4630": 322 | /***/ (function(module, exports) { 323 | 324 | module.exports = function (bitmap, value) { 325 | return { 326 | enumerable: !(bitmap & 1), 327 | configurable: !(bitmap & 2), 328 | writable: !(bitmap & 4), 329 | value: value 330 | }; 331 | }; 332 | 333 | 334 | /***/ }), 335 | 336 | /***/ "526d": 337 | /***/ (function(module, exports, __webpack_require__) { 338 | 339 | // extracted by mini-css-extract-plugin 340 | 341 | /***/ }), 342 | 343 | /***/ "52a7": 344 | /***/ (function(module, exports) { 345 | 346 | exports.f = {}.propertyIsEnumerable; 347 | 348 | 349 | /***/ }), 350 | 351 | /***/ "5537": 352 | /***/ (function(module, exports, __webpack_require__) { 353 | 354 | var core = __webpack_require__("8378"); 355 | var global = __webpack_require__("7726"); 356 | var SHARED = '__core-js_shared__'; 357 | var store = global[SHARED] || (global[SHARED] = {}); 358 | 359 | (module.exports = function (key, value) { 360 | return store[key] || (store[key] = value !== undefined ? value : {}); 361 | })('versions', []).push({ 362 | version: core.version, 363 | mode: __webpack_require__("2d00") ? 'pure' : 'global', 364 | copyright: '© 2018 Denis Pushkarev (zloirock.ru)' 365 | }); 366 | 367 | 368 | /***/ }), 369 | 370 | /***/ "5ca1": 371 | /***/ (function(module, exports, __webpack_require__) { 372 | 373 | var global = __webpack_require__("7726"); 374 | var core = __webpack_require__("8378"); 375 | var hide = __webpack_require__("32e9"); 376 | var redefine = __webpack_require__("2aba"); 377 | var ctx = __webpack_require__("9b43"); 378 | var PROTOTYPE = 'prototype'; 379 | 380 | var $export = function (type, name, source) { 381 | var IS_FORCED = type & $export.F; 382 | var IS_GLOBAL = type & $export.G; 383 | var IS_STATIC = type & $export.S; 384 | var IS_PROTO = type & $export.P; 385 | var IS_BIND = type & $export.B; 386 | var target = IS_GLOBAL ? global : IS_STATIC ? global[name] || (global[name] = {}) : (global[name] || {})[PROTOTYPE]; 387 | var exports = IS_GLOBAL ? core : core[name] || (core[name] = {}); 388 | var expProto = exports[PROTOTYPE] || (exports[PROTOTYPE] = {}); 389 | var key, own, out, exp; 390 | if (IS_GLOBAL) source = name; 391 | for (key in source) { 392 | // contains in native 393 | own = !IS_FORCED && target && target[key] !== undefined; 394 | // export native or passed 395 | out = (own ? target : source)[key]; 396 | // bind timers to global for call from export context 397 | exp = IS_BIND && own ? ctx(out, global) : IS_PROTO && typeof out == 'function' ? ctx(Function.call, out) : out; 398 | // extend global 399 | if (target) redefine(target, key, out, type & $export.U); 400 | // export 401 | if (exports[key] != out) hide(exports, key, exp); 402 | if (IS_PROTO && expProto[key] != out) expProto[key] = out; 403 | } 404 | }; 405 | global.core = core; 406 | // type bitmap 407 | $export.F = 1; // forced 408 | $export.G = 2; // global 409 | $export.S = 4; // static 410 | $export.P = 8; // proto 411 | $export.B = 16; // bind 412 | $export.W = 32; // wrap 413 | $export.U = 64; // safe 414 | $export.R = 128; // real proto method for `library` 415 | module.exports = $export; 416 | 417 | 418 | /***/ }), 419 | 420 | /***/ "5dbc": 421 | /***/ (function(module, exports, __webpack_require__) { 422 | 423 | var isObject = __webpack_require__("d3f4"); 424 | var setPrototypeOf = __webpack_require__("8b97").set; 425 | module.exports = function (that, target, C) { 426 | var S = target.constructor; 427 | var P; 428 | if (S !== C && typeof S == 'function' && (P = S.prototype) !== C.prototype && isObject(P) && setPrototypeOf) { 429 | setPrototypeOf(that, P); 430 | } return that; 431 | }; 432 | 433 | 434 | /***/ }), 435 | 436 | /***/ "613b": 437 | /***/ (function(module, exports, __webpack_require__) { 438 | 439 | var shared = __webpack_require__("5537")('keys'); 440 | var uid = __webpack_require__("ca5a"); 441 | module.exports = function (key) { 442 | return shared[key] || (shared[key] = uid(key)); 443 | }; 444 | 445 | 446 | /***/ }), 447 | 448 | /***/ "626a": 449 | /***/ (function(module, exports, __webpack_require__) { 450 | 451 | // fallback for non-array-like ES3 and non-enumerable old V8 strings 452 | var cof = __webpack_require__("2d95"); 453 | // eslint-disable-next-line no-prototype-builtins 454 | module.exports = Object('z').propertyIsEnumerable(0) ? Object : function (it) { 455 | return cof(it) == 'String' ? it.split('') : Object(it); 456 | }; 457 | 458 | 459 | /***/ }), 460 | 461 | /***/ "6821": 462 | /***/ (function(module, exports, __webpack_require__) { 463 | 464 | // to indexed object, toObject with fallback for non-array-like ES3 strings 465 | var IObject = __webpack_require__("626a"); 466 | var defined = __webpack_require__("be13"); 467 | module.exports = function (it) { 468 | return IObject(defined(it)); 469 | }; 470 | 471 | 472 | /***/ }), 473 | 474 | /***/ "69a8": 475 | /***/ (function(module, exports) { 476 | 477 | var hasOwnProperty = {}.hasOwnProperty; 478 | module.exports = function (it, key) { 479 | return hasOwnProperty.call(it, key); 480 | }; 481 | 482 | 483 | /***/ }), 484 | 485 | /***/ "6a99": 486 | /***/ (function(module, exports, __webpack_require__) { 487 | 488 | // 7.1.1 ToPrimitive(input [, PreferredType]) 489 | var isObject = __webpack_require__("d3f4"); 490 | // instead of the ES6 spec version, we didn't implement @@toPrimitive case 491 | // and the second argument - flag - preferred type is a string 492 | module.exports = function (it, S) { 493 | if (!isObject(it)) return it; 494 | var fn, val; 495 | if (S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it))) return val; 496 | if (typeof (fn = it.valueOf) == 'function' && !isObject(val = fn.call(it))) return val; 497 | if (!S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it))) return val; 498 | throw TypeError("Can't convert object to primitive value"); 499 | }; 500 | 501 | 502 | /***/ }), 503 | 504 | /***/ "7726": 505 | /***/ (function(module, exports) { 506 | 507 | // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028 508 | var global = module.exports = typeof window != 'undefined' && window.Math == Math 509 | ? window : typeof self != 'undefined' && self.Math == Math ? self 510 | // eslint-disable-next-line no-new-func 511 | : Function('return this')(); 512 | if (typeof __g == 'number') __g = global; // eslint-disable-line no-undef 513 | 514 | 515 | /***/ }), 516 | 517 | /***/ "77f1": 518 | /***/ (function(module, exports, __webpack_require__) { 519 | 520 | var toInteger = __webpack_require__("4588"); 521 | var max = Math.max; 522 | var min = Math.min; 523 | module.exports = function (index, length) { 524 | index = toInteger(index); 525 | return index < 0 ? max(index + length, 0) : min(index, length); 526 | }; 527 | 528 | 529 | /***/ }), 530 | 531 | /***/ "79e5": 532 | /***/ (function(module, exports) { 533 | 534 | module.exports = function (exec) { 535 | try { 536 | return !!exec(); 537 | } catch (e) { 538 | return true; 539 | } 540 | }; 541 | 542 | 543 | /***/ }), 544 | 545 | /***/ "7f35": 546 | /***/ (function(module, exports) { 547 | 548 | (function (window) { 549 | var svgSprite = ''; 550 | 551 | var script = function () { 552 | var scripts = document.getElementsByTagName("script"); 553 | return scripts[scripts.length - 1]; 554 | }(); 555 | 556 | var shouldInjectCss = script.getAttribute("data-injectcss"); 557 | 558 | var ready = function ready(fn) { 559 | if (document.addEventListener) { 560 | if (~["complete", "loaded", "interactive"].indexOf(document.readyState)) { 561 | setTimeout(fn, 0); 562 | } else { 563 | var loadFn = function loadFn() { 564 | document.removeEventListener("DOMContentLoaded", loadFn, false); 565 | fn(); 566 | }; 567 | 568 | document.addEventListener("DOMContentLoaded", loadFn, false); 569 | } 570 | } else if (document.attachEvent) { 571 | IEContentLoaded(window, fn); 572 | } 573 | 574 | function IEContentLoaded(w, fn) { 575 | var d = w.document, 576 | done = false, 577 | init = function init() { 578 | if (!done) { 579 | done = true; 580 | fn(); 581 | } 582 | }; 583 | 584 | var polling = function polling() { 585 | try { 586 | d.documentElement.doScroll("left"); 587 | } catch (e) { 588 | setTimeout(polling, 50); 589 | return; 590 | } 591 | 592 | init(); 593 | }; 594 | 595 | polling(); 596 | 597 | d.onreadystatechange = function () { 598 | if (d.readyState == "complete") { 599 | d.onreadystatechange = null; 600 | init(); 601 | } 602 | }; 603 | } 604 | }; 605 | 606 | var before = function before(el, target) { 607 | target.parentNode.insertBefore(el, target); 608 | }; 609 | 610 | var prepend = function prepend(el, target) { 611 | if (target.firstChild) { 612 | before(el, target.firstChild); 613 | } else { 614 | target.appendChild(el); 615 | } 616 | }; 617 | 618 | function appendSvg() { 619 | var div, svg; 620 | div = document.createElement("div"); 621 | div.innerHTML = svgSprite; 622 | svgSprite = null; 623 | svg = div.getElementsByTagName("svg")[0]; 624 | 625 | if (svg) { 626 | svg.setAttribute("aria-hidden", "true"); 627 | svg.style.position = "absolute"; 628 | svg.style.width = 0; 629 | svg.style.height = 0; 630 | svg.style.overflow = "hidden"; 631 | prepend(svg, document.body); 632 | } 633 | } 634 | 635 | if (shouldInjectCss && !window.__iconfont__svg__cssinject__) { 636 | window.__iconfont__svg__cssinject__ = true; 637 | 638 | try { 639 | document.write(""); 640 | } catch (e) { 641 | console && console.log(e); 642 | } 643 | } 644 | 645 | ready(appendSvg); 646 | })(window); 647 | 648 | /***/ }), 649 | 650 | /***/ "7f7f": 651 | /***/ (function(module, exports, __webpack_require__) { 652 | 653 | var dP = __webpack_require__("86cc").f; 654 | var FProto = Function.prototype; 655 | var nameRE = /^\s*function ([^ (]*)/; 656 | var NAME = 'name'; 657 | 658 | // 19.2.4.2 name 659 | NAME in FProto || __webpack_require__("9e1e") && dP(FProto, NAME, { 660 | configurable: true, 661 | get: function () { 662 | try { 663 | return ('' + this).match(nameRE)[1]; 664 | } catch (e) { 665 | return ''; 666 | } 667 | } 668 | }); 669 | 670 | 671 | /***/ }), 672 | 673 | /***/ "8378": 674 | /***/ (function(module, exports) { 675 | 676 | var core = module.exports = { version: '2.5.7' }; 677 | if (typeof __e == 'number') __e = core; // eslint-disable-line no-undef 678 | 679 | 680 | /***/ }), 681 | 682 | /***/ "86cc": 683 | /***/ (function(module, exports, __webpack_require__) { 684 | 685 | var anObject = __webpack_require__("cb7c"); 686 | var IE8_DOM_DEFINE = __webpack_require__("c69a"); 687 | var toPrimitive = __webpack_require__("6a99"); 688 | var dP = Object.defineProperty; 689 | 690 | exports.f = __webpack_require__("9e1e") ? Object.defineProperty : function defineProperty(O, P, Attributes) { 691 | anObject(O); 692 | P = toPrimitive(P, true); 693 | anObject(Attributes); 694 | if (IE8_DOM_DEFINE) try { 695 | return dP(O, P, Attributes); 696 | } catch (e) { /* empty */ } 697 | if ('get' in Attributes || 'set' in Attributes) throw TypeError('Accessors not supported!'); 698 | if ('value' in Attributes) O[P] = Attributes.value; 699 | return O; 700 | }; 701 | 702 | 703 | /***/ }), 704 | 705 | /***/ "8b97": 706 | /***/ (function(module, exports, __webpack_require__) { 707 | 708 | // Works with __proto__ only. Old v8 can't work with null proto objects. 709 | /* eslint-disable no-proto */ 710 | var isObject = __webpack_require__("d3f4"); 711 | var anObject = __webpack_require__("cb7c"); 712 | var check = function (O, proto) { 713 | anObject(O); 714 | if (!isObject(proto) && proto !== null) throw TypeError(proto + ": can't set as prototype!"); 715 | }; 716 | module.exports = { 717 | set: Object.setPrototypeOf || ('__proto__' in {} ? // eslint-disable-line 718 | function (test, buggy, set) { 719 | try { 720 | set = __webpack_require__("9b43")(Function.call, __webpack_require__("11e9").f(Object.prototype, '__proto__').set, 2); 721 | set(test, []); 722 | buggy = !(test instanceof Array); 723 | } catch (e) { buggy = true; } 724 | return function setPrototypeOf(O, proto) { 725 | check(O, proto); 726 | if (buggy) O.__proto__ = proto; 727 | else set(O, proto); 728 | return O; 729 | }; 730 | }({}, false) : undefined), 731 | check: check 732 | }; 733 | 734 | 735 | /***/ }), 736 | 737 | /***/ "9093": 738 | /***/ (function(module, exports, __webpack_require__) { 739 | 740 | // 19.1.2.7 / 15.2.3.4 Object.getOwnPropertyNames(O) 741 | var $keys = __webpack_require__("ce10"); 742 | var hiddenKeys = __webpack_require__("e11e").concat('length', 'prototype'); 743 | 744 | exports.f = Object.getOwnPropertyNames || function getOwnPropertyNames(O) { 745 | return $keys(O, hiddenKeys); 746 | }; 747 | 748 | 749 | /***/ }), 750 | 751 | /***/ "9b43": 752 | /***/ (function(module, exports, __webpack_require__) { 753 | 754 | // optional / simple context binding 755 | var aFunction = __webpack_require__("d8e8"); 756 | module.exports = function (fn, that, length) { 757 | aFunction(fn); 758 | if (that === undefined) return fn; 759 | switch (length) { 760 | case 1: return function (a) { 761 | return fn.call(that, a); 762 | }; 763 | case 2: return function (a, b) { 764 | return fn.call(that, a, b); 765 | }; 766 | case 3: return function (a, b, c) { 767 | return fn.call(that, a, b, c); 768 | }; 769 | } 770 | return function (/* ...args */) { 771 | return fn.apply(that, arguments); 772 | }; 773 | }; 774 | 775 | 776 | /***/ }), 777 | 778 | /***/ "9def": 779 | /***/ (function(module, exports, __webpack_require__) { 780 | 781 | // 7.1.15 ToLength 782 | var toInteger = __webpack_require__("4588"); 783 | var min = Math.min; 784 | module.exports = function (it) { 785 | return it > 0 ? min(toInteger(it), 0x1fffffffffffff) : 0; // pow(2, 53) - 1 == 9007199254740991 786 | }; 787 | 788 | 789 | /***/ }), 790 | 791 | /***/ "9e1e": 792 | /***/ (function(module, exports, __webpack_require__) { 793 | 794 | // Thank's IE8 for his funny defineProperty 795 | module.exports = !__webpack_require__("79e5")(function () { 796 | return Object.defineProperty({}, 'a', { get: function () { return 7; } }).a != 7; 797 | }); 798 | 799 | 800 | /***/ }), 801 | 802 | /***/ "aa77": 803 | /***/ (function(module, exports, __webpack_require__) { 804 | 805 | var $export = __webpack_require__("5ca1"); 806 | var defined = __webpack_require__("be13"); 807 | var fails = __webpack_require__("79e5"); 808 | var spaces = __webpack_require__("fdef"); 809 | var space = '[' + spaces + ']'; 810 | var non = '\u200b\u0085'; 811 | var ltrim = RegExp('^' + space + space + '*'); 812 | var rtrim = RegExp(space + space + '*$'); 813 | 814 | var exporter = function (KEY, exec, ALIAS) { 815 | var exp = {}; 816 | var FORCE = fails(function () { 817 | return !!spaces[KEY]() || non[KEY]() != non; 818 | }); 819 | var fn = exp[KEY] = FORCE ? exec(trim) : spaces[KEY]; 820 | if (ALIAS) exp[ALIAS] = fn; 821 | $export($export.P + $export.F * FORCE, 'String', exp); 822 | }; 823 | 824 | // 1 -> String#trimLeft 825 | // 2 -> String#trimRight 826 | // 3 -> String#trim 827 | var trim = exporter.trim = function (string, TYPE) { 828 | string = String(defined(string)); 829 | if (TYPE & 1) string = string.replace(ltrim, ''); 830 | if (TYPE & 2) string = string.replace(rtrim, ''); 831 | return string; 832 | }; 833 | 834 | module.exports = exporter; 835 | 836 | 837 | /***/ }), 838 | 839 | /***/ "be13": 840 | /***/ (function(module, exports) { 841 | 842 | // 7.2.1 RequireObjectCoercible(argument) 843 | module.exports = function (it) { 844 | if (it == undefined) throw TypeError("Can't call method on " + it); 845 | return it; 846 | }; 847 | 848 | 849 | /***/ }), 850 | 851 | /***/ "c366": 852 | /***/ (function(module, exports, __webpack_require__) { 853 | 854 | // false -> Array#indexOf 855 | // true -> Array#includes 856 | var toIObject = __webpack_require__("6821"); 857 | var toLength = __webpack_require__("9def"); 858 | var toAbsoluteIndex = __webpack_require__("77f1"); 859 | module.exports = function (IS_INCLUDES) { 860 | return function ($this, el, fromIndex) { 861 | var O = toIObject($this); 862 | var length = toLength(O.length); 863 | var index = toAbsoluteIndex(fromIndex, length); 864 | var value; 865 | // Array#includes uses SameValueZero equality algorithm 866 | // eslint-disable-next-line no-self-compare 867 | if (IS_INCLUDES && el != el) while (length > index) { 868 | value = O[index++]; 869 | // eslint-disable-next-line no-self-compare 870 | if (value != value) return true; 871 | // Array#indexOf ignores holes, Array#includes - not 872 | } else for (;length > index; index++) if (IS_INCLUDES || index in O) { 873 | if (O[index] === el) return IS_INCLUDES || index || 0; 874 | } return !IS_INCLUDES && -1; 875 | }; 876 | }; 877 | 878 | 879 | /***/ }), 880 | 881 | /***/ "c5f6": 882 | /***/ (function(module, exports, __webpack_require__) { 883 | 884 | "use strict"; 885 | 886 | var global = __webpack_require__("7726"); 887 | var has = __webpack_require__("69a8"); 888 | var cof = __webpack_require__("2d95"); 889 | var inheritIfRequired = __webpack_require__("5dbc"); 890 | var toPrimitive = __webpack_require__("6a99"); 891 | var fails = __webpack_require__("79e5"); 892 | var gOPN = __webpack_require__("9093").f; 893 | var gOPD = __webpack_require__("11e9").f; 894 | var dP = __webpack_require__("86cc").f; 895 | var $trim = __webpack_require__("aa77").trim; 896 | var NUMBER = 'Number'; 897 | var $Number = global[NUMBER]; 898 | var Base = $Number; 899 | var proto = $Number.prototype; 900 | // Opera ~12 has broken Object#toString 901 | var BROKEN_COF = cof(__webpack_require__("2aeb")(proto)) == NUMBER; 902 | var TRIM = 'trim' in String.prototype; 903 | 904 | // 7.1.3 ToNumber(argument) 905 | var toNumber = function (argument) { 906 | var it = toPrimitive(argument, false); 907 | if (typeof it == 'string' && it.length > 2) { 908 | it = TRIM ? it.trim() : $trim(it, 3); 909 | var first = it.charCodeAt(0); 910 | var third, radix, maxCode; 911 | if (first === 43 || first === 45) { 912 | third = it.charCodeAt(2); 913 | if (third === 88 || third === 120) return NaN; // Number('+0x1') should be NaN, old V8 fix 914 | } else if (first === 48) { 915 | switch (it.charCodeAt(1)) { 916 | case 66: case 98: radix = 2; maxCode = 49; break; // fast equal /^0b[01]+$/i 917 | case 79: case 111: radix = 8; maxCode = 55; break; // fast equal /^0o[0-7]+$/i 918 | default: return +it; 919 | } 920 | for (var digits = it.slice(2), i = 0, l = digits.length, code; i < l; i++) { 921 | code = digits.charCodeAt(i); 922 | // parseInt parses a string to a first unavailable symbol 923 | // but ToNumber should return NaN if a string contains unavailable symbols 924 | if (code < 48 || code > maxCode) return NaN; 925 | } return parseInt(digits, radix); 926 | } 927 | } return +it; 928 | }; 929 | 930 | if (!$Number(' 0o1') || !$Number('0b1') || $Number('+0x1')) { 931 | $Number = function Number(value) { 932 | var it = arguments.length < 1 ? 0 : value; 933 | var that = this; 934 | return that instanceof $Number 935 | // check on 1..constructor(foo) case 936 | && (BROKEN_COF ? fails(function () { proto.valueOf.call(that); }) : cof(that) != NUMBER) 937 | ? inheritIfRequired(new Base(toNumber(it)), that, $Number) : toNumber(it); 938 | }; 939 | for (var keys = __webpack_require__("9e1e") ? gOPN(Base) : ( 940 | // ES3: 941 | 'MAX_VALUE,MIN_VALUE,NaN,NEGATIVE_INFINITY,POSITIVE_INFINITY,' + 942 | // ES6 (in case, if modules with ES6 Number statics required before): 943 | 'EPSILON,isFinite,isInteger,isNaN,isSafeInteger,MAX_SAFE_INTEGER,' + 944 | 'MIN_SAFE_INTEGER,parseFloat,parseInt,isInteger' 945 | ).split(','), j = 0, key; keys.length > j; j++) { 946 | if (has(Base, key = keys[j]) && !has($Number, key)) { 947 | dP($Number, key, gOPD(Base, key)); 948 | } 949 | } 950 | $Number.prototype = proto; 951 | proto.constructor = $Number; 952 | __webpack_require__("2aba")(global, NUMBER, $Number); 953 | } 954 | 955 | 956 | /***/ }), 957 | 958 | /***/ "c69a": 959 | /***/ (function(module, exports, __webpack_require__) { 960 | 961 | module.exports = !__webpack_require__("9e1e") && !__webpack_require__("79e5")(function () { 962 | return Object.defineProperty(__webpack_require__("230e")('div'), 'a', { get: function () { return 7; } }).a != 7; 963 | }); 964 | 965 | 966 | /***/ }), 967 | 968 | /***/ "ca5a": 969 | /***/ (function(module, exports) { 970 | 971 | var id = 0; 972 | var px = Math.random(); 973 | module.exports = function (key) { 974 | return 'Symbol('.concat(key === undefined ? '' : key, ')_', (++id + px).toString(36)); 975 | }; 976 | 977 | 978 | /***/ }), 979 | 980 | /***/ "cb7c": 981 | /***/ (function(module, exports, __webpack_require__) { 982 | 983 | var isObject = __webpack_require__("d3f4"); 984 | module.exports = function (it) { 985 | if (!isObject(it)) throw TypeError(it + ' is not an object!'); 986 | return it; 987 | }; 988 | 989 | 990 | /***/ }), 991 | 992 | /***/ "ce10": 993 | /***/ (function(module, exports, __webpack_require__) { 994 | 995 | var has = __webpack_require__("69a8"); 996 | var toIObject = __webpack_require__("6821"); 997 | var arrayIndexOf = __webpack_require__("c366")(false); 998 | var IE_PROTO = __webpack_require__("613b")('IE_PROTO'); 999 | 1000 | module.exports = function (object, names) { 1001 | var O = toIObject(object); 1002 | var i = 0; 1003 | var result = []; 1004 | var key; 1005 | for (key in O) if (key != IE_PROTO) has(O, key) && result.push(key); 1006 | // Don't enum bug & hidden keys 1007 | while (names.length > i) if (has(O, key = names[i++])) { 1008 | ~arrayIndexOf(result, key) || result.push(key); 1009 | } 1010 | return result; 1011 | }; 1012 | 1013 | 1014 | /***/ }), 1015 | 1016 | /***/ "d3f4": 1017 | /***/ (function(module, exports) { 1018 | 1019 | module.exports = function (it) { 1020 | return typeof it === 'object' ? it !== null : typeof it === 'function'; 1021 | }; 1022 | 1023 | 1024 | /***/ }), 1025 | 1026 | /***/ "d8e8": 1027 | /***/ (function(module, exports) { 1028 | 1029 | module.exports = function (it) { 1030 | if (typeof it != 'function') throw TypeError(it + ' is not a function!'); 1031 | return it; 1032 | }; 1033 | 1034 | 1035 | /***/ }), 1036 | 1037 | /***/ "e11e": 1038 | /***/ (function(module, exports) { 1039 | 1040 | // IE 8- don't enum bug keys 1041 | module.exports = ( 1042 | 'constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf' 1043 | ).split(','); 1044 | 1045 | 1046 | /***/ }), 1047 | 1048 | /***/ "fab2": 1049 | /***/ (function(module, exports, __webpack_require__) { 1050 | 1051 | var document = __webpack_require__("7726").document; 1052 | module.exports = document && document.documentElement; 1053 | 1054 | 1055 | /***/ }), 1056 | 1057 | /***/ "fb15": 1058 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 1059 | 1060 | "use strict"; 1061 | __webpack_require__.r(__webpack_exports__); 1062 | 1063 | // EXTERNAL MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js 1064 | var setPublicPath = __webpack_require__("1eb2"); 1065 | 1066 | // EXTERNAL MODULE: ./node_modules/core-js/modules/es6.function.name.js 1067 | var es6_function_name = __webpack_require__("7f7f"); 1068 | 1069 | // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules//.cache//vue-loader","cacheIdentifier":"05de0756-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/m-image-crop.vue?vue&type=template&id=546d4f84& 1070 | var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"m-image-crop"},[_c('img',{staticClass:"show-img",attrs:{"src":_vm._f("fileSrc")(_vm.currentValue)}}),(_vm.hasRemove)?_c('svg',{staticClass:"icon icon-remove",attrs:{"aria-hidden":"true"},on:{"click":function($event){$event.stopPropagation();_vm.$emit('remove')}}},[_c('use',{attrs:{"xlink:href":"#icon-remove"}})]):_vm._e(),_vm._t("default"),_c('input',{directives:[{name:"show",rawName:"v-show",value:(_vm.state == 1),expression:"state == 1"}],ref:"path",staticClass:"path",attrs:{"accept":"image/*","type":"file"},on:{"change":_vm.imageChange}}),_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.state == 2),expression:"state == 2"},{name:"touch",rawName:"v-touch:move",value:(_vm.move),expression:"move",arg:"move"},{name:"touch",rawName:"v-touch:end",value:(_vm.end),expression:"end",arg:"end"},{name:"touch",rawName:"v-touch:scale",value:(_vm.scale),expression:"scale",arg:"scale"}],ref:"fileView",staticClass:"file-view"},[_c('img',{ref:"file",staticClass:"file",attrs:{"src":_vm.url,"alt":""}}),_c('div',{ref:"imgView",staticClass:"imgView"},[_c('div',{ref:"imgViewBox",staticClass:"imgViewBox"},[_c('img',{ref:"file2",staticClass:"file",attrs:{"src":_vm.url,"alt":""}})])]),_c('div',{staticClass:"ctrl"},[_c('div',{staticClass:"back",attrs:{"flex":"33","layout":"column","layout-align":"center center"},on:{"click":_vm.back}},[_vm._v("\n 取消\n ")]),_c('div',{staticClass:"rotate",attrs:{"flex":"33","layout":"column","layout-align":"center center"},on:{"click":_vm.rotateChange}},[_vm._v("\n 旋转\n ")]),_c('div',{staticClass:"submit",attrs:{"flex":"33","layout":"column","layout-align":"center center"},on:{"click":_vm.submitFile}},[_vm._v("\n 确认\n ")])])])],2)} 1071 | var staticRenderFns = [] 1072 | 1073 | 1074 | // CONCATENATED MODULE: ./src/m-image-crop.vue?vue&type=template&id=546d4f84& 1075 | 1076 | // EXTERNAL MODULE: ./node_modules/core-js/modules/es6.number.constructor.js 1077 | var es6_number_constructor = __webpack_require__("c5f6"); 1078 | 1079 | // EXTERNAL MODULE: ./src/iconfont.js 1080 | var iconfont = __webpack_require__("7f35"); 1081 | 1082 | // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/m-image-crop.vue?vue&type=script&lang=js& 1083 | 1084 | // 1085 | // 1086 | // 1087 | // 1088 | // 1089 | // 1090 | // 1091 | // 1092 | // 1093 | // 1094 | // 1095 | // 1096 | // 1097 | // 1098 | // 1099 | // 1100 | // 1101 | // 1102 | // 1103 | // 1104 | // 1105 | // 1106 | // 1107 | // 1108 | // 1109 | // 1110 | // 1111 | // 1112 | // 1113 | // 1114 | // 1115 | // 1116 | // 1117 | // 1118 | // 1119 | // 1120 | // 1121 | // 1122 | // 1123 | // 1124 | // 1125 | // 1126 | // 1127 | // 1128 | // 1129 | // 1130 | // 1131 | // 1132 | // 1133 | // 1134 | // 1135 | // 1136 | // 1137 | // 1138 | // 1139 | // 1140 | // 1141 | // 1142 | // 1143 | // 1144 | // 1145 | // 1146 | // 1147 | // 1148 | // 1149 | // 1150 | // 1151 | 1152 | /** 1153 | * [events] 1154 | * remove: 移除按钮被点击时触发 1155 | * change: 改变选中图片时触发 1156 | * submit: 图片操作完成时触发 1157 | * cancel: 图片操作取消时触发 1158 | */ 1159 | 1160 | /* harmony default export */ var m_image_cropvue_type_script_lang_js_ = ({ 1161 | name: "m-image-crop", 1162 | data: function data() { 1163 | return { 1164 | state: 1, 1165 | // 截图状态 1166 | top: null, 1167 | // 初始移动Y 1168 | left: null, 1169 | // 初始移动X 1170 | url: null, 1171 | // 图片地址 1172 | img: new Image(), 1173 | maxSize: 3, 1174 | // 最大缩放比 1175 | initViewWidth: 74 / 100, 1176 | // 初始截取区宽度比例 1177 | borderWidth: 1, 1178 | // 截取区border 1179 | view: { 1180 | width: 0, 1181 | height: 0 1182 | }, 1183 | // 屏幕 1184 | fileSize: { 1185 | width: 0, 1186 | height: 0, 1187 | top: 0, 1188 | left: 0 1189 | }, 1190 | // 图片 1191 | fileInitSize: { 1192 | width: 0, 1193 | height: 0 1194 | }, 1195 | // 图片初始大小 1196 | filRealitySize: { 1197 | width: 0, 1198 | height: 0 1199 | }, 1200 | // 图片真实大小 1201 | viewBox: { 1202 | width: 0, 1203 | height: 0, 1204 | left: 0, 1205 | top: 0 1206 | }, 1207 | // 截取区 1208 | rotate: 0, 1209 | // 旋转角度 0 1 2 3 1210 | point1: null, 1211 | // 触控点1 1212 | point2: null, 1213 | // 触控点2 1214 | indicator: { 1215 | visible: false 1216 | } 1217 | }; 1218 | }, 1219 | props: { 1220 | // 图片包装对象 1221 | value: { 1222 | type: Object, 1223 | required: true, 1224 | default: function _default() { 1225 | return {}; 1226 | } 1227 | }, 1228 | // 图片宽高比例 1229 | proportion: { 1230 | type: Object, 1231 | default: function _default() { 1232 | // w: 宽；h：高 1233 | return { 1234 | w: 2, 1235 | h: 1 1236 | }; 1237 | } 1238 | }, 1239 | // 清晰度 1240 | quality: { 1241 | type: Number, 1242 | default: 0.92 1243 | }, 1244 | // 是否显示移除按钮 1245 | hasRemove: { 1246 | type: Boolean, 1247 | default: false 1248 | }, 1249 | // 是否跳过裁剪直接使用 1250 | skipCrop: { 1251 | type: Boolean, 1252 | default: false 1253 | }, 1254 | // 配置对象 1255 | config: { 1256 | type: Object, 1257 | default: function _default() { 1258 | return { 1259 | size: 1200, 1260 | // 图片最大宽度（px） 1261 | isSlice: true, 1262 | // 文件比例一致时是否需要裁剪，与skipCrop不同 1263 | path: null // 显示图片时的路径，path参数将直接与图片id拼接(path + id) 1264 | 1265 | }; 1266 | } 1267 | } 1268 | }, 1269 | components: {}, 1270 | beforeDestroy: function beforeDestroy() { 1271 | document.removeEventListener("touchmove", this.preventDefault, false); 1272 | document.body.removeChild(this.$refs.fileView); // 退出销毁外置截取区域 1273 | }, 1274 | mounted: function mounted() { 1275 | // 初始化value格式 1276 | document.body.appendChild(this.$refs.fileView); // 外置截取区域 1277 | 1278 | this.currentValue.origin = {}; 1279 | this.$nextTick(function () { 1280 | this.initViewSize(); 1281 | }); 1282 | }, 1283 | methods: { 1284 | imageChange: function imageChange(evt) { 1285 | var _this = this; 1286 | 1287 | // 加载文件 1288 | var file = evt.target.files[0]; 1289 | this.$emit("change", file); 1290 | if (!file) return; 1291 | var url = URL.createObjectURL(file); 1292 | this.currentValue.origin = file; // 渲染图片 1293 | 1294 | this.img.src = url; 1295 | 1296 | this.img.onload = function () { 1297 | _this.filRealitySize = { 1298 | width: _this.img.width, 1299 | height: _this.img.height 1300 | }; 1301 | 1302 | var showView = function showView() { 1303 | _this.indicator.visible = true; 1304 | 1305 | _this.loadImg(); 1306 | 1307 | setTimeout(function () { 1308 | _this.indicator.visible = false; 1309 | _this.state = 2; 1310 | 1311 | _this.$nextTick(function () { 1312 | this.file2SizePosition(); 1313 | }); 1314 | }, 800); 1315 | }; 1316 | 1317 | if (_this.skipCrop) { 1318 | _this.uploadCanvas(); 1319 | } else { 1320 | if (_this.config.isSlice && _this.filRealitySize.width / _this.filRealitySize.height == _this.proportion.w / _this.proportion.h) { 1321 | var flag = window.confirm("文件已符合规定尺寸，是否直接使用？"); 1322 | 1323 | if (flag) { 1324 | _this.uploadCanvas(); 1325 | } else { 1326 | showView(); 1327 | } 1328 | } else { 1329 | showView(); 1330 | } 1331 | } 1332 | }; 1333 | }, 1334 | loadImg: function loadImg() { 1335 | var imgWidth = this.filRealitySize.width; 1336 | 1337 | if (imgWidth > this.config.size) { 1338 | imgWidth = this.config.size; 1339 | } 1340 | 1341 | var imgHeight = imgWidth * (this.filRealitySize.height / this.filRealitySize.width); // 解决兼容 ios 1342 | 1343 | var canvas = document.createElement("canvas"); 1344 | var ctx = canvas.getContext("2d"); 1345 | 1346 | switch (this.rotate) { 1347 | case 0: 1348 | canvas.setAttribute("width", imgWidth); 1349 | canvas.setAttribute("height", imgHeight); 1350 | ctx.drawImage(this.img, 0, 0, imgWidth, imgHeight); 1351 | break; 1352 | 1353 | case 1: 1354 | imgWidth += imgHeight; 1355 | imgHeight = imgWidth - imgHeight; 1356 | imgWidth = imgWidth - imgHeight; 1357 | canvas.setAttribute("width", imgWidth); 1358 | canvas.setAttribute("height", imgHeight); 1359 | ctx.translate(imgWidth, 0); 1360 | ctx.rotate(90 * Math.PI / 180); 1361 | ctx.drawImage(this.img, 0, 0, imgHeight, imgWidth); 1362 | break; 1363 | 1364 | case 2: 1365 | canvas.setAttribute("width", imgWidth); 1366 | canvas.setAttribute("height", imgHeight); 1367 | ctx.translate(imgWidth, imgHeight); 1368 | ctx.rotate(180 * Math.PI / 180); 1369 | ctx.drawImage(this.img, 0, 0, imgWidth, imgHeight); 1370 | break; 1371 | 1372 | case 3: 1373 | imgWidth += imgHeight; 1374 | imgHeight = imgWidth - imgHeight; 1375 | imgWidth = imgWidth - imgHeight; 1376 | canvas.setAttribute("width", imgWidth); 1377 | canvas.setAttribute("height", imgHeight); 1378 | ctx.translate(0, imgHeight); 1379 | ctx.rotate(270 * Math.PI / 180); 1380 | ctx.drawImage(this.img, 0, 0, imgHeight, imgWidth); 1381 | break; 1382 | } 1383 | 1384 | this.url = canvas.toDataURL(this.currentValue.origin.type, this.quality); 1385 | 1386 | if (imgWidth / imgHeight >= this.view.width / this.view.height) { 1387 | // 判断图片长宽比 1388 | var _fileSize = { 1389 | width: this.view.width, 1390 | height: imgHeight / imgWidth * this.view.width 1391 | }; 1392 | 1393 | if (_fileSize.height < this.viewBox.height) { 1394 | // 判断是否小于截取区 1395 | _fileSize.height = this.viewBox.height; 1396 | _fileSize.width = imgWidth / imgHeight * _fileSize.height; 1397 | } 1398 | 1399 | this.fileSize.width = _fileSize.width; 1400 | this.fileSize.height = _fileSize.height; 1401 | this.fileSize.left = 0; 1402 | this.fileSize.top = (this.view.height - this.fileSize.height) / 2; 1403 | } else { 1404 | var _fileSize2 = { 1405 | width: imgWidth / imgHeight * this.view.height, 1406 | height: this.view.height 1407 | }; 1408 | 1409 | if (_fileSize2.width < this.viewBox.width) { 1410 | _fileSize2.width = this.viewBox.width; 1411 | _fileSize2.height = imgHeight / imgWidth * _fileSize2.width; 1412 | } 1413 | 1414 | this.fileSize.height = _fileSize2.height; 1415 | this.fileSize.width = _fileSize2.width; 1416 | this.fileSize.top = 0; 1417 | this.fileSize.left = (this.view.width - this.fileSize.width) / 2; 1418 | } 1419 | 1420 | this.fileInitSize = { 1421 | width: this.fileSize.width, 1422 | height: this.fileSize.height 1423 | }; 1424 | this.fileSizePosition(); 1425 | }, 1426 | initViewSize: function initViewSize() { 1427 | this.view.width = document.documentElement.clientWidth; 1428 | this.view.height = document.documentElement.clientHeight; // 屏幕 1429 | 1430 | this.$refs.fileView.style.width = this.view.width + "px"; 1431 | this.$refs.fileView.style.height = this.view.height + "px"; // 主工作区 1432 | 1433 | this.$refs.imgView.style.width = this.view.width + "px"; 1434 | this.$refs.imgView.style.height = this.view.height + "px"; // 视图区 1435 | 1436 | if (this.view.width * this.initViewWidth * this.proportion.h / this.proportion.w < this.view.height * this.initViewWidth) { 1437 | // 判断宽高 1438 | this.viewBox = { 1439 | width: Math.floor(this.view.width * this.initViewWidth), 1440 | height: Math.floor(this.view.width * this.initViewWidth * this.proportion.h / this.proportion.w) 1441 | }; 1442 | } else { 1443 | this.viewBox = { 1444 | width: Math.floor(this.view.height * this.initViewWidth * this.proportion.w / this.proportion.h), 1445 | height: Math.floor(this.view.height * this.initViewWidth) 1446 | }; 1447 | } 1448 | 1449 | this.viewBox.left = Math.floor((this.view.width - this.viewBox.width) / 2); 1450 | this.viewBox.top = Math.floor((this.view.height - this.viewBox.height) / 2); 1451 | this.$refs.imgViewBox.style.width = this.viewBox.width + "px"; 1452 | this.$refs.imgViewBox.style.height = this.viewBox.height + "px"; 1453 | this.$refs.imgViewBox.style.top = this.viewBox.top + "px"; 1454 | this.$refs.imgViewBox.style.left = this.viewBox.left + "px"; 1455 | }, 1456 | fileSizePosition: function fileSizePosition() { 1457 | this.$refs.file.style.top = this.fileSize.top + "px"; 1458 | this.$refs.file.style.left = this.fileSize.left + "px"; 1459 | this.$refs.file.style.width = this.fileSize.width + "px"; 1460 | this.$refs.file.style.height = this.fileSize.height + "px"; 1461 | this.file2SizePosition(); 1462 | }, 1463 | file2SizePosition: function file2SizePosition() { 1464 | this.$refs.file2.style.top = this.$refs.file.offsetTop - (this.$refs.imgViewBox.offsetTop + this.borderWidth) + "px"; 1465 | this.$refs.file2.style.left = this.$refs.file.offsetLeft - (this.$refs.imgViewBox.offsetLeft + this.borderWidth) + "px"; 1466 | this.$refs.file2.style.width = this.$refs.file.offsetWidth + "px"; 1467 | this.$refs.file2.style.height = this.$refs.file.offsetHeight + "px"; 1468 | }, 1469 | setAttr: function setAttr(ele, attrs) { 1470 | // 暂未用到 1471 | if (!attrs && attrs.length < 1) { 1472 | return; 1473 | } // attrs.forEach((item, key)=>{ 1474 | // console.log(item); 1475 | // console.log(key); 1476 | // }); 1477 | 1478 | }, 1479 | checkPosition: function checkPosition() { 1480 | // 缩放移动校验 1481 | var sizeFlag = false; 1482 | 1483 | if (this.fileSize.top >= this.viewBox.top + this.borderWidth) { 1484 | // top 校验 1485 | this.fileSize.top = this.viewBox.top + this.borderWidth; 1486 | } else if (this.fileSize.top + this.fileSize.height <= this.viewBox.top + this.viewBox.height + this.borderWidth) { 1487 | this.fileSize.top = this.viewBox.top + this.viewBox.height - this.fileSize.height + this.borderWidth; 1488 | } 1489 | 1490 | if (this.fileSize.left >= this.viewBox.left + this.borderWidth) { 1491 | // left 校验 1492 | this.fileSize.left = this.viewBox.left + this.borderWidth; 1493 | } else if (this.fileSize.left + this.fileSize.width <= this.viewBox.left + this.viewBox.width + this.borderWidth) { 1494 | this.fileSize.left = this.viewBox.left + this.viewBox.width - this.fileSize.width + this.borderWidth; 1495 | } // 缩放大小校验 1496 | 1497 | 1498 | if (this.fileSize.width <= this.viewBox.width) { 1499 | // width 校验 1500 | this.fileSize.width = this.viewBox.width; 1501 | this.fileSize.height = this.fileInitSize.height / this.fileInitSize.width * this.fileSize.width; 1502 | } 1503 | 1504 | if (this.fileSize.height <= this.viewBox.height) { 1505 | this.fileSize.height = this.viewBox.height; 1506 | this.fileSize.width = this.fileInitSize.width / this.fileInitSize.height * this.fileSize.height; 1507 | } 1508 | 1509 | if (this.fileSize.width > this.fileInitSize.width * this.maxSize) { 1510 | this.fileSize.width = this.fileInitSize.width * this.maxSize; 1511 | this.fileSize.height = this.fileInitSize.height / this.fileInitSize.width * this.fileSize.width; 1512 | sizeFlag = true; 1513 | } 1514 | 1515 | if (this.fileSize.height > this.fileInitSize.height * this.maxSize) { 1516 | this.fileSize.height = this.fileInitSize.height * this.maxSize; 1517 | this.fileSize.width = this.fileInitSize.width / this.fileInitSize.height * this.fileSize.height; 1518 | sizeFlag = true; 1519 | } 1520 | 1521 | if (sizeFlag) { 1522 | this.fileSize.left = this.$refs.file.offsetLeft; // 阻止移动 1523 | 1524 | this.fileSize.top = this.$refs.file.offsetTop; 1525 | } 1526 | }, 1527 | move: function move(evt) { 1528 | if (this.top) { 1529 | this.fileSize.top = Math.floor(this.$refs.file.offsetTop + evt.touches[0].clientY - this.top); 1530 | this.fileSize.left = Math.floor(this.$refs.file.offsetLeft + evt.touches[0].clientX - this.left); 1531 | this.checkPosition(); 1532 | this.fileSizePosition(); 1533 | } 1534 | 1535 | this.top = evt.touches[0].clientY; 1536 | this.left = evt.touches[0].clientX; 1537 | }, 1538 | scale: function scale(evt) { 1539 | if (this.point1) { 1540 | var scale = this.distance(evt.touches); 1541 | var oldSize = { 1542 | width: this.fileSize.width, 1543 | height: this.fileSize.height 1544 | }; 1545 | var newSize = { 1546 | width: oldSize.width * scale, 1547 | height: oldSize.height * scale 1548 | }; 1549 | this.fileSize.width = newSize.width; 1550 | this.fileSize.height = newSize.height; 1551 | this.fileSize.left = this.$refs.file.offsetLeft - (newSize.width - oldSize.width) / 2; 1552 | this.fileSize.top = this.$refs.file.offsetTop - (newSize.height - oldSize.height) / 2; 1553 | this.checkPosition(); 1554 | this.fileSizePosition(); 1555 | } 1556 | 1557 | this.point1 = JSON.stringify(evt.touches[0]).length < 3 ? evt.touches[0] : JSON.parse(JSON.stringify(evt.touches[0])); 1558 | this.point2 = JSON.stringify(evt.touches[1]).length < 3 ? evt.touches[1] : JSON.parse(JSON.stringify(evt.touches[1])); 1559 | }, 1560 | distance: function distance(touches) { 1561 | var oldVal = Math.sqrt(Math.pow(touches[0].clientX - touches[1].clientX, 2) + Math.pow(touches[0].clientY - touches[1].clientY, 2)); 1562 | var newVal = Math.sqrt(Math.pow(this.point1.clientX - this.point2.clientX, 2) + Math.pow(this.point1.clientY - this.point2.clientY, 2)); 1563 | var scale = oldVal / newVal; 1564 | return scale; 1565 | }, 1566 | imgSizeScale: function imgSizeScale() { 1567 | var sizeScale; 1568 | 1569 | if (this.viewBox.width / this.$refs.file.offsetWidth * this.filRealitySize.width < this.config.size) { 1570 | sizeScale = Number((this.viewBox.width / this.$refs.file.offsetWidth * this.filRealitySize.width / this.viewBox.width).toFixed(15)); 1571 | } else { 1572 | sizeScale = this.config.size / this.viewBox.width; 1573 | } 1574 | 1575 | return sizeScale; 1576 | }, 1577 | setCanvas: function setCanvas() { 1578 | var canvas = document.createElement("canvas"); 1579 | var ctx = canvas.getContext("2d"); 1580 | var sizeScale = this.imgSizeScale(); // 固定大小宽度比值 1581 | 1582 | canvas.setAttribute("width", this.viewBox.width * sizeScale); 1583 | canvas.setAttribute("height", this.viewBox.height * sizeScale); 1584 | ctx.drawImage(this.$refs.file, (this.$refs.file.offsetLeft - this.viewBox.left - this.borderWidth) * sizeScale, (this.$refs.file.offsetTop - this.viewBox.top - this.borderWidth) * sizeScale, this.$refs.file.offsetWidth * sizeScale, this.$refs.file.offsetHeight * sizeScale); // let base64 = canvas.toDataURL(this.currentValue.origin.type, this.quality); 1585 | 1586 | var base64 = canvas.toDataURL("image/jpeg", this.quality); 1587 | this.$set(this.currentValue, "base64", base64); // this.currentValue.content = base64.split(',')[1]; 1588 | 1589 | this.currentValue.id = null; 1590 | this.$emit("submit", this.currentValue); 1591 | }, 1592 | uploadCanvas: function uploadCanvas() { 1593 | // 不裁剪，直接使用 1594 | var imgWidth = this.filRealitySize.width; 1595 | 1596 | if (imgWidth > this.config.size) { 1597 | imgWidth = this.config.size; 1598 | } 1599 | 1600 | var imgHeight = imgWidth * (this.filRealitySize.height / this.filRealitySize.width); 1601 | var canvas = document.createElement("canvas"); 1602 | var ctx = canvas.getContext("2d"); 1603 | canvas.setAttribute("width", imgWidth); 1604 | canvas.setAttribute("height", imgHeight); 1605 | ctx.drawImage(this.img, 0, 0, imgWidth, imgHeight); // let _base64 = canvas.toDataURL(this.currentValue.origin.type, this.quality); 1606 | 1607 | var base64 = canvas.toDataURL("image/jpeg", this.quality); 1608 | this.$set(this.currentValue, "base64", base64); // this.currentValue.content = base64.split(',')[1]; 1609 | 1610 | this.currentValue.id = null; 1611 | this.$emit("submit", this.currentValue); 1612 | }, 1613 | end: function end() { 1614 | this.top = null; 1615 | this.left = null; 1616 | this.point1 = null; 1617 | this.point2 = null; 1618 | }, 1619 | preventDefault: function preventDefault(e) { 1620 | e.preventDefault(); 1621 | }, 1622 | addEventDefault: function addEventDefault() { 1623 | document.addEventListener("touchmove", this.preventDefault, { 1624 | passive: false 1625 | }); 1626 | }, 1627 | removeEventDefault: function removeEventDefault() { 1628 | document.removeEventListener("touchmove", this.preventDefault, false); 1629 | }, 1630 | submitFile: function submitFile() { 1631 | this.state = 1; 1632 | this.$refs.path.value = null; // 重置选取文件 1633 | 1634 | this.setCanvas(); 1635 | }, 1636 | rotateChange: function rotateChange() { 1637 | this.rotate++; 1638 | this.rotate %= 4; 1639 | this.loadImg(); 1640 | }, 1641 | back: function back() { 1642 | this.state = 1; 1643 | this.$refs.path.value = null; // 重置选取文件 1644 | 1645 | this.$emit("cancel"); 1646 | } 1647 | }, 1648 | watch: { 1649 | state: function state(newVal) { 1650 | if (newVal === 2) { 1651 | this.addEventDefault(); 1652 | } else { 1653 | this.removeEventDefault(); 1654 | } 1655 | } 1656 | }, 1657 | computed: { 1658 | currentValue: { 1659 | get: function get() { 1660 | return this.value; 1661 | }, 1662 | set: function set(val) { 1663 | this.$emit("input", val); 1664 | } 1665 | } 1666 | }, 1667 | filters: { 1668 | fileSrc: function fileSrc(value) { 1669 | if (value) { 1670 | if (value.base64) { 1671 | return value.base64; 1672 | } else if (value.id) { 1673 | return this.config.path + value.id; 1674 | } else { 1675 | return ""; 1676 | } 1677 | } else { 1678 | return ""; 1679 | } 1680 | } 1681 | }, 1682 | directives: { 1683 | touch: { 1684 | bind: function bind(el, binding) { 1685 | /* 传入的模式 press swipeRight swipeLeft swipeTop swipeDowm Tap move end*/ 1686 | var touchType = binding.arg; 1687 | var timeOutEvent = 0; 1688 | var direction = ""; 1689 | /* 滑动处理 */ 1690 | 1691 | var startX, startY; 1692 | /* 返回角度 */ 1693 | 1694 | function GetSlideAngle(dx, dy) { 1695 | return Math.atan2(dy, dx) * 180 / Math.PI; 1696 | } 1697 | /* 根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动 */ 1698 | 1699 | 1700 | function GetSlideDirection(startX, startY, endX, endY) { 1701 | var dy = startY - endY; 1702 | var dx = endX - startX; 1703 | var result = 0; 1704 | /* 如果滑动距离太短 */ 1705 | 1706 | if (Math.abs(dx) < 2 && Math.abs(dy) < 2) { 1707 | return "tap"; 1708 | } 1709 | 1710 | var angle = GetSlideAngle(dx, dy); 1711 | 1712 | if (angle >= -45 && angle < 45) { 1713 | result = "swiperight"; 1714 | } else if (angle >= 45 && angle < 135) { 1715 | result = "swipeup"; 1716 | } else if (angle >= -135 && angle < -45) { 1717 | result = "swipedown"; 1718 | } else if (angle >= 135 && angle <= 180 || angle >= -180 && angle < -135) { 1719 | result = "swipeleft"; 1720 | } 1721 | 1722 | return result; 1723 | } 1724 | 1725 | el.addEventListener("touchstart", function (ev) { 1726 | startX = ev.touches[0].pageX; 1727 | startY = ev.touches[0].pageY; 1728 | /* 判断长按 */ 1729 | 1730 | timeOutEvent = setTimeout(function () { 1731 | timeOutEvent = 0; 1732 | 1733 | if (touchType === "press") { 1734 | binding.value(ev); 1735 | } 1736 | }, 500); 1737 | }, false); 1738 | el.addEventListener("touchmove", function (ev) { 1739 | clearTimeout(timeOutEvent); 1740 | timeOutEvent = 0; 1741 | 1742 | if (ev.touches.length === 1) { 1743 | if (touchType === "move") { 1744 | binding.value(ev); 1745 | } 1746 | } else if (event.touches.length === 2) { 1747 | if (touchType === "scale") { 1748 | binding.value(ev); 1749 | } 1750 | } 1751 | }); 1752 | el.addEventListener("touchend", function (ev) { 1753 | var endX, endY; 1754 | endX = ev.changedTouches[0].pageX; 1755 | endY = ev.changedTouches[0].pageY; 1756 | direction = GetSlideDirection(startX, startY, endX, endY); 1757 | clearTimeout(timeOutEvent); 1758 | 1759 | if (touchType === "end") { 1760 | binding.value(ev); 1761 | } 1762 | 1763 | switch (direction) { 1764 | case 0: 1765 | break; 1766 | 1767 | case "tap": 1768 | if (touchType === "tap") { 1769 | binding.value(ev); 1770 | } 1771 | 1772 | break; 1773 | 1774 | case "swipeup": 1775 | if (touchType === "swipeup") { 1776 | binding.value(ev); 1777 | } 1778 | 1779 | break; 1780 | 1781 | case "swipedown": 1782 | if (touchType === "swipedown") { 1783 | binding.value(ev); 1784 | } 1785 | 1786 | break; 1787 | 1788 | case "swipeleft": 1789 | if (touchType === "swipeleft") { 1790 | binding.value(ev); 1791 | } 1792 | 1793 | break; 1794 | 1795 | case "swiperight": 1796 | if (touchType === "swiperight") { 1797 | binding.value(ev); 1798 | } 1799 | 1800 | break; 1801 | 1802 | default: 1803 | break; 1804 | } 1805 | }, false); 1806 | } 1807 | } 1808 | } 1809 | }); 1810 | // CONCATENATED MODULE: ./src/m-image-crop.vue?vue&type=script&lang=js& 1811 | /* harmony default export */ var src_m_image_cropvue_type_script_lang_js_ = (m_image_cropvue_type_script_lang_js_); 1812 | // EXTERNAL MODULE: ./src/m-image-crop.vue?vue&type=style&index=0&lang=less& 1813 | var m_image_cropvue_type_style_index_0_lang_less_ = __webpack_require__("0b10"); 1814 | 1815 | // CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js 1816 | /* globals __VUE_SSR_CONTEXT__ */ 1817 | 1818 | // IMPORTANT: Do NOT use ES2015 features in this file (except for modules). 1819 | // This module is a runtime utility for cleaner component module output and will 1820 | // be included in the final webpack user bundle. 1821 | 1822 | function normalizeComponent ( 1823 | scriptExports, 1824 | render, 1825 | staticRenderFns, 1826 | functionalTemplate, 1827 | injectStyles, 1828 | scopeId, 1829 | moduleIdentifier, /* server only */ 1830 | shadowMode /* vue-cli only */ 1831 | ) { 1832 | // Vue.extend constructor export interop 1833 | var options = typeof scriptExports === 'function' 1834 | ? scriptExports.options 1835 | : scriptExports 1836 | 1837 | // render functions 1838 | if (render) { 1839 | options.render = render 1840 | options.staticRenderFns = staticRenderFns 1841 | options._compiled = true 1842 | } 1843 | 1844 | // functional template 1845 | if (functionalTemplate) { 1846 | options.functional = true 1847 | } 1848 | 1849 | // scopedId 1850 | if (scopeId) { 1851 | options._scopeId = 'data-v-' + scopeId 1852 | } 1853 | 1854 | var hook 1855 | if (moduleIdentifier) { // server build 1856 | hook = function (context) { 1857 | // 2.3 injection 1858 | context = 1859 | context || // cached call 1860 | (this.$vnode && this.$vnode.ssrContext) || // stateful 1861 | (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional 1862 | // 2.2 with runInNewContext: true 1863 | if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { 1864 | context = __VUE_SSR_CONTEXT__ 1865 | } 1866 | // inject component styles 1867 | if (injectStyles) { 1868 | injectStyles.call(this, context) 1869 | } 1870 | // register component module identifier for async chunk inferrence 1871 | if (context && context._registeredComponents) { 1872 | context._registeredComponents.add(moduleIdentifier) 1873 | } 1874 | } 1875 | // used by ssr in case component is cached and beforeCreate 1876 | // never gets called 1877 | options._ssrRegister = hook 1878 | } else if (injectStyles) { 1879 | hook = shadowMode 1880 | ? function () { injectStyles.call(this, this.$root.$options.shadowRoot) } 1881 | : injectStyles 1882 | } 1883 | 1884 | if (hook) { 1885 | if (options.functional) { 1886 | // for template-only hot-reload because in that case the render fn doesn't 1887 | // go through the normalizer 1888 | options._injectStyles = hook 1889 | // register for functioal component in vue file 1890 | var originalRender = options.render 1891 | options.render = function renderWithStyleInjection (h, context) { 1892 | hook.call(context) 1893 | return originalRender(h, context) 1894 | } 1895 | } else { 1896 | // inject component registration as beforeCreate hook 1897 | var existing = options.beforeCreate 1898 | options.beforeCreate = existing 1899 | ? [].concat(existing, hook) 1900 | : [hook] 1901 | } 1902 | } 1903 | 1904 | return { 1905 | exports: scriptExports, 1906 | options: options 1907 | } 1908 | } 1909 | 1910 | // CONCATENATED MODULE: ./src/m-image-crop.vue 1911 | 1912 | 1913 | 1914 | 1915 | 1916 | 1917 | /* normalize component */ 1918 | 1919 | var component = normalizeComponent( 1920 | src_m_image_cropvue_type_script_lang_js_, 1921 | render, 1922 | staticRenderFns, 1923 | false, 1924 | null, 1925 | null, 1926 | null 1927 | 1928 | ) 1929 | 1930 | component.options.__file = "m-image-crop.vue" 1931 | /* harmony default export */ var m_image_crop = (component.exports); 1932 | // CONCATENATED MODULE: ./src/index.js 1933 | 1934 | 1935 | 1936 | m_image_crop.install = function (Vue) { 1937 | if (m_image_crop.installed) return; 1938 | m_image_crop.installed = true; 1939 | Vue.component(m_image_crop.name, m_image_crop); 1940 | }; 1941 | 1942 | if (window.Vue) { 1943 | m_image_crop.install(window.Vue); 1944 | } 1945 | 1946 | /* harmony default export */ var src = (m_image_crop); 1947 | // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js 1948 | 1949 | 1950 | /* harmony default export */ var entry_lib = __webpack_exports__["default"] = (src); 1951 | 1952 | 1953 | 1954 | /***/ }), 1955 | 1956 | /***/ "fdef": 1957 | /***/ (function(module, exports) { 1958 | 1959 | module.exports = '\x09\x0A\x0B\x0C\x0D\x20\xA0\u1680\u180E\u2000\u2001\u2002\u2003' + 1960 | '\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028\u2029\uFEFF'; 1961 | 1962 | 1963 | /***/ }) 1964 | 1965 | /******/ }); 1966 | //# sourceMappingURL=vue-image-crop.common.js.map -------------------------------------------------------------------------------- /lib/vue-image-crop.umd.js: -------------------------------------------------------------------------------- 1 | (function webpackUniversalModuleDefinition(root, factory) { 2 | if(typeof exports === 'object' && typeof module === 'object') 3 | module.exports = factory(); 4 | else if(typeof define === 'function' && define.amd) 5 | define([], factory); 6 | else if(typeof exports === 'object') 7 | exports["vue-image-crop"] = factory(); 8 | else 9 | root["vue-image-crop"] = factory(); 10 | })((typeof self !== 'undefined' ? self : this), function() { 11 | return /******/ (function(modules) { // webpackBootstrap 12 | /******/ // The module cache 13 | /******/ var installedModules = {}; 14 | /******/ 15 | /******/ // The require function 16 | /******/ function __webpack_require__(moduleId) { 17 | /******/ 18 | /******/ // Check if module is in cache 19 | /******/ if(installedModules[moduleId]) { 20 | /******/ return installedModules[moduleId].exports; 21 | /******/ } 22 | /******/ // Create a new module (and put it into the cache) 23 | /******/ var module = installedModules[moduleId] = { 24 | /******/ i: moduleId, 25 | /******/ l: false, 26 | /******/ exports: {} 27 | /******/ }; 28 | /******/ 29 | /******/ // Execute the module function 30 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 31 | /******/ 32 | /******/ // Flag the module as loaded 33 | /******/ module.l = true; 34 | /******/ 35 | /******/ // Return the exports of the module 36 | /******/ return module.exports; 37 | /******/ } 38 | /******/ 39 | /******/ 40 | /******/ // expose the modules object (__webpack_modules__) 41 | /******/ __webpack_require__.m = modules; 42 | /******/ 43 | /******/ // expose the module cache 44 | /******/ __webpack_require__.c = installedModules; 45 | /******/ 46 | /******/ // define getter function for harmony exports 47 | /******/ __webpack_require__.d = function(exports, name, getter) { 48 | /******/ if(!__webpack_require__.o(exports, name)) { 49 | /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); 50 | /******/ } 51 | /******/ }; 52 | /******/ 53 | /******/ // define __esModule on exports 54 | /******/ __webpack_require__.r = function(exports) { 55 | /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 56 | /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 57 | /******/ } 58 | /******/ Object.defineProperty(exports, '__esModule', { value: true }); 59 | /******/ }; 60 | /******/ 61 | /******/ // create a fake namespace object 62 | /******/ // mode & 1: value is a module id, require it 63 | /******/ // mode & 2: merge all properties of value into the ns 64 | /******/ // mode & 4: return value when already ns object 65 | /******/ // mode & 8|1: behave like require 66 | /******/ __webpack_require__.t = function(value, mode) { 67 | /******/ if(mode & 1) value = __webpack_require__(value); 68 | /******/ if(mode & 8) return value; 69 | /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; 70 | /******/ var ns = Object.create(null); 71 | /******/ __webpack_require__.r(ns); 72 | /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); 73 | /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); 74 | /******/ return ns; 75 | /******/ }; 76 | /******/ 77 | /******/ // getDefaultExport function for compatibility with non-harmony modules 78 | /******/ __webpack_require__.n = function(module) { 79 | /******/ var getter = module && module.__esModule ? 80 | /******/ function getDefault() { return module['default']; } : 81 | /******/ function getModuleExports() { return module; }; 82 | /******/ __webpack_require__.d(getter, 'a', getter); 83 | /******/ return getter; 84 | /******/ }; 85 | /******/ 86 | /******/ // Object.prototype.hasOwnProperty.call 87 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 88 | /******/ 89 | /******/ // __webpack_public_path__ 90 | /******/ __webpack_require__.p = ""; 91 | /******/ 92 | /******/ 93 | /******/ // Load entry module and return exports 94 | /******/ return __webpack_require__(__webpack_require__.s = "fb15"); 95 | /******/ }) 96 | /************************************************************************/ 97 | /******/ ({ 98 | 99 | /***/ "0b10": 100 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 101 | 102 | "use strict"; 103 | /* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_10_oneOf_1_0_node_modules_css_loader_index_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_lib_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_m_image_crop_vue_vue_type_style_index_0_lang_less___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("526d"); 104 | /* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_10_oneOf_1_0_node_modules_css_loader_index_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_lib_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_m_image_crop_vue_vue_type_style_index_0_lang_less___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_10_oneOf_1_0_node_modules_css_loader_index_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_lib_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_m_image_crop_vue_vue_type_style_index_0_lang_less___WEBPACK_IMPORTED_MODULE_0__); 105 | /* unused harmony reexport * */ 106 | /* unused harmony default export */ var _unused_webpack_default_export = (_node_modules_mini_css_extract_plugin_dist_loader_js_ref_10_oneOf_1_0_node_modules_css_loader_index_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_lib_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_m_image_crop_vue_vue_type_style_index_0_lang_less___WEBPACK_IMPORTED_MODULE_0___default.a); 107 | 108 | /***/ }), 109 | 110 | /***/ "0d58": 111 | /***/ (function(module, exports, __webpack_require__) { 112 | 113 | // 19.1.2.14 / 15.2.3.14 Object.keys(O) 114 | var $keys = __webpack_require__("ce10"); 115 | var enumBugKeys = __webpack_require__("e11e"); 116 | 117 | module.exports = Object.keys || function keys(O) { 118 | return $keys(O, enumBugKeys); 119 | }; 120 | 121 | 122 | /***/ }), 123 | 124 | /***/ "11e9": 125 | /***/ (function(module, exports, __webpack_require__) { 126 | 127 | var pIE = __webpack_require__("52a7"); 128 | var createDesc = __webpack_require__("4630"); 129 | var toIObject = __webpack_require__("6821"); 130 | var toPrimitive = __webpack_require__("6a99"); 131 | var has = __webpack_require__("69a8"); 132 | var IE8_DOM_DEFINE = __webpack_require__("c69a"); 133 | var gOPD = Object.getOwnPropertyDescriptor; 134 | 135 | exports.f = __webpack_require__("9e1e") ? gOPD : function getOwnPropertyDescriptor(O, P) { 136 | O = toIObject(O); 137 | P = toPrimitive(P, true); 138 | if (IE8_DOM_DEFINE) try { 139 | return gOPD(O, P); 140 | } catch (e) { /* empty */ } 141 | if (has(O, P)) return createDesc(!pIE.f.call(O, P), O[P]); 142 | }; 143 | 144 | 145 | /***/ }), 146 | 147 | /***/ "1495": 148 | /***/ (function(module, exports, __webpack_require__) { 149 | 150 | var dP = __webpack_require__("86cc"); 151 | var anObject = __webpack_require__("cb7c"); 152 | var getKeys = __webpack_require__("0d58"); 153 | 154 | module.exports = __webpack_require__("9e1e") ? Object.defineProperties : function defineProperties(O, Properties) { 155 | anObject(O); 156 | var keys = getKeys(Properties); 157 | var length = keys.length; 158 | var i = 0; 159 | var P; 160 | while (length > i) dP.f(O, P = keys[i++], Properties[P]); 161 | return O; 162 | }; 163 | 164 | 165 | /***/ }), 166 | 167 | /***/ "1eb2": 168 | /***/ (function(module, exports, __webpack_require__) { 169 | 170 | // This file is imported into lib/wc client bundles. 171 | 172 | if (typeof window !== 'undefined') { 173 | var i 174 | if ((i = window.document.currentScript) && (i = i.src.match(/(.+\/)[^/]+\.js$/))) { 175 | __webpack_require__.p = i[1] // eslint-disable-line 176 | } 177 | } 178 | 179 | 180 | /***/ }), 181 | 182 | /***/ "230e": 183 | /***/ (function(module, exports, __webpack_require__) { 184 | 185 | var isObject = __webpack_require__("d3f4"); 186 | var document = __webpack_require__("7726").document; 187 | // typeof document.createElement is 'object' in old IE 188 | var is = isObject(document) && isObject(document.createElement); 189 | module.exports = function (it) { 190 | return is ? document.createElement(it) : {}; 191 | }; 192 | 193 | 194 | /***/ }), 195 | 196 | /***/ "2aba": 197 | /***/ (function(module, exports, __webpack_require__) { 198 | 199 | var global = __webpack_require__("7726"); 200 | var hide = __webpack_require__("32e9"); 201 | var has = __webpack_require__("69a8"); 202 | var SRC = __webpack_require__("ca5a")('src'); 203 | var TO_STRING = 'toString'; 204 | var $toString = Function[TO_STRING]; 205 | var TPL = ('' + $toString).split(TO_STRING); 206 | 207 | __webpack_require__("8378").inspectSource = function (it) { 208 | return $toString.call(it); 209 | }; 210 | 211 | (module.exports = function (O, key, val, safe) { 212 | var isFunction = typeof val == 'function'; 213 | if (isFunction) has(val, 'name') || hide(val, 'name', key); 214 | if (O[key] === val) return; 215 | if (isFunction) has(val, SRC) || hide(val, SRC, O[key] ? '' + O[key] : TPL.join(String(key))); 216 | if (O === global) { 217 | O[key] = val; 218 | } else if (!safe) { 219 | delete O[key]; 220 | hide(O, key, val); 221 | } else if (O[key]) { 222 | O[key] = val; 223 | } else { 224 | hide(O, key, val); 225 | } 226 | // add fake Function#toString for correct work wrapped methods / constructors with methods like LoDash isNative 227 | })(Function.prototype, TO_STRING, function toString() { 228 | return typeof this == 'function' && this[SRC] || $toString.call(this); 229 | }); 230 | 231 | 232 | /***/ }), 233 | 234 | /***/ "2aeb": 235 | /***/ (function(module, exports, __webpack_require__) { 236 | 237 | // 19.1.2.2 / 15.2.3.5 Object.create(O [, Properties]) 238 | var anObject = __webpack_require__("cb7c"); 239 | var dPs = __webpack_require__("1495"); 240 | var enumBugKeys = __webpack_require__("e11e"); 241 | var IE_PROTO = __webpack_require__("613b")('IE_PROTO'); 242 | var Empty = function () { /* empty */ }; 243 | var PROTOTYPE = 'prototype'; 244 | 245 | // Create object with fake `null` prototype: use iframe Object with cleared prototype 246 | var createDict = function () { 247 | // Thrash, waste and sodomy: IE GC bug 248 | var iframe = __webpack_require__("230e")('iframe'); 249 | var i = enumBugKeys.length; 250 | var lt = '<'; 251 | var gt = '>'; 252 | var iframeDocument; 253 | iframe.style.display = 'none'; 254 | __webpack_require__("fab2").appendChild(iframe); 255 | iframe.src = 'javascript:'; // eslint-disable-line no-script-url 256 | // createDict = iframe.contentWindow.Object; 257 | // html.removeChild(iframe); 258 | iframeDocument = iframe.contentWindow.document; 259 | iframeDocument.open(); 260 | iframeDocument.write(lt + 'script' + gt + 'document.F=Object' + lt + '/script' + gt); 261 | iframeDocument.close(); 262 | createDict = iframeDocument.F; 263 | while (i--) delete createDict[PROTOTYPE][enumBugKeys[i]]; 264 | return createDict(); 265 | }; 266 | 267 | module.exports = Object.create || function create(O, Properties) { 268 | var result; 269 | if (O !== null) { 270 | Empty[PROTOTYPE] = anObject(O); 271 | result = new Empty(); 272 | Empty[PROTOTYPE] = null; 273 | // add "__proto__" for Object.getPrototypeOf polyfill 274 | result[IE_PROTO] = O; 275 | } else result = createDict(); 276 | return Properties === undefined ? result : dPs(result, Properties); 277 | }; 278 | 279 | 280 | /***/ }), 281 | 282 | /***/ "2d00": 283 | /***/ (function(module, exports) { 284 | 285 | module.exports = false; 286 | 287 | 288 | /***/ }), 289 | 290 | /***/ "2d95": 291 | /***/ (function(module, exports) { 292 | 293 | var toString = {}.toString; 294 | 295 | module.exports = function (it) { 296 | return toString.call(it).slice(8, -1); 297 | }; 298 | 299 | 300 | /***/ }), 301 | 302 | /***/ "32e9": 303 | /***/ (function(module, exports, __webpack_require__) { 304 | 305 | var dP = __webpack_require__("86cc"); 306 | var createDesc = __webpack_require__("4630"); 307 | module.exports = __webpack_require__("9e1e") ? function (object, key, value) { 308 | return dP.f(object, key, createDesc(1, value)); 309 | } : function (object, key, value) { 310 | object[key] = value; 311 | return object; 312 | }; 313 | 314 | 315 | /***/ }), 316 | 317 | /***/ "4588": 318 | /***/ (function(module, exports) { 319 | 320 | // 7.1.4 ToInteger 321 | var ceil = Math.ceil; 322 | var floor = Math.floor; 323 | module.exports = function (it) { 324 | return isNaN(it = +it) ? 0 : (it > 0 ? floor : ceil)(it); 325 | }; 326 | 327 | 328 | /***/ }), 329 | 330 | /***/ "4630": 331 | /***/ (function(module, exports) { 332 | 333 | module.exports = function (bitmap, value) { 334 | return { 335 | enumerable: !(bitmap & 1), 336 | configurable: !(bitmap & 2), 337 | writable: !(bitmap & 4), 338 | value: value 339 | }; 340 | }; 341 | 342 | 343 | /***/ }), 344 | 345 | /***/ "526d": 346 | /***/ (function(module, exports, __webpack_require__) { 347 | 348 | // extracted by mini-css-extract-plugin 349 | 350 | /***/ }), 351 | 352 | /***/ "52a7": 353 | /***/ (function(module, exports) { 354 | 355 | exports.f = {}.propertyIsEnumerable; 356 | 357 | 358 | /***/ }), 359 | 360 | /***/ "5537": 361 | /***/ (function(module, exports, __webpack_require__) { 362 | 363 | var core = __webpack_require__("8378"); 364 | var global = __webpack_require__("7726"); 365 | var SHARED = '__core-js_shared__'; 366 | var store = global[SHARED] || (global[SHARED] = {}); 367 | 368 | (module.exports = function (key, value) { 369 | return store[key] || (store[key] = value !== undefined ? value : {}); 370 | })('versions', []).push({ 371 | version: core.version, 372 | mode: __webpack_require__("2d00") ? 'pure' : 'global', 373 | copyright: '© 2018 Denis Pushkarev (zloirock.ru)' 374 | }); 375 | 376 | 377 | /***/ }), 378 | 379 | /***/ "5ca1": 380 | /***/ (function(module, exports, __webpack_require__) { 381 | 382 | var global = __webpack_require__("7726"); 383 | var core = __webpack_require__("8378"); 384 | var hide = __webpack_require__("32e9"); 385 | var redefine = __webpack_require__("2aba"); 386 | var ctx = __webpack_require__("9b43"); 387 | var PROTOTYPE = 'prototype'; 388 | 389 | var $export = function (type, name, source) { 390 | var IS_FORCED = type & $export.F; 391 | var IS_GLOBAL = type & $export.G; 392 | var IS_STATIC = type & $export.S; 393 | var IS_PROTO = type & $export.P; 394 | var IS_BIND = type & $export.B; 395 | var target = IS_GLOBAL ? global : IS_STATIC ? global[name] || (global[name] = {}) : (global[name] || {})[PROTOTYPE]; 396 | var exports = IS_GLOBAL ? core : core[name] || (core[name] = {}); 397 | var expProto = exports[PROTOTYPE] || (exports[PROTOTYPE] = {}); 398 | var key, own, out, exp; 399 | if (IS_GLOBAL) source = name; 400 | for (key in source) { 401 | // contains in native 402 | own = !IS_FORCED && target && target[key] !== undefined; 403 | // export native or passed 404 | out = (own ? target : source)[key]; 405 | // bind timers to global for call from export context 406 | exp = IS_BIND && own ? ctx(out, global) : IS_PROTO && typeof out == 'function' ? ctx(Function.call, out) : out; 407 | // extend global 408 | if (target) redefine(target, key, out, type & $export.U); 409 | // export 410 | if (exports[key] != out) hide(exports, key, exp); 411 | if (IS_PROTO && expProto[key] != out) expProto[key] = out; 412 | } 413 | }; 414 | global.core = core; 415 | // type bitmap 416 | $export.F = 1; // forced 417 | $export.G = 2; // global 418 | $export.S = 4; // static 419 | $export.P = 8; // proto 420 | $export.B = 16; // bind 421 | $export.W = 32; // wrap 422 | $export.U = 64; // safe 423 | $export.R = 128; // real proto method for `library` 424 | module.exports = $export; 425 | 426 | 427 | /***/ }), 428 | 429 | /***/ "5dbc": 430 | /***/ (function(module, exports, __webpack_require__) { 431 | 432 | var isObject = __webpack_require__("d3f4"); 433 | var setPrototypeOf = __webpack_require__("8b97").set; 434 | module.exports = function (that, target, C) { 435 | var S = target.constructor; 436 | var P; 437 | if (S !== C && typeof S == 'function' && (P = S.prototype) !== C.prototype && isObject(P) && setPrototypeOf) { 438 | setPrototypeOf(that, P); 439 | } return that; 440 | }; 441 | 442 | 443 | /***/ }), 444 | 445 | /***/ "613b": 446 | /***/ (function(module, exports, __webpack_require__) { 447 | 448 | var shared = __webpack_require__("5537")('keys'); 449 | var uid = __webpack_require__("ca5a"); 450 | module.exports = function (key) { 451 | return shared[key] || (shared[key] = uid(key)); 452 | }; 453 | 454 | 455 | /***/ }), 456 | 457 | /***/ "626a": 458 | /***/ (function(module, exports, __webpack_require__) { 459 | 460 | // fallback for non-array-like ES3 and non-enumerable old V8 strings 461 | var cof = __webpack_require__("2d95"); 462 | // eslint-disable-next-line no-prototype-builtins 463 | module.exports = Object('z').propertyIsEnumerable(0) ? Object : function (it) { 464 | return cof(it) == 'String' ? it.split('') : Object(it); 465 | }; 466 | 467 | 468 | /***/ }), 469 | 470 | /***/ "6821": 471 | /***/ (function(module, exports, __webpack_require__) { 472 | 473 | // to indexed object, toObject with fallback for non-array-like ES3 strings 474 | var IObject = __webpack_require__("626a"); 475 | var defined = __webpack_require__("be13"); 476 | module.exports = function (it) { 477 | return IObject(defined(it)); 478 | }; 479 | 480 | 481 | /***/ }), 482 | 483 | /***/ "69a8": 484 | /***/ (function(module, exports) { 485 | 486 | var hasOwnProperty = {}.hasOwnProperty; 487 | module.exports = function (it, key) { 488 | return hasOwnProperty.call(it, key); 489 | }; 490 | 491 | 492 | /***/ }), 493 | 494 | /***/ "6a99": 495 | /***/ (function(module, exports, __webpack_require__) { 496 | 497 | // 7.1.1 ToPrimitive(input [, PreferredType]) 498 | var isObject = __webpack_require__("d3f4"); 499 | // instead of the ES6 spec version, we didn't implement @@toPrimitive case 500 | // and the second argument - flag - preferred type is a string 501 | module.exports = function (it, S) { 502 | if (!isObject(it)) return it; 503 | var fn, val; 504 | if (S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it))) return val; 505 | if (typeof (fn = it.valueOf) == 'function' && !isObject(val = fn.call(it))) return val; 506 | if (!S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it))) return val; 507 | throw TypeError("Can't convert object to primitive value"); 508 | }; 509 | 510 | 511 | /***/ }), 512 | 513 | /***/ "7726": 514 | /***/ (function(module, exports) { 515 | 516 | // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028 517 | var global = module.exports = typeof window != 'undefined' && window.Math == Math 518 | ? window : typeof self != 'undefined' && self.Math == Math ? self 519 | // eslint-disable-next-line no-new-func 520 | : Function('return this')(); 521 | if (typeof __g == 'number') __g = global; // eslint-disable-line no-undef 522 | 523 | 524 | /***/ }), 525 | 526 | /***/ "77f1": 527 | /***/ (function(module, exports, __webpack_require__) { 528 | 529 | var toInteger = __webpack_require__("4588"); 530 | var max = Math.max; 531 | var min = Math.min; 532 | module.exports = function (index, length) { 533 | index = toInteger(index); 534 | return index < 0 ? max(index + length, 0) : min(index, length); 535 | }; 536 | 537 | 538 | /***/ }), 539 | 540 | /***/ "79e5": 541 | /***/ (function(module, exports) { 542 | 543 | module.exports = function (exec) { 544 | try { 545 | return !!exec(); 546 | } catch (e) { 547 | return true; 548 | } 549 | }; 550 | 551 | 552 | /***/ }), 553 | 554 | /***/ "7f35": 555 | /***/ (function(module, exports) { 556 | 557 | (function (window) { 558 | var svgSprite = ''; 559 | 560 | var script = function () { 561 | var scripts = document.getElementsByTagName("script"); 562 | return scripts[scripts.length - 1]; 563 | }(); 564 | 565 | var shouldInjectCss = script.getAttribute("data-injectcss"); 566 | 567 | var ready = function ready(fn) { 568 | if (document.addEventListener) { 569 | if (~["complete", "loaded", "interactive"].indexOf(document.readyState)) { 570 | setTimeout(fn, 0); 571 | } else { 572 | var loadFn = function loadFn() { 573 | document.removeEventListener("DOMContentLoaded", loadFn, false); 574 | fn(); 575 | }; 576 | 577 | document.addEventListener("DOMContentLoaded", loadFn, false); 578 | } 579 | } else if (document.attachEvent) { 580 | IEContentLoaded(window, fn); 581 | } 582 | 583 | function IEContentLoaded(w, fn) { 584 | var d = w.document, 585 | done = false, 586 | init = function init() { 587 | if (!done) { 588 | done = true; 589 | fn(); 590 | } 591 | }; 592 | 593 | var polling = function polling() { 594 | try { 595 | d.documentElement.doScroll("left"); 596 | } catch (e) { 597 | setTimeout(polling, 50); 598 | return; 599 | } 600 | 601 | init(); 602 | }; 603 | 604 | polling(); 605 | 606 | d.onreadystatechange = function () { 607 | if (d.readyState == "complete") { 608 | d.onreadystatechange = null; 609 | init(); 610 | } 611 | }; 612 | } 613 | }; 614 | 615 | var before = function before(el, target) { 616 | target.parentNode.insertBefore(el, target); 617 | }; 618 | 619 | var prepend = function prepend(el, target) { 620 | if (target.firstChild) { 621 | before(el, target.firstChild); 622 | } else { 623 | target.appendChild(el); 624 | } 625 | }; 626 | 627 | function appendSvg() { 628 | var div, svg; 629 | div = document.createElement("div"); 630 | div.innerHTML = svgSprite; 631 | svgSprite = null; 632 | svg = div.getElementsByTagName("svg")[0]; 633 | 634 | if (svg) { 635 | svg.setAttribute("aria-hidden", "true"); 636 | svg.style.position = "absolute"; 637 | svg.style.width = 0; 638 | svg.style.height = 0; 639 | svg.style.overflow = "hidden"; 640 | prepend(svg, document.body); 641 | } 642 | } 643 | 644 | if (shouldInjectCss && !window.__iconfont__svg__cssinject__) { 645 | window.__iconfont__svg__cssinject__ = true; 646 | 647 | try { 648 | document.write(""); 649 | } catch (e) { 650 | console && console.log(e); 651 | } 652 | } 653 | 654 | ready(appendSvg); 655 | })(window); 656 | 657 | /***/ }), 658 | 659 | /***/ "7f7f": 660 | /***/ (function(module, exports, __webpack_require__) { 661 | 662 | var dP = __webpack_require__("86cc").f; 663 | var FProto = Function.prototype; 664 | var nameRE = /^\s*function ([^ (]*)/; 665 | var NAME = 'name'; 666 | 667 | // 19.2.4.2 name 668 | NAME in FProto || __webpack_require__("9e1e") && dP(FProto, NAME, { 669 | configurable: true, 670 | get: function () { 671 | try { 672 | return ('' + this).match(nameRE)[1]; 673 | } catch (e) { 674 | return ''; 675 | } 676 | } 677 | }); 678 | 679 | 680 | /***/ }), 681 | 682 | /***/ "8378": 683 | /***/ (function(module, exports) { 684 | 685 | var core = module.exports = { version: '2.5.7' }; 686 | if (typeof __e == 'number') __e = core; // eslint-disable-line no-undef 687 | 688 | 689 | /***/ }), 690 | 691 | /***/ "86cc": 692 | /***/ (function(module, exports, __webpack_require__) { 693 | 694 | var anObject = __webpack_require__("cb7c"); 695 | var IE8_DOM_DEFINE = __webpack_require__("c69a"); 696 | var toPrimitive = __webpack_require__("6a99"); 697 | var dP = Object.defineProperty; 698 | 699 | exports.f = __webpack_require__("9e1e") ? Object.defineProperty : function defineProperty(O, P, Attributes) { 700 | anObject(O); 701 | P = toPrimitive(P, true); 702 | anObject(Attributes); 703 | if (IE8_DOM_DEFINE) try { 704 | return dP(O, P, Attributes); 705 | } catch (e) { /* empty */ } 706 | if ('get' in Attributes || 'set' in Attributes) throw TypeError('Accessors not supported!'); 707 | if ('value' in Attributes) O[P] = Attributes.value; 708 | return O; 709 | }; 710 | 711 | 712 | /***/ }), 713 | 714 | /***/ "8b97": 715 | /***/ (function(module, exports, __webpack_require__) { 716 | 717 | // Works with __proto__ only. Old v8 can't work with null proto objects. 718 | /* eslint-disable no-proto */ 719 | var isObject = __webpack_require__("d3f4"); 720 | var anObject = __webpack_require__("cb7c"); 721 | var check = function (O, proto) { 722 | anObject(O); 723 | if (!isObject(proto) && proto !== null) throw TypeError(proto + ": can't set as prototype!"); 724 | }; 725 | module.exports = { 726 | set: Object.setPrototypeOf || ('__proto__' in {} ? // eslint-disable-line 727 | function (test, buggy, set) { 728 | try { 729 | set = __webpack_require__("9b43")(Function.call, __webpack_require__("11e9").f(Object.prototype, '__proto__').set, 2); 730 | set(test, []); 731 | buggy = !(test instanceof Array); 732 | } catch (e) { buggy = true; } 733 | return function setPrototypeOf(O, proto) { 734 | check(O, proto); 735 | if (buggy) O.__proto__ = proto; 736 | else set(O, proto); 737 | return O; 738 | }; 739 | }({}, false) : undefined), 740 | check: check 741 | }; 742 | 743 | 744 | /***/ }), 745 | 746 | /***/ "9093": 747 | /***/ (function(module, exports, __webpack_require__) { 748 | 749 | // 19.1.2.7 / 15.2.3.4 Object.getOwnPropertyNames(O) 750 | var $keys = __webpack_require__("ce10"); 751 | var hiddenKeys = __webpack_require__("e11e").concat('length', 'prototype'); 752 | 753 | exports.f = Object.getOwnPropertyNames || function getOwnPropertyNames(O) { 754 | return $keys(O, hiddenKeys); 755 | }; 756 | 757 | 758 | /***/ }), 759 | 760 | /***/ "9b43": 761 | /***/ (function(module, exports, __webpack_require__) { 762 | 763 | // optional / simple context binding 764 | var aFunction = __webpack_require__("d8e8"); 765 | module.exports = function (fn, that, length) { 766 | aFunction(fn); 767 | if (that === undefined) return fn; 768 | switch (length) { 769 | case 1: return function (a) { 770 | return fn.call(that, a); 771 | }; 772 | case 2: return function (a, b) { 773 | return fn.call(that, a, b); 774 | }; 775 | case 3: return function (a, b, c) { 776 | return fn.call(that, a, b, c); 777 | }; 778 | } 779 | return function (/* ...args */) { 780 | return fn.apply(that, arguments); 781 | }; 782 | }; 783 | 784 | 785 | /***/ }), 786 | 787 | /***/ "9def": 788 | /***/ (function(module, exports, __webpack_require__) { 789 | 790 | // 7.1.15 ToLength 791 | var toInteger = __webpack_require__("4588"); 792 | var min = Math.min; 793 | module.exports = function (it) { 794 | return it > 0 ? min(toInteger(it), 0x1fffffffffffff) : 0; // pow(2, 53) - 1 == 9007199254740991 795 | }; 796 | 797 | 798 | /***/ }), 799 | 800 | /***/ "9e1e": 801 | /***/ (function(module, exports, __webpack_require__) { 802 | 803 | // Thank's IE8 for his funny defineProperty 804 | module.exports = !__webpack_require__("79e5")(function () { 805 | return Object.defineProperty({}, 'a', { get: function () { return 7; } }).a != 7; 806 | }); 807 | 808 | 809 | /***/ }), 810 | 811 | /***/ "aa77": 812 | /***/ (function(module, exports, __webpack_require__) { 813 | 814 | var $export = __webpack_require__("5ca1"); 815 | var defined = __webpack_require__("be13"); 816 | var fails = __webpack_require__("79e5"); 817 | var spaces = __webpack_require__("fdef"); 818 | var space = '[' + spaces + ']'; 819 | var non = '\u200b\u0085'; 820 | var ltrim = RegExp('^' + space + space + '*'); 821 | var rtrim = RegExp(space + space + '*$'); 822 | 823 | var exporter = function (KEY, exec, ALIAS) { 824 | var exp = {}; 825 | var FORCE = fails(function () { 826 | return !!spaces[KEY]() || non[KEY]() != non; 827 | }); 828 | var fn = exp[KEY] = FORCE ? exec(trim) : spaces[KEY]; 829 | if (ALIAS) exp[ALIAS] = fn; 830 | $export($export.P + $export.F * FORCE, 'String', exp); 831 | }; 832 | 833 | // 1 -> String#trimLeft 834 | // 2 -> String#trimRight 835 | // 3 -> String#trim 836 | var trim = exporter.trim = function (string, TYPE) { 837 | string = String(defined(string)); 838 | if (TYPE & 1) string = string.replace(ltrim, ''); 839 | if (TYPE & 2) string = string.replace(rtrim, ''); 840 | return string; 841 | }; 842 | 843 | module.exports = exporter; 844 | 845 | 846 | /***/ }), 847 | 848 | /***/ "be13": 849 | /***/ (function(module, exports) { 850 | 851 | // 7.2.1 RequireObjectCoercible(argument) 852 | module.exports = function (it) { 853 | if (it == undefined) throw TypeError("Can't call method on " + it); 854 | return it; 855 | }; 856 | 857 | 858 | /***/ }), 859 | 860 | /***/ "c366": 861 | /***/ (function(module, exports, __webpack_require__) { 862 | 863 | // false -> Array#indexOf 864 | // true -> Array#includes 865 | var toIObject = __webpack_require__("6821"); 866 | var toLength = __webpack_require__("9def"); 867 | var toAbsoluteIndex = __webpack_require__("77f1"); 868 | module.exports = function (IS_INCLUDES) { 869 | return function ($this, el, fromIndex) { 870 | var O = toIObject($this); 871 | var length = toLength(O.length); 872 | var index = toAbsoluteIndex(fromIndex, length); 873 | var value; 874 | // Array#includes uses SameValueZero equality algorithm 875 | // eslint-disable-next-line no-self-compare 876 | if (IS_INCLUDES && el != el) while (length > index) { 877 | value = O[index++]; 878 | // eslint-disable-next-line no-self-compare 879 | if (value != value) return true; 880 | // Array#indexOf ignores holes, Array#includes - not 881 | } else for (;length > index; index++) if (IS_INCLUDES || index in O) { 882 | if (O[index] === el) return IS_INCLUDES || index || 0; 883 | } return !IS_INCLUDES && -1; 884 | }; 885 | }; 886 | 887 | 888 | /***/ }), 889 | 890 | /***/ "c5f6": 891 | /***/ (function(module, exports, __webpack_require__) { 892 | 893 | "use strict"; 894 | 895 | var global = __webpack_require__("7726"); 896 | var has = __webpack_require__("69a8"); 897 | var cof = __webpack_require__("2d95"); 898 | var inheritIfRequired = __webpack_require__("5dbc"); 899 | var toPrimitive = __webpack_require__("6a99"); 900 | var fails = __webpack_require__("79e5"); 901 | var gOPN = __webpack_require__("9093").f; 902 | var gOPD = __webpack_require__("11e9").f; 903 | var dP = __webpack_require__("86cc").f; 904 | var $trim = __webpack_require__("aa77").trim; 905 | var NUMBER = 'Number'; 906 | var $Number = global[NUMBER]; 907 | var Base = $Number; 908 | var proto = $Number.prototype; 909 | // Opera ~12 has broken Object#toString 910 | var BROKEN_COF = cof(__webpack_require__("2aeb")(proto)) == NUMBER; 911 | var TRIM = 'trim' in String.prototype; 912 | 913 | // 7.1.3 ToNumber(argument) 914 | var toNumber = function (argument) { 915 | var it = toPrimitive(argument, false); 916 | if (typeof it == 'string' && it.length > 2) { 917 | it = TRIM ? it.trim() : $trim(it, 3); 918 | var first = it.charCodeAt(0); 919 | var third, radix, maxCode; 920 | if (first === 43 || first === 45) { 921 | third = it.charCodeAt(2); 922 | if (third === 88 || third === 120) return NaN; // Number('+0x1') should be NaN, old V8 fix 923 | } else if (first === 48) { 924 | switch (it.charCodeAt(1)) { 925 | case 66: case 98: radix = 2; maxCode = 49; break; // fast equal /^0b[01]+$/i 926 | case 79: case 111: radix = 8; maxCode = 55; break; // fast equal /^0o[0-7]+$/i 927 | default: return +it; 928 | } 929 | for (var digits = it.slice(2), i = 0, l = digits.length, code; i < l; i++) { 930 | code = digits.charCodeAt(i); 931 | // parseInt parses a string to a first unavailable symbol 932 | // but ToNumber should return NaN if a string contains unavailable symbols 933 | if (code < 48 || code > maxCode) return NaN; 934 | } return parseInt(digits, radix); 935 | } 936 | } return +it; 937 | }; 938 | 939 | if (!$Number(' 0o1') || !$Number('0b1') || $Number('+0x1')) { 940 | $Number = function Number(value) { 941 | var it = arguments.length < 1 ? 0 : value; 942 | var that = this; 943 | return that instanceof $Number 944 | // check on 1..constructor(foo) case 945 | && (BROKEN_COF ? fails(function () { proto.valueOf.call(that); }) : cof(that) != NUMBER) 946 | ? inheritIfRequired(new Base(toNumber(it)), that, $Number) : toNumber(it); 947 | }; 948 | for (var keys = __webpack_require__("9e1e") ? gOPN(Base) : ( 949 | // ES3: 950 | 'MAX_VALUE,MIN_VALUE,NaN,NEGATIVE_INFINITY,POSITIVE_INFINITY,' + 951 | // ES6 (in case, if modules with ES6 Number statics required before): 952 | 'EPSILON,isFinite,isInteger,isNaN,isSafeInteger,MAX_SAFE_INTEGER,' + 953 | 'MIN_SAFE_INTEGER,parseFloat,parseInt,isInteger' 954 | ).split(','), j = 0, key; keys.length > j; j++) { 955 | if (has(Base, key = keys[j]) && !has($Number, key)) { 956 | dP($Number, key, gOPD(Base, key)); 957 | } 958 | } 959 | $Number.prototype = proto; 960 | proto.constructor = $Number; 961 | __webpack_require__("2aba")(global, NUMBER, $Number); 962 | } 963 | 964 | 965 | /***/ }), 966 | 967 | /***/ "c69a": 968 | /***/ (function(module, exports, __webpack_require__) { 969 | 970 | module.exports = !__webpack_require__("9e1e") && !__webpack_require__("79e5")(function () { 971 | return Object.defineProperty(__webpack_require__("230e")('div'), 'a', { get: function () { return 7; } }).a != 7; 972 | }); 973 | 974 | 975 | /***/ }), 976 | 977 | /***/ "ca5a": 978 | /***/ (function(module, exports) { 979 | 980 | var id = 0; 981 | var px = Math.random(); 982 | module.exports = function (key) { 983 | return 'Symbol('.concat(key === undefined ? '' : key, ')_', (++id + px).toString(36)); 984 | }; 985 | 986 | 987 | /***/ }), 988 | 989 | /***/ "cb7c": 990 | /***/ (function(module, exports, __webpack_require__) { 991 | 992 | var isObject = __webpack_require__("d3f4"); 993 | module.exports = function (it) { 994 | if (!isObject(it)) throw TypeError(it + ' is not an object!'); 995 | return it; 996 | }; 997 | 998 | 999 | /***/ }), 1000 | 1001 | /***/ "ce10": 1002 | /***/ (function(module, exports, __webpack_require__) { 1003 | 1004 | var has = __webpack_require__("69a8"); 1005 | var toIObject = __webpack_require__("6821"); 1006 | var arrayIndexOf = __webpack_require__("c366")(false); 1007 | var IE_PROTO = __webpack_require__("613b")('IE_PROTO'); 1008 | 1009 | module.exports = function (object, names) { 1010 | var O = toIObject(object); 1011 | var i = 0; 1012 | var result = []; 1013 | var key; 1014 | for (key in O) if (key != IE_PROTO) has(O, key) && result.push(key); 1015 | // Don't enum bug & hidden keys 1016 | while (names.length > i) if (has(O, key = names[i++])) { 1017 | ~arrayIndexOf(result, key) || result.push(key); 1018 | } 1019 | return result; 1020 | }; 1021 | 1022 | 1023 | /***/ }), 1024 | 1025 | /***/ "d3f4": 1026 | /***/ (function(module, exports) { 1027 | 1028 | module.exports = function (it) { 1029 | return typeof it === 'object' ? it !== null : typeof it === 'function'; 1030 | }; 1031 | 1032 | 1033 | /***/ }), 1034 | 1035 | /***/ "d8e8": 1036 | /***/ (function(module, exports) { 1037 | 1038 | module.exports = function (it) { 1039 | if (typeof it != 'function') throw TypeError(it + ' is not a function!'); 1040 | return it; 1041 | }; 1042 | 1043 | 1044 | /***/ }), 1045 | 1046 | /***/ "e11e": 1047 | /***/ (function(module, exports) { 1048 | 1049 | // IE 8- don't enum bug keys 1050 | module.exports = ( 1051 | 'constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf' 1052 | ).split(','); 1053 | 1054 | 1055 | /***/ }), 1056 | 1057 | /***/ "fab2": 1058 | /***/ (function(module, exports, __webpack_require__) { 1059 | 1060 | var document = __webpack_require__("7726").document; 1061 | module.exports = document && document.documentElement; 1062 | 1063 | 1064 | /***/ }), 1065 | 1066 | /***/ "fb15": 1067 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 1068 | 1069 | "use strict"; 1070 | __webpack_require__.r(__webpack_exports__); 1071 | 1072 | // EXTERNAL MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js 1073 | var setPublicPath = __webpack_require__("1eb2"); 1074 | 1075 | // EXTERNAL MODULE: ./node_modules/core-js/modules/es6.function.name.js 1076 | var es6_function_name = __webpack_require__("7f7f"); 1077 | 1078 | // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules//.cache//vue-loader","cacheIdentifier":"05de0756-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/m-image-crop.vue?vue&type=template&id=546d4f84& 1079 | var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"m-image-crop"},[_c('img',{staticClass:"show-img",attrs:{"src":_vm._f("fileSrc")(_vm.currentValue)}}),(_vm.hasRemove)?_c('svg',{staticClass:"icon icon-remove",attrs:{"aria-hidden":"true"},on:{"click":function($event){$event.stopPropagation();_vm.$emit('remove')}}},[_c('use',{attrs:{"xlink:href":"#icon-remove"}})]):_vm._e(),_vm._t("default"),_c('input',{directives:[{name:"show",rawName:"v-show",value:(_vm.state == 1),expression:"state == 1"}],ref:"path",staticClass:"path",attrs:{"accept":"image/*","type":"file"},on:{"change":_vm.imageChange}}),_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.state == 2),expression:"state == 2"},{name:"touch",rawName:"v-touch:move",value:(_vm.move),expression:"move",arg:"move"},{name:"touch",rawName:"v-touch:end",value:(_vm.end),expression:"end",arg:"end"},{name:"touch",rawName:"v-touch:scale",value:(_vm.scale),expression:"scale",arg:"scale"}],ref:"fileView",staticClass:"file-view"},[_c('img',{ref:"file",staticClass:"file",attrs:{"src":_vm.url,"alt":""}}),_c('div',{ref:"imgView",staticClass:"imgView"},[_c('div',{ref:"imgViewBox",staticClass:"imgViewBox"},[_c('img',{ref:"file2",staticClass:"file",attrs:{"src":_vm.url,"alt":""}})])]),_c('div',{staticClass:"ctrl"},[_c('div',{staticClass:"back",attrs:{"flex":"33","layout":"column","layout-align":"center center"},on:{"click":_vm.back}},[_vm._v("\n 取消\n ")]),_c('div',{staticClass:"rotate",attrs:{"flex":"33","layout":"column","layout-align":"center center"},on:{"click":_vm.rotateChange}},[_vm._v("\n 旋转\n ")]),_c('div',{staticClass:"submit",attrs:{"flex":"33","layout":"column","layout-align":"center center"},on:{"click":_vm.submitFile}},[_vm._v("\n 确认\n ")])])])],2)} 1080 | var staticRenderFns = [] 1081 | 1082 | 1083 | // CONCATENATED MODULE: ./src/m-image-crop.vue?vue&type=template&id=546d4f84& 1084 | 1085 | // EXTERNAL MODULE: ./node_modules/core-js/modules/es6.number.constructor.js 1086 | var es6_number_constructor = __webpack_require__("c5f6"); 1087 | 1088 | // EXTERNAL MODULE: ./src/iconfont.js 1089 | var iconfont = __webpack_require__("7f35"); 1090 | 1091 | // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/m-image-crop.vue?vue&type=script&lang=js& 1092 | 1093 | // 1094 | // 1095 | // 1096 | // 1097 | // 1098 | // 1099 | // 1100 | // 1101 | // 1102 | // 1103 | // 1104 | // 1105 | // 1106 | // 1107 | // 1108 | // 1109 | // 1110 | // 1111 | // 1112 | // 1113 | // 1114 | // 1115 | // 1116 | // 1117 | // 1118 | // 1119 | // 1120 | // 1121 | // 1122 | // 1123 | // 1124 | // 1125 | // 1126 | // 1127 | // 1128 | // 1129 | // 1130 | // 1131 | // 1132 | // 1133 | // 1134 | // 1135 | // 1136 | // 1137 | // 1138 | // 1139 | // 1140 | // 1141 | // 1142 | // 1143 | // 1144 | // 1145 | // 1146 | // 1147 | // 1148 | // 1149 | // 1150 | // 1151 | // 1152 | // 1153 | // 1154 | // 1155 | // 1156 | // 1157 | // 1158 | // 1159 | // 1160 | 1161 | /** 1162 | * [events] 1163 | * remove: 移除按钮被点击时触发 1164 | * change: 改变选中图片时触发 1165 | * submit: 图片操作完成时触发 1166 | * cancel: 图片操作取消时触发 1167 | */ 1168 | 1169 | /* harmony default export */ var m_image_cropvue_type_script_lang_js_ = ({ 1170 | name: "m-image-crop", 1171 | data: function data() { 1172 | return { 1173 | state: 1, 1174 | // 截图状态 1175 | top: null, 1176 | // 初始移动Y 1177 | left: null, 1178 | // 初始移动X 1179 | url: null, 1180 | // 图片地址 1181 | img: new Image(), 1182 | maxSize: 3, 1183 | // 最大缩放比 1184 | initViewWidth: 74 / 100, 1185 | // 初始截取区宽度比例 1186 | borderWidth: 1, 1187 | // 截取区border 1188 | view: { 1189 | width: 0, 1190 | height: 0 1191 | }, 1192 | // 屏幕 1193 | fileSize: { 1194 | width: 0, 1195 | height: 0, 1196 | top: 0, 1197 | left: 0 1198 | }, 1199 | // 图片 1200 | fileInitSize: { 1201 | width: 0, 1202 | height: 0 1203 | }, 1204 | // 图片初始大小 1205 | filRealitySize: { 1206 | width: 0, 1207 | height: 0 1208 | }, 1209 | // 图片真实大小 1210 | viewBox: { 1211 | width: 0, 1212 | height: 0, 1213 | left: 0, 1214 | top: 0 1215 | }, 1216 | // 截取区 1217 | rotate: 0, 1218 | // 旋转角度 0 1 2 3 1219 | point1: null, 1220 | // 触控点1 1221 | point2: null, 1222 | // 触控点2 1223 | indicator: { 1224 | visible: false 1225 | } 1226 | }; 1227 | }, 1228 | props: { 1229 | // 图片包装对象 1230 | value: { 1231 | type: Object, 1232 | required: true, 1233 | default: function _default() { 1234 | return {}; 1235 | } 1236 | }, 1237 | // 图片宽高比例 1238 | proportion: { 1239 | type: Object, 1240 | default: function _default() { 1241 | // w: 宽；h：高 1242 | return { 1243 | w: 2, 1244 | h: 1 1245 | }; 1246 | } 1247 | }, 1248 | // 清晰度 1249 | quality: { 1250 | type: Number, 1251 | default: 0.92 1252 | }, 1253 | // 是否显示移除按钮 1254 | hasRemove: { 1255 | type: Boolean, 1256 | default: false 1257 | }, 1258 | // 是否跳过裁剪直接使用 1259 | skipCrop: { 1260 | type: Boolean, 1261 | default: false 1262 | }, 1263 | // 配置对象 1264 | config: { 1265 | type: Object, 1266 | default: function _default() { 1267 | return { 1268 | size: 1200, 1269 | // 图片最大宽度（px） 1270 | isSlice: true, 1271 | // 文件比例一致时是否需要裁剪，与skipCrop不同 1272 | path: null // 显示图片时的路径，path参数将直接与图片id拼接(path + id) 1273 | 1274 | }; 1275 | } 1276 | } 1277 | }, 1278 | components: {}, 1279 | beforeDestroy: function beforeDestroy() { 1280 | document.removeEventListener("touchmove", this.preventDefault, false); 1281 | document.body.removeChild(this.$refs.fileView); // 退出销毁外置截取区域 1282 | }, 1283 | mounted: function mounted() { 1284 | // 初始化value格式 1285 | document.body.appendChild(this.$refs.fileView); // 外置截取区域 1286 | 1287 | this.currentValue.origin = {}; 1288 | this.$nextTick(function () { 1289 | this.initViewSize(); 1290 | }); 1291 | }, 1292 | methods: { 1293 | imageChange: function imageChange(evt) { 1294 | var _this = this; 1295 | 1296 | // 加载文件 1297 | var file = evt.target.files[0]; 1298 | this.$emit("change", file); 1299 | if (!file) return; 1300 | var url = URL.createObjectURL(file); 1301 | this.currentValue.origin = file; // 渲染图片 1302 | 1303 | this.img.src = url; 1304 | 1305 | this.img.onload = function () { 1306 | _this.filRealitySize = { 1307 | width: _this.img.width, 1308 | height: _this.img.height 1309 | }; 1310 | 1311 | var showView = function showView() { 1312 | _this.indicator.visible = true; 1313 | 1314 | _this.loadImg(); 1315 | 1316 | setTimeout(function () { 1317 | _this.indicator.visible = false; 1318 | _this.state = 2; 1319 | 1320 | _this.$nextTick(function () { 1321 | this.file2SizePosition(); 1322 | }); 1323 | }, 800); 1324 | }; 1325 | 1326 | if (_this.skipCrop) { 1327 | _this.uploadCanvas(); 1328 | } else { 1329 | if (_this.config.isSlice && _this.filRealitySize.width / _this.filRealitySize.height == _this.proportion.w / _this.proportion.h) { 1330 | var flag = window.confirm("文件已符合规定尺寸，是否直接使用？"); 1331 | 1332 | if (flag) { 1333 | _this.uploadCanvas(); 1334 | } else { 1335 | showView(); 1336 | } 1337 | } else { 1338 | showView(); 1339 | } 1340 | } 1341 | }; 1342 | }, 1343 | loadImg: function loadImg() { 1344 | var imgWidth = this.filRealitySize.width; 1345 | 1346 | if (imgWidth > this.config.size) { 1347 | imgWidth = this.config.size; 1348 | } 1349 | 1350 | var imgHeight = imgWidth * (this.filRealitySize.height / this.filRealitySize.width); // 解决兼容 ios 1351 | 1352 | var canvas = document.createElement("canvas"); 1353 | var ctx = canvas.getContext("2d"); 1354 | 1355 | switch (this.rotate) { 1356 | case 0: 1357 | canvas.setAttribute("width", imgWidth); 1358 | canvas.setAttribute("height", imgHeight); 1359 | ctx.drawImage(this.img, 0, 0, imgWidth, imgHeight); 1360 | break; 1361 | 1362 | case 1: 1363 | imgWidth += imgHeight; 1364 | imgHeight = imgWidth - imgHeight; 1365 | imgWidth = imgWidth - imgHeight; 1366 | canvas.setAttribute("width", imgWidth); 1367 | canvas.setAttribute("height", imgHeight); 1368 | ctx.translate(imgWidth, 0); 1369 | ctx.rotate(90 * Math.PI / 180); 1370 | ctx.drawImage(this.img, 0, 0, imgHeight, imgWidth); 1371 | break; 1372 | 1373 | case 2: 1374 | canvas.setAttribute("width", imgWidth); 1375 | canvas.setAttribute("height", imgHeight); 1376 | ctx.translate(imgWidth, imgHeight); 1377 | ctx.rotate(180 * Math.PI / 180); 1378 | ctx.drawImage(this.img, 0, 0, imgWidth, imgHeight); 1379 | break; 1380 | 1381 | case 3: 1382 | imgWidth += imgHeight; 1383 | imgHeight = imgWidth - imgHeight; 1384 | imgWidth = imgWidth - imgHeight; 1385 | canvas.setAttribute("width", imgWidth); 1386 | canvas.setAttribute("height", imgHeight); 1387 | ctx.translate(0, imgHeight); 1388 | ctx.rotate(270 * Math.PI / 180); 1389 | ctx.drawImage(this.img, 0, 0, imgHeight, imgWidth); 1390 | break; 1391 | } 1392 | 1393 | this.url = canvas.toDataURL(this.currentValue.origin.type, this.quality); 1394 | 1395 | if (imgWidth / imgHeight >= this.view.width / this.view.height) { 1396 | // 判断图片长宽比 1397 | var _fileSize = { 1398 | width: this.view.width, 1399 | height: imgHeight / imgWidth * this.view.width 1400 | }; 1401 | 1402 | if (_fileSize.height < this.viewBox.height) { 1403 | // 判断是否小于截取区 1404 | _fileSize.height = this.viewBox.height; 1405 | _fileSize.width = imgWidth / imgHeight * _fileSize.height; 1406 | } 1407 | 1408 | this.fileSize.width = _fileSize.width; 1409 | this.fileSize.height = _fileSize.height; 1410 | this.fileSize.left = 0; 1411 | this.fileSize.top = (this.view.height - this.fileSize.height) / 2; 1412 | } else { 1413 | var _fileSize2 = { 1414 | width: imgWidth / imgHeight * this.view.height, 1415 | height: this.view.height 1416 | }; 1417 | 1418 | if (_fileSize2.width < this.viewBox.width) { 1419 | _fileSize2.width = this.viewBox.width; 1420 | _fileSize2.height = imgHeight / imgWidth * _fileSize2.width; 1421 | } 1422 | 1423 | this.fileSize.height = _fileSize2.height; 1424 | this.fileSize.width = _fileSize2.width; 1425 | this.fileSize.top = 0; 1426 | this.fileSize.left = (this.view.width - this.fileSize.width) / 2; 1427 | } 1428 | 1429 | this.fileInitSize = { 1430 | width: this.fileSize.width, 1431 | height: this.fileSize.height 1432 | }; 1433 | this.fileSizePosition(); 1434 | }, 1435 | initViewSize: function initViewSize() { 1436 | this.view.width = document.documentElement.clientWidth; 1437 | this.view.height = document.documentElement.clientHeight; // 屏幕 1438 | 1439 | this.$refs.fileView.style.width = this.view.width + "px"; 1440 | this.$refs.fileView.style.height = this.view.height + "px"; // 主工作区 1441 | 1442 | this.$refs.imgView.style.width = this.view.width + "px"; 1443 | this.$refs.imgView.style.height = this.view.height + "px"; // 视图区 1444 | 1445 | if (this.view.width * this.initViewWidth * this.proportion.h / this.proportion.w < this.view.height * this.initViewWidth) { 1446 | // 判断宽高 1447 | this.viewBox = { 1448 | width: Math.floor(this.view.width * this.initViewWidth), 1449 | height: Math.floor(this.view.width * this.initViewWidth * this.proportion.h / this.proportion.w) 1450 | }; 1451 | } else { 1452 | this.viewBox = { 1453 | width: Math.floor(this.view.height * this.initViewWidth * this.proportion.w / this.proportion.h), 1454 | height: Math.floor(this.view.height * this.initViewWidth) 1455 | }; 1456 | } 1457 | 1458 | this.viewBox.left = Math.floor((this.view.width - this.viewBox.width) / 2); 1459 | this.viewBox.top = Math.floor((this.view.height - this.viewBox.height) / 2); 1460 | this.$refs.imgViewBox.style.width = this.viewBox.width + "px"; 1461 | this.$refs.imgViewBox.style.height = this.viewBox.height + "px"; 1462 | this.$refs.imgViewBox.style.top = this.viewBox.top + "px"; 1463 | this.$refs.imgViewBox.style.left = this.viewBox.left + "px"; 1464 | }, 1465 | fileSizePosition: function fileSizePosition() { 1466 | this.$refs.file.style.top = this.fileSize.top + "px"; 1467 | this.$refs.file.style.left = this.fileSize.left + "px"; 1468 | this.$refs.file.style.width = this.fileSize.width + "px"; 1469 | this.$refs.file.style.height = this.fileSize.height + "px"; 1470 | this.file2SizePosition(); 1471 | }, 1472 | file2SizePosition: function file2SizePosition() { 1473 | this.$refs.file2.style.top = this.$refs.file.offsetTop - (this.$refs.imgViewBox.offsetTop + this.borderWidth) + "px"; 1474 | this.$refs.file2.style.left = this.$refs.file.offsetLeft - (this.$refs.imgViewBox.offsetLeft + this.borderWidth) + "px"; 1475 | this.$refs.file2.style.width = this.$refs.file.offsetWidth + "px"; 1476 | this.$refs.file2.style.height = this.$refs.file.offsetHeight + "px"; 1477 | }, 1478 | setAttr: function setAttr(ele, attrs) { 1479 | // 暂未用到 1480 | if (!attrs && attrs.length < 1) { 1481 | return; 1482 | } // attrs.forEach((item, key)=>{ 1483 | // console.log(item); 1484 | // console.log(key); 1485 | // }); 1486 | 1487 | }, 1488 | checkPosition: function checkPosition() { 1489 | // 缩放移动校验 1490 | var sizeFlag = false; 1491 | 1492 | if (this.fileSize.top >= this.viewBox.top + this.borderWidth) { 1493 | // top 校验 1494 | this.fileSize.top = this.viewBox.top + this.borderWidth; 1495 | } else if (this.fileSize.top + this.fileSize.height <= this.viewBox.top + this.viewBox.height + this.borderWidth) { 1496 | this.fileSize.top = this.viewBox.top + this.viewBox.height - this.fileSize.height + this.borderWidth; 1497 | } 1498 | 1499 | if (this.fileSize.left >= this.viewBox.left + this.borderWidth) { 1500 | // left 校验 1501 | this.fileSize.left = this.viewBox.left + this.borderWidth; 1502 | } else if (this.fileSize.left + this.fileSize.width <= this.viewBox.left + this.viewBox.width + this.borderWidth) { 1503 | this.fileSize.left = this.viewBox.left + this.viewBox.width - this.fileSize.width + this.borderWidth; 1504 | } // 缩放大小校验 1505 | 1506 | 1507 | if (this.fileSize.width <= this.viewBox.width) { 1508 | // width 校验 1509 | this.fileSize.width = this.viewBox.width; 1510 | this.fileSize.height = this.fileInitSize.height / this.fileInitSize.width * this.fileSize.width; 1511 | } 1512 | 1513 | if (this.fileSize.height <= this.viewBox.height) { 1514 | this.fileSize.height = this.viewBox.height; 1515 | this.fileSize.width = this.fileInitSize.width / this.fileInitSize.height * this.fileSize.height; 1516 | } 1517 | 1518 | if (this.fileSize.width > this.fileInitSize.width * this.maxSize) { 1519 | this.fileSize.width = this.fileInitSize.width * this.maxSize; 1520 | this.fileSize.height = this.fileInitSize.height / this.fileInitSize.width * this.fileSize.width; 1521 | sizeFlag = true; 1522 | } 1523 | 1524 | if (this.fileSize.height > this.fileInitSize.height * this.maxSize) { 1525 | this.fileSize.height = this.fileInitSize.height * this.maxSize; 1526 | this.fileSize.width = this.fileInitSize.width / this.fileInitSize.height * this.fileSize.height; 1527 | sizeFlag = true; 1528 | } 1529 | 1530 | if (sizeFlag) { 1531 | this.fileSize.left = this.$refs.file.offsetLeft; // 阻止移动 1532 | 1533 | this.fileSize.top = this.$refs.file.offsetTop; 1534 | } 1535 | }, 1536 | move: function move(evt) { 1537 | if (this.top) { 1538 | this.fileSize.top = Math.floor(this.$refs.file.offsetTop + evt.touches[0].clientY - this.top); 1539 | this.fileSize.left = Math.floor(this.$refs.file.offsetLeft + evt.touches[0].clientX - this.left); 1540 | this.checkPosition(); 1541 | this.fileSizePosition(); 1542 | } 1543 | 1544 | this.top = evt.touches[0].clientY; 1545 | this.left = evt.touches[0].clientX; 1546 | }, 1547 | scale: function scale(evt) { 1548 | if (this.point1) { 1549 | var scale = this.distance(evt.touches); 1550 | var oldSize = { 1551 | width: this.fileSize.width, 1552 | height: this.fileSize.height 1553 | }; 1554 | var newSize = { 1555 | width: oldSize.width * scale, 1556 | height: oldSize.height * scale 1557 | }; 1558 | this.fileSize.width = newSize.width; 1559 | this.fileSize.height = newSize.height; 1560 | this.fileSize.left = this.$refs.file.offsetLeft - (newSize.width - oldSize.width) / 2; 1561 | this.fileSize.top = this.$refs.file.offsetTop - (newSize.height - oldSize.height) / 2; 1562 | this.checkPosition(); 1563 | this.fileSizePosition(); 1564 | } 1565 | 1566 | this.point1 = JSON.stringify(evt.touches[0]).length < 3 ? evt.touches[0] : JSON.parse(JSON.stringify(evt.touches[0])); 1567 | this.point2 = JSON.stringify(evt.touches[1]).length < 3 ? evt.touches[1] : JSON.parse(JSON.stringify(evt.touches[1])); 1568 | }, 1569 | distance: function distance(touches) { 1570 | var oldVal = Math.sqrt(Math.pow(touches[0].clientX - touches[1].clientX, 2) + Math.pow(touches[0].clientY - touches[1].clientY, 2)); 1571 | var newVal = Math.sqrt(Math.pow(this.point1.clientX - this.point2.clientX, 2) + Math.pow(this.point1.clientY - this.point2.clientY, 2)); 1572 | var scale = oldVal / newVal; 1573 | return scale; 1574 | }, 1575 | imgSizeScale: function imgSizeScale() { 1576 | var sizeScale; 1577 | 1578 | if (this.viewBox.width / this.$refs.file.offsetWidth * this.filRealitySize.width < this.config.size) { 1579 | sizeScale = Number((this.viewBox.width / this.$refs.file.offsetWidth * this.filRealitySize.width / this.viewBox.width).toFixed(15)); 1580 | } else { 1581 | sizeScale = this.config.size / this.viewBox.width; 1582 | } 1583 | 1584 | return sizeScale; 1585 | }, 1586 | setCanvas: function setCanvas() { 1587 | var canvas = document.createElement("canvas"); 1588 | var ctx = canvas.getContext("2d"); 1589 | var sizeScale = this.imgSizeScale(); // 固定大小宽度比值 1590 | 1591 | canvas.setAttribute("width", this.viewBox.width * sizeScale); 1592 | canvas.setAttribute("height", this.viewBox.height * sizeScale); 1593 | ctx.drawImage(this.$refs.file, (this.$refs.file.offsetLeft - this.viewBox.left - this.borderWidth) * sizeScale, (this.$refs.file.offsetTop - this.viewBox.top - this.borderWidth) * sizeScale, this.$refs.file.offsetWidth * sizeScale, this.$refs.file.offsetHeight * sizeScale); // let base64 = canvas.toDataURL(this.currentValue.origin.type, this.quality); 1594 | 1595 | var base64 = canvas.toDataURL("image/jpeg", this.quality); 1596 | this.$set(this.currentValue, "base64", base64); // this.currentValue.content = base64.split(',')[1]; 1597 | 1598 | this.currentValue.id = null; 1599 | this.$emit("submit", this.currentValue); 1600 | }, 1601 | uploadCanvas: function uploadCanvas() { 1602 | // 不裁剪，直接使用 1603 | var imgWidth = this.filRealitySize.width; 1604 | 1605 | if (imgWidth > this.config.size) { 1606 | imgWidth = this.config.size; 1607 | } 1608 | 1609 | var imgHeight = imgWidth * (this.filRealitySize.height / this.filRealitySize.width); 1610 | var canvas = document.createElement("canvas"); 1611 | var ctx = canvas.getContext("2d"); 1612 | canvas.setAttribute("width", imgWidth); 1613 | canvas.setAttribute("height", imgHeight); 1614 | ctx.drawImage(this.img, 0, 0, imgWidth, imgHeight); // let _base64 = canvas.toDataURL(this.currentValue.origin.type, this.quality); 1615 | 1616 | var base64 = canvas.toDataURL("image/jpeg", this.quality); 1617 | this.$set(this.currentValue, "base64", base64); // this.currentValue.content = base64.split(',')[1]; 1618 | 1619 | this.currentValue.id = null; 1620 | this.$emit("submit", this.currentValue); 1621 | }, 1622 | end: function end() { 1623 | this.top = null; 1624 | this.left = null; 1625 | this.point1 = null; 1626 | this.point2 = null; 1627 | }, 1628 | preventDefault: function preventDefault(e) { 1629 | e.preventDefault(); 1630 | }, 1631 | addEventDefault: function addEventDefault() { 1632 | document.addEventListener("touchmove", this.preventDefault, { 1633 | passive: false 1634 | }); 1635 | }, 1636 | removeEventDefault: function removeEventDefault() { 1637 | document.removeEventListener("touchmove", this.preventDefault, false); 1638 | }, 1639 | submitFile: function submitFile() { 1640 | this.state = 1; 1641 | this.$refs.path.value = null; // 重置选取文件 1642 | 1643 | this.setCanvas(); 1644 | }, 1645 | rotateChange: function rotateChange() { 1646 | this.rotate++; 1647 | this.rotate %= 4; 1648 | this.loadImg(); 1649 | }, 1650 | back: function back() { 1651 | this.state = 1; 1652 | this.$refs.path.value = null; // 重置选取文件 1653 | 1654 | this.$emit("cancel"); 1655 | } 1656 | }, 1657 | watch: { 1658 | state: function state(newVal) { 1659 | if (newVal === 2) { 1660 | this.addEventDefault(); 1661 | } else { 1662 | this.removeEventDefault(); 1663 | } 1664 | } 1665 | }, 1666 | computed: { 1667 | currentValue: { 1668 | get: function get() { 1669 | return this.value; 1670 | }, 1671 | set: function set(val) { 1672 | this.$emit("input", val); 1673 | } 1674 | } 1675 | }, 1676 | filters: { 1677 | fileSrc: function fileSrc(value) { 1678 | if (value) { 1679 | if (value.base64) { 1680 | return value.base64; 1681 | } else if (value.id) { 1682 | return this.config.path + value.id; 1683 | } else { 1684 | return ""; 1685 | } 1686 | } else { 1687 | return ""; 1688 | } 1689 | } 1690 | }, 1691 | directives: { 1692 | touch: { 1693 | bind: function bind(el, binding) { 1694 | /* 传入的模式 press swipeRight swipeLeft swipeTop swipeDowm Tap move end*/ 1695 | var touchType = binding.arg; 1696 | var timeOutEvent = 0; 1697 | var direction = ""; 1698 | /* 滑动处理 */ 1699 | 1700 | var startX, startY; 1701 | /* 返回角度 */ 1702 | 1703 | function GetSlideAngle(dx, dy) { 1704 | return Math.atan2(dy, dx) * 180 / Math.PI; 1705 | } 1706 | /* 根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动 */ 1707 | 1708 | 1709 | function GetSlideDirection(startX, startY, endX, endY) { 1710 | var dy = startY - endY; 1711 | var dx = endX - startX; 1712 | var result = 0; 1713 | /* 如果滑动距离太短 */ 1714 | 1715 | if (Math.abs(dx) < 2 && Math.abs(dy) < 2) { 1716 | return "tap"; 1717 | } 1718 | 1719 | var angle = GetSlideAngle(dx, dy); 1720 | 1721 | if (angle >= -45 && angle < 45) { 1722 | result = "swiperight"; 1723 | } else if (angle >= 45 && angle < 135) { 1724 | result = "swipeup"; 1725 | } else if (angle >= -135 && angle < -45) { 1726 | result = "swipedown"; 1727 | } else if (angle >= 135 && angle <= 180 || angle >= -180 && angle < -135) { 1728 | result = "swipeleft"; 1729 | } 1730 | 1731 | return result; 1732 | } 1733 | 1734 | el.addEventListener("touchstart", function (ev) { 1735 | startX = ev.touches[0].pageX; 1736 | startY = ev.touches[0].pageY; 1737 | /* 判断长按 */ 1738 | 1739 | timeOutEvent = setTimeout(function () { 1740 | timeOutEvent = 0; 1741 | 1742 | if (touchType === "press") { 1743 | binding.value(ev); 1744 | } 1745 | }, 500); 1746 | }, false); 1747 | el.addEventListener("touchmove", function (ev) { 1748 | clearTimeout(timeOutEvent); 1749 | timeOutEvent = 0; 1750 | 1751 | if (ev.touches.length === 1) { 1752 | if (touchType === "move") { 1753 | binding.value(ev); 1754 | } 1755 | } else if (event.touches.length === 2) { 1756 | if (touchType === "scale") { 1757 | binding.value(ev); 1758 | } 1759 | } 1760 | }); 1761 | el.addEventListener("touchend", function (ev) { 1762 | var endX, endY; 1763 | endX = ev.changedTouches[0].pageX; 1764 | endY = ev.changedTouches[0].pageY; 1765 | direction = GetSlideDirection(startX, startY, endX, endY); 1766 | clearTimeout(timeOutEvent); 1767 | 1768 | if (touchType === "end") { 1769 | binding.value(ev); 1770 | } 1771 | 1772 | switch (direction) { 1773 | case 0: 1774 | break; 1775 | 1776 | case "tap": 1777 | if (touchType === "tap") { 1778 | binding.value(ev); 1779 | } 1780 | 1781 | break; 1782 | 1783 | case "swipeup": 1784 | if (touchType === "swipeup") { 1785 | binding.value(ev); 1786 | } 1787 | 1788 | break; 1789 | 1790 | case "swipedown": 1791 | if (touchType === "swipedown") { 1792 | binding.value(ev); 1793 | } 1794 | 1795 | break; 1796 | 1797 | case "swipeleft": 1798 | if (touchType === "swipeleft") { 1799 | binding.value(ev); 1800 | } 1801 | 1802 | break; 1803 | 1804 | case "swiperight": 1805 | if (touchType === "swiperight") { 1806 | binding.value(ev); 1807 | } 1808 | 1809 | break; 1810 | 1811 | default: 1812 | break; 1813 | } 1814 | }, false); 1815 | } 1816 | } 1817 | } 1818 | }); 1819 | // CONCATENATED MODULE: ./src/m-image-crop.vue?vue&type=script&lang=js& 1820 | /* harmony default export */ var src_m_image_cropvue_type_script_lang_js_ = (m_image_cropvue_type_script_lang_js_); 1821 | // EXTERNAL MODULE: ./src/m-image-crop.vue?vue&type=style&index=0&lang=less& 1822 | var m_image_cropvue_type_style_index_0_lang_less_ = __webpack_require__("0b10"); 1823 | 1824 | // CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js 1825 | /* globals __VUE_SSR_CONTEXT__ */ 1826 | 1827 | // IMPORTANT: Do NOT use ES2015 features in this file (except for modules). 1828 | // This module is a runtime utility for cleaner component module output and will 1829 | // be included in the final webpack user bundle. 1830 | 1831 | function normalizeComponent ( 1832 | scriptExports, 1833 | render, 1834 | staticRenderFns, 1835 | functionalTemplate, 1836 | injectStyles, 1837 | scopeId, 1838 | moduleIdentifier, /* server only */ 1839 | shadowMode /* vue-cli only */ 1840 | ) { 1841 | // Vue.extend constructor export interop 1842 | var options = typeof scriptExports === 'function' 1843 | ? scriptExports.options 1844 | : scriptExports 1845 | 1846 | // render functions 1847 | if (render) { 1848 | options.render = render 1849 | options.staticRenderFns = staticRenderFns 1850 | options._compiled = true 1851 | } 1852 | 1853 | // functional template 1854 | if (functionalTemplate) { 1855 | options.functional = true 1856 | } 1857 | 1858 | // scopedId 1859 | if (scopeId) { 1860 | options._scopeId = 'data-v-' + scopeId 1861 | } 1862 | 1863 | var hook 1864 | if (moduleIdentifier) { // server build 1865 | hook = function (context) { 1866 | // 2.3 injection 1867 | context = 1868 | context || // cached call 1869 | (this.$vnode && this.$vnode.ssrContext) || // stateful 1870 | (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional 1871 | // 2.2 with runInNewContext: true 1872 | if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { 1873 | context = __VUE_SSR_CONTEXT__ 1874 | } 1875 | // inject component styles 1876 | if (injectStyles) { 1877 | injectStyles.call(this, context) 1878 | } 1879 | // register component module identifier for async chunk inferrence 1880 | if (context && context._registeredComponents) { 1881 | context._registeredComponents.add(moduleIdentifier) 1882 | } 1883 | } 1884 | // used by ssr in case component is cached and beforeCreate 1885 | // never gets called 1886 | options._ssrRegister = hook 1887 | } else if (injectStyles) { 1888 | hook = shadowMode 1889 | ? function () { injectStyles.call(this, this.$root.$options.shadowRoot) } 1890 | : injectStyles 1891 | } 1892 | 1893 | if (hook) { 1894 | if (options.functional) { 1895 | // for template-only hot-reload because in that case the render fn doesn't 1896 | // go through the normalizer 1897 | options._injectStyles = hook 1898 | // register for functioal component in vue file 1899 | var originalRender = options.render 1900 | options.render = function renderWithStyleInjection (h, context) { 1901 | hook.call(context) 1902 | return originalRender(h, context) 1903 | } 1904 | } else { 1905 | // inject component registration as beforeCreate hook 1906 | var existing = options.beforeCreate 1907 | options.beforeCreate = existing 1908 | ? [].concat(existing, hook) 1909 | : [hook] 1910 | } 1911 | } 1912 | 1913 | return { 1914 | exports: scriptExports, 1915 | options: options 1916 | } 1917 | } 1918 | 1919 | // CONCATENATED MODULE: ./src/m-image-crop.vue 1920 | 1921 | 1922 | 1923 | 1924 | 1925 | 1926 | /* normalize component */ 1927 | 1928 | var component = normalizeComponent( 1929 | src_m_image_cropvue_type_script_lang_js_, 1930 | render, 1931 | staticRenderFns, 1932 | false, 1933 | null, 1934 | null, 1935 | null 1936 | 1937 | ) 1938 | 1939 | component.options.__file = "m-image-crop.vue" 1940 | /* harmony default export */ var m_image_crop = (component.exports); 1941 | // CONCATENATED MODULE: ./src/index.js 1942 | 1943 | 1944 | 1945 | m_image_crop.install = function (Vue) { 1946 | if (m_image_crop.installed) return; 1947 | m_image_crop.installed = true; 1948 | Vue.component(m_image_crop.name, m_image_crop); 1949 | }; 1950 | 1951 | if (window.Vue) { 1952 | m_image_crop.install(window.Vue); 1953 | } 1954 | 1955 | /* harmony default export */ var src = (m_image_crop); 1956 | // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js 1957 | 1958 | 1959 | /* harmony default export */ var entry_lib = __webpack_exports__["default"] = (src); 1960 | 1961 | 1962 | 1963 | /***/ }), 1964 | 1965 | /***/ "fdef": 1966 | /***/ (function(module, exports) { 1967 | 1968 | module.exports = '\x09\x0A\x0B\x0C\x0D\x20\xA0\u1680\u180E\u2000\u2001\u2002\u2003' + 1969 | '\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028\u2029\uFEFF'; 1970 | 1971 | 1972 | /***/ }) 1973 | 1974 | /******/ }); 1975 | }); 1976 | //# sourceMappingURL=vue-image-crop.umd.js.map --------------------------------------------------------------------------------