├── .DS_Store
├── .gitignore
├── README.md
├── _config.yml
├── dist
    └── vue-pic-clip.min.js
├── docs
    ├── example.bundle.js
    ├── img
    │   ├── 1.aca4e29.jpg
    │   └── 2.9e7170f.jpg
    ├── index.html
    └── main.bundle.js
├── example
    ├── app.vue
    ├── home.vue
    ├── img
    │   ├── 1.jpg
    │   └── 2.jpg
    ├── main.js
    ├── router
    │   └── index.js
    ├── upload.vue
    ├── upload2.vue
    └── upload3.vue
├── index.html
├── package-lock.json
├── package.json
├── src
    ├── index.js
    └── vue-clip.vue
├── webpack.config.js
└── webpack.prod.conf.js


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tianyazz/vue-pic-clip/ddc4eed672bc0c0d87a9cb88ef79191993c5742d/.DS_Store


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | npm-debug.log
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## vue-pic-clip
 2 | ### 一个简单的移动端裁剪图片上传插件
 3 | 
 4 | [预览demo](https://tianyazz.github.io/vue-pic-clip/docs/#/).
 5 | 
 6 | ```markdown
 7 | 
 8 | ### 安装 Install
 9 | npm install vue-pic-clip -D
10 | 
11 | // 组件内使用
12 | import { VueClip }  from 'vue-pic-clip'
13 | components: {
14 |   VueClip,
15 | },
16 | 
17 | // main.js里面使用
18 | import VueClip from 'vue-pic-clip'
19 | 
20 | Vue.use(VueClip)
21 | 
22 | ```
23 | ```markdown
24 | <vue-clip
25 |   :img=""
26 |   :autoClip="option.autoClip"
27 |   :outputSize="option.outputSize"
28 |   @finish="finish"
29 | >上传头像</vue-clip>
30 | 
31 | ```
32 | 
33 | *****
34 | ### 配置参数
35 | 
36 | 名称|功能|默认值|可选值
37 | ---|:--:|:--:|---:
38 | img|默认图片地址|空|url地址||base64||blob
39 | accept|上传图片类型|'image/png, image/jpeg, image/jpg, image/gif'|jpeg||png||gif等
40 | autoClip|是否生成截图框|false|ture||false
41 | autoClipWidth|截图框的宽度|容器宽度80%|0~容器宽度
42 | autoClipHeight|截图框的高度|与宽度相等|0~容器宽度
43 | canMove|图片能否拖动|true|true||fasle
44 | canMoveBox|截图框能否拖动|ture|ture||false
45 | dataUrlType|输出图片数据类型|blob|base64||blob
46 | fixed|截图框是否开启固定宽高比|false|true||false(若设置的宽高比例与宽高比不匹配，则按照宽高比计算高度)
47 | fixedNumber|截图框宽高比|[1,1]|[宽度，高度]
48 | fixedBox|固定截图框大小|false|true||false
49 | isOriginalImg|是否上传原图|false|true||false（启用裁剪时无效）
50 | maxWidth|生成图片的最大宽度|600|0~max(启用裁剪或上传原图时最大宽度无效)
51 | maxHeight|生成图片的最大高度|600|0~max(同上)
52 | outputSize|输出图片压缩比|1|0.1-1
53 | outputType|生成图片的格式|jpeg|jpeg||png||webp
54 | theme|样式风格|rect|rect||circle
55 | finish|完成操作事件||回调函数
56 | ****
57 | 
58 | 主要研究[vue-cropper](https://github.com/xyxiao001/vue-cropper)的源码开发学习。一直使用这个插件做项目，最近比较闲，就撸了一个更简单的适合我自己用的插件。没有大量真机测试过，有什么问题，欢迎大家提Issues给我。
59 | 
60 | ### 写个插件玩玩，给个star，多多支持，谢谢
61 | 
62 | ### Thanks to
63 | - [JS中图片压缩的方法小结](https://www.jb51.net/article/128189.htm)
64 | - [vue-cropper](https://github.com/xyxiao001/vue-cropper)
65 | - [js获取图片EXIF, 解决图片旋转](https://www.cnblogs.com/suyuanli/p/8168407.html)
66 | 


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-architect


--------------------------------------------------------------------------------
/dist/vue-pic-clip.min.js:
--------------------------------------------------------------------------------
1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("Vue-pic-clip",[],e):"object"==typeof exports?exports["Vue-pic-clip"]=e():t["Vue-pic-clip"]=e()}(window,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=6)}([function(t,e,i){var n=i(2);"string"==typeof n&&(n=[[t.i,n,""]]);var o={hmr:!0,transform:void 0,insertInto:void 0};i(4)(n,o);n.locals&&(t.exports=n.locals)},function(t,e,i){"use strict";var n=i(0);i.n(n).a},function(t,e,i){(t.exports=i(3)(!1)).push([t.i,"\n@font-face {\n  font-family: 'iconfont';  /* project id 953300 */\n  src: url('//at.alicdn.com/t/font_953300_clegio409me.eot');\n  src: url('//at.alicdn.com/t/font_953300_clegio409me.eot?#iefix') format('embedded-opentype'),\n  url('//at.alicdn.com/t/font_953300_clegio409me.woff') format('woff'),\n  url('//at.alicdn.com/t/font_953300_clegio409me.ttf') format('truetype'),\n  url('//at.alicdn.com/t/font_953300_clegio409me.svg#iconfont') format('svg');\n}\n.clip[data-v-29874490] {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.clip .icon[data-v-29874490],\n.clip > input[data-v-29874490] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 10;\n}\n.clip .picture[data-v-29874490] {\n  display: -webkit-flex;\n  display: flex;\n  -webkit-align-items: center;\n  align-items: center;\n  -webkit-justify-content: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 20;\n}\n.clip .picture img[data-v-29874490] {\n  max-width: 100%;\n  max-height: 100%;\n}\n.clip > input[data-v-29874490] {\n  width: 100%;\n  opacity: 0;\n  z-index: 30;\n}\n.clip .icon[data-v-29874490] {\n  text-align: center;\n  border: 2px solid rgba(0, 0, 0, .1);\n}\n.clip .icon i[data-v-29874490] {\n  display: -webkit-flex;\n  display: flex;\n  -webkit-align-items: center;\n  align-items: center;\n  -webkit-justify-content: center;\n  justify-content: center;\n  height: 100%;\n}\n.clip .icon i[data-v-29874490]:before {\n  content: \"\\E641\";\n  display: block;\n  font-size: 30px;\n  font-family: \"iconfont\";\n  line-height: 100%;\n  color: rgba(0, 0, 0, .1);\n}\n.clip .msg[data-v-29874490] {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 30;\n  padding: 5px 20px;\n  border-radius: 5px;\n  -webkit-border-radius: 5px;\n  transform: translate(-50%, -50%);\n  -webkit-transform:  translate(-50%, -50%);\n  color: #fff;\n  text-align: center;\n  background: rgba(0, 0, 0, .7);\n}\n.rect .icon i[data-v-29874490] {\n  height: 80%;\n}\n.rect .icon i[data-v-29874490]:before {\n  content: \"\\E641\";\n  line-height: 42px;\n}\n.rect p[data-v-29874490] {\n  margin-top: -8px;\n  font-size: 12px;\n  color: #666;\n  text-align: center;\n}\n.circle .icon[data-v-29874490],\n.circle .picture[data-v-29874490] {\n  border-radius: 50%;\n  -webkit-border-radius: 50%;\n}\n.circle .picture[data-v-29874490] {\n  overflow: hidden;\n}\n.circle .icon i[data-v-29874490]:before {\n  content: \"\\E6DA\";\n  font-size: 30px;\n}\n.popup[data-v-29874490] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 20181211;\n  background: rgba(0, 0, 0, .7);\n}\n.popup .button[data-v-29874490] {\n  display: -webkit-flex;\n  display: flex;\n  -webkit-align-items: center;\n  align-items: center;\n  -webkit-justify-content: center;\n  justify-content: center;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  z-index: 20;\n  width: 100%;\n  height: 48px;\n  text-align: center;\n  background: rgba(255, 255, 255, 1);\n}\n.popup button[data-v-29874490] {\n  -webkit-tap-highlight-color: transparent;\n  outline: none;\n  display: inline-block;\n  width: 40%;\n  height: 38px;\n  margin: 0 5%;\n  border: 0;\n  border-radius: 5px;\n  color: #fff;\n  background: rgba(50, 135, 255, .7);\n}\n.clip-popup[data-v-29874490] {\n  background: none;\n}\n.clip-popup .clip-box[data-v-29874490],\n.clip-popup .clip-move[data-v-29874490],\n.clip-popup .popup-move[data-v-29874490] {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n.clip-popup .popup-move[data-v-29874490] {\n  background: rgba(0, 0, 0, .5);\n  z-index: 18;\n}\n.clip-popup .clip-box[data-v-29874490] {\n  z-index: 20;\n}\n.clip-popup .clip-view[data-v-29874490] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  outline: 1px solid rgba(50, 135, 255, 1.0);\n}\n.clip-popup .clip-move[data-v-29874490] {\n  background: rgba(255, 255, 255, .1);\n  z-index: 21;\n}\n.clip-popup .clip-info[data-v-29874490] {\n  display: block;\n  position: absolute;\n  top: -26px;\n  left: 12px;\n  width: 112px;\n  height: 25px;\n  padding: 2px 5px;\n  background: rgba(0, 0, 0, .8);\n  color: #fff;\n}\n.clip-popup .clip-line[data-v-29874490] {\n  position: absolute;\n  display: block;\n  width: 100%;\n  height: 100%;\n  z-index: 25;\n}\n.clip-popup .line-t[data-v-29874490] {\n  top: -5px;\n  height: 10px;\n}\n.clip-popup .line-r[data-v-29874490] {\n  top: 0;\n  right: -5px;\n  width: 10px;\n}\n.clip-popup .line-b[data-v-29874490] {\n  bottom: -5px;\n  height: 10px;\n}\n.clip-popup .line-l[data-v-29874490] {\n  top: 0;\n  left: -5px;\n  width: 10px;\n}\n.clip-popup .clip-point[data-v-29874490] {\n  position: absolute;\n  display: block;\n  width: 16px;\n  height: 16px;\n  z-index: 26;\n}\n.clip-popup .point-tr[data-v-29874490] {\n  top: -3px;\n  right: -3px;\n  border-top: 3px solid rgba(50, 135, 255, 1.0);\n  border-right: 3px solid rgba(50, 135, 255, 1.0);\n}\n.clip-popup .point-br[data-v-29874490] {\n  bottom: -3px;\n  right: -3px;\n  border-right: 3px solid rgba(50, 135, 255, 1.0);\n  border-bottom: 3px solid rgba(50, 135, 255, 1.0);\n}\n.clip-popup .point-tl[data-v-29874490] {\n  top: -3px;\n  left: -3px;\n  border-top: 3px solid rgba(50, 135, 255, 1.0);\n  border-left: 3px solid rgba(50, 135, 255, 1.0);\n}\n.clip-popup .point-bl[data-v-29874490] {\n  bottom: -3px;\n  left: -3px;\n  border-bottom: 3px solid rgba(50, 135, 255, 1.0);\n  border-left: 3px solid rgba(50, 135, 255, 1.0);\n}\n.clip-popup .range[data-v-29874490] {\n  display: -webkit-flex;\n  display: flex;\n  -webkit-align-items: center;\n  align-items: center;\n  -webkit-justify-content: center;\n  justify-content: center;\n  position: absolute;\n  bottom: 48px;\n  left: 0;\n  z-index: 30;\n  width: 100%;\n  height: 30px;\n  padding: 0 50px;\n}\n.clip-popup .range input[type=\"range\"][data-v-29874490] {\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n  flex: 1;\n  display: block;\n  margin: 0 20px;\n  height: 3px;\n  border-radius: 2px;\n  background: rgba(255, 255, 255, .8);\n  -webkit-appearance: none;\n}\n.clip-popup .range input[type=range][data-v-29874490]::-webkit-slider-thumb {\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  border: none;\n  box-shadow: 0px 0px 3px rgba(255, 255, 255, 1.0);\n  background: rgba(50, 135, 255, 1.0);\n  -webkit-appearance: none;\n}\n.clip-popup .range span[data-v-29874490] {\n  color: #fff;\n}\n/* 弹框切换放大渐变 */\n.opacity-enter-active[data-v-29874490],\n.opacity-leave-active[data-v-29874490] {\n  -webkit-transition:  all .3s;\n  transition: all .3s;\n}\n.opacity-enter[data-v-29874490],\n.opacity-leave-to[data-v-29874490] {\n  opacity: 0;\n}\n",""])},function(t,e){t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var i=function(t,e){var i=t[1]||"",n=t[3];if(!n)return i;if(e&&"function"==typeof btoa){var o=(s=n,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(s))))+" */"),a=n.sources.map(function(t){return"/*# sourceURL="+n.sourceRoot+t+" */"});return[i].concat(a).concat([o]).join("\n")}var s;return[i].join("\n")}(e,t);return e[2]?"@media "+e[2]+"{"+i+"}":i}).join("")},e.i=function(t,i){"string"==typeof t&&(t=[[null,t,""]]);for(var n={},o=0;o<this.length;o++){var a=this[o][0];"number"==typeof a&&(n[a]=!0)}for(o=0;o<t.length;o++){var s=t[o];"number"==typeof s[0]&&n[s[0]]||(i&&!s[2]?s[2]=i:i&&(s[2]="("+s[2]+") and ("+i+")"),e.push(s))}},e}},function(t,e,i){var n,o,a={},s=(n=function(){return window&&document&&document.all&&!window.atob},function(){return void 0===o&&(o=n.apply(this,arguments)),o}),r=function(t){var e={};return function(t,i){if("function"==typeof t)return t();if(void 0===e[t]){var n=function(t,e){return e?e.querySelector(t):document.querySelector(t)}.call(this,t,i);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(t){n=null}e[t]=n}return e[t]}}(),c=null,l=0,p=[],h=i(5);function u(t,e){for(var i=0;i<t.length;i++){var n=t[i],o=a[n.id];if(o){o.refs++;for(var s=0;s<o.parts.length;s++)o.parts[s](n.parts[s]);for(;s<n.parts.length;s++)o.parts.push(b(n.parts[s],e))}else{var r=[];for(s=0;s<n.parts.length;s++)r.push(b(n.parts[s],e));a[n.id]={id:n.id,refs:1,parts:r}}}}function d(t,e){for(var i=[],n={},o=0;o<t.length;o++){var a=t[o],s=e.base?a[0]+e.base:a[0],r={css:a[1],media:a[2],sourceMap:a[3]};n[s]?n[s].parts.push(r):i.push(n[s]={id:s,parts:[r]})}return i}function f(t,e){var i=r(t.insertInto);if(!i)throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");var n=p[p.length-1];if("top"===t.insertAt)n?n.nextSibling?i.insertBefore(e,n.nextSibling):i.appendChild(e):i.insertBefore(e,i.firstChild),p.push(e);else if("bottom"===t.insertAt)i.appendChild(e);else{if("object"!=typeof t.insertAt||!t.insertAt.before)throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n");var o=r(t.insertAt.before,i);i.insertBefore(e,o)}}function g(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t);var e=p.indexOf(t);e>=0&&p.splice(e,1)}function m(t){var e=document.createElement("style");if(void 0===t.attrs.type&&(t.attrs.type="text/css"),void 0===t.attrs.nonce){var n=function(){0;return i.nc}();n&&(t.attrs.nonce=n)}return v(e,t.attrs),f(t,e),e}function v(t,e){Object.keys(e).forEach(function(i){t.setAttribute(i,e[i])})}function b(t,e){var i,n,o,a;if(e.transform&&t.css){if(!(a="function"==typeof e.transform?e.transform(t.css):e.transform.default(t.css)))return function(){};t.css=a}if(e.singleton){var s=l++;i=c||(c=m(e)),n=y.bind(null,i,s,!1),o=y.bind(null,i,s,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(i=function(t){var e=document.createElement("link");return void 0===t.attrs.type&&(t.attrs.type="text/css"),t.attrs.rel="stylesheet",v(e,t.attrs),f(t,e),e}(e),n=function(t,e,i){var n=i.css,o=i.sourceMap,a=void 0===e.convertToAbsoluteUrls&&o;(e.convertToAbsoluteUrls||a)&&(n=h(n));o&&(n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");var s=new Blob([n],{type:"text/css"}),r=t.href;t.href=URL.createObjectURL(s),r&&URL.revokeObjectURL(r)}.bind(null,i,e),o=function(){g(i),i.href&&URL.revokeObjectURL(i.href)}):(i=m(e),n=function(t,e){var i=e.css,n=e.media;n&&t.setAttribute("media",n);if(t.styleSheet)t.styleSheet.cssText=i;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(i))}}.bind(null,i),o=function(){g(i)});return n(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;n(t=e)}else o()}}t.exports=function(t,e){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(e=e||{}).attrs="object"==typeof e.attrs?e.attrs:{},e.singleton||"boolean"==typeof e.singleton||(e.singleton=s()),e.insertInto||(e.insertInto="head"),e.insertAt||(e.insertAt="bottom");var i=d(t,e);return u(i,e),function(t){for(var n=[],o=0;o<i.length;o++){var s=i[o];(r=a[s.id]).refs--,n.push(r)}t&&u(d(t,e),e);for(o=0;o<n.length;o++){var r;if(0===(r=n[o]).refs){for(var c=0;c<r.parts.length;c++)r.parts[c]();delete a[r.id]}}}};var x,w=(x=[],function(t,e){return x[t]=e,x.filter(Boolean).join("\n")});function y(t,e,i,n){var o=i?"":n.css;if(t.styleSheet)t.styleSheet.cssText=w(e,o);else{var a=document.createTextNode(o),s=t.childNodes;s[e]&&t.removeChild(s[e]),s.length?t.insertBefore(a,s[e]):t.appendChild(a)}}},function(t,e){t.exports=function(t){var e="undefined"!=typeof window&&window.location;if(!e)throw new Error("fixUrls requires window.location");if(!t||"string"!=typeof t)return t;var i=e.protocol+"//"+e.host,n=i+e.pathname.replace(/\/[^\/]*$/,"/");return t.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,function(t,e){var o,a=e.trim().replace(/^"(.*)"$/,function(t,e){return e}).replace(/^'(.*)'$/,function(t,e){return e});return/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(a)?t:(o=0===a.indexOf("//")?a:0===a.indexOf("/")?i+a:n+a.replace(/^\.\//,""),"url("+JSON.stringify(o)+")")})}},function(t,e,i){"use strict";i.r(e);var n=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{class:["clip",t.theme]},[i("div",{staticClass:"icon"},[i("i",{directives:[{name:"show",rawName:"v-show",value:""===t.imgUrl,expression:"imgUrl === ''"}]}),t._v(" "),i("p",{directives:[{name:"show",rawName:"v-show",value:""===t.imgUrl,expression:"imgUrl === ''"}]},[t._t("default")],2)]),t._v(" "),""!==t.imgUrl?i("div",{staticClass:"picture"},[i("img",{attrs:{src:t.imgUrl}})]):t._e(),t._v(" "),i("input",{ref:"uploadImg",attrs:{type:"file",accept:t.accept},on:{change:function(e){t.getImg(e)}}}),t._v(" "),i("transition",{attrs:{name:"opacity"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.showPopup,expression:"showPopup"}],class:["popup",{"clip-popup":t.autoClip}]},[i("img",{ref:"image",attrs:{src:t.clipImg,alt:""}}),t._v(" "),t.autoClip?i("div",{staticClass:"popup-move",on:{mousedown:t.startMove,touchstart:function(e){return e.preventDefault(),t.startMove(e)}}}):t._e(),t._v(" "),t.autoClip?i("div",{ref:"clipBox",staticClass:"clip-box"},[i("span",{staticClass:"clip-view"},[i("img",{ref:"clipImage",attrs:{src:t.clipImg,alt:""}})]),t._v(" "),i("span",{staticClass:"clip-move",on:{mousedown:t.clipMove,touchstart:function(e){return e.preventDefault(),t.clipMove(e)}}}),t._v(" "),i("span",{staticClass:"clip-info",domProps:{textContent:t._s(t.clipSizeValue)}}),t._v(" "),t.fixedBox?t._e():i("span",[i("i",{staticClass:"clip-line line-t",on:{mousedown:function(e){t.changeClipSize(e,!1,!0,0,1)},touchstart:function(e){e.preventDefault(),t.changeClipSize(e,!1,!0,0,1)}}}),t._v(" "),i("i",{staticClass:"clip-line line-r",on:{mousedown:function(e){t.changeClipSize(e,!0,!1,2,0)},touchstart:function(e){e.preventDefault(),t.changeClipSize(e,!0,!1,2,0)}}}),t._v(" "),i("i",{staticClass:"clip-line line-b",on:{mousedown:function(e){t.changeClipSize(e,!1,!0,0,2)},touchstart:function(e){e.preventDefault(),t.changeClipSize(e,!1,!0,0,2)}}}),t._v(" "),i("i",{staticClass:"clip-line line-l",on:{mousedown:function(e){t.changeClipSize(e,!0,!1,1,0)},touchstart:function(e){e.preventDefault(),t.changeClipSize(e,!0,!1,1,0)}}}),t._v(" "),i("i",{staticClass:"clip-point point-tr",on:{mousedown:function(e){t.changeClipSize(e,!0,!0,2,1)},touchstart:function(e){e.preventDefault(),t.changeClipSize(e,!0,!0,2,1)}}}),t._v(" "),i("i",{staticClass:"clip-point point-br",on:{mousedown:function(e){t.changeClipSize(e,!0,!0,2,2)},touchstart:function(e){e.preventDefault(),t.changeClipSize(e,!0,!0,2,2)}}}),t._v(" "),i("i",{staticClass:"clip-point point-bl",on:{mousedown:function(e){t.changeClipSize(e,!0,!0,1,2)},touchstart:function(e){e.preventDefault(),t.changeClipSize(e,!0,!0,1,2)}}}),t._v(" "),i("i",{staticClass:"clip-point point-tl",on:{mousedown:function(e){t.changeClipSize(e,!0,!0,1,1)},touchstart:function(e){e.preventDefault(),t.changeClipSize(e,!0,!0,1,1)}}})])]):t._e(),t._v(" "),t.autoClip?i("div",{staticClass:"range"},[i("span",[t._v("0%")]),t._v(" "),i("input",{directives:[{name:"model",rawName:"v-model",value:t.imgScaleVal,expression:"imgScaleVal"}],attrs:{type:"range",min:"0",max:"100"},domProps:{value:t.imgScaleVal},on:{input:function(e){t.imageScale(e)},__r:function(e){t.imgScaleVal=e.target.value}}}),t._v(" "),i("span",[t._v("100%")])]):t._e(),t._v(" "),i("div",{staticClass:"button"},[i("button",{on:{click:t.cancel}},[t._v("取消")]),t._v(" "),i("button",{on:{click:t.finish}},[t._v("完成")])])])]),t._v(" "),i("transition",{attrs:{name:"opacity"}},[i("span",{directives:[{name:"show",rawName:"v-show",value:t.msgStatus,expression:"msgStatus"}],staticClass:"msg",domProps:{textContent:t._s(t.msg)}})])],1)};n._withStripped=!0;var o=function(t,e){for(var i in e)t[i]=e[i];return t},a={name:"VueClip",data:function(){return{screenWidth:document.documentElement.clientWidth,screenHeight:document.documentElement.clientHeight-48,imgUrl:this.img,imgName:"",image:"",clipImg:"",showPopup:!1,imgScaleVal:0,moveX:0,moveY:0,clipWidth:0,clipHeight:0,clipMoveX:0,clipMoveY:0,clipOldX:0,clipOldY:0,canChangeX:!1,canChangeY:!1,changeClipTypeX:1,changeClipTypeY:1,imgSize:{x:0,y:0,w:0,h:0,s:1},boxSize:{x:0,y:0,w:0,h:0,s:1},msg:"",msgStatus:!1,msgTimer:null}},props:{accept:{type:String,default:"image/png, image/jpeg, image/jpg, image/gif"},autoClip:{type:Boolean,default:!1},autoClipWidth:{type:Number,default:0},autoClipHeight:{type:Number,default:0},canMove:{type:Boolean,default:!0},canMoveBox:{type:Boolean,default:!0},dataUrlType:{type:String,default:"blob"},fixed:{type:Boolean,default:!1},fixedNumber:{type:Array,default:function(){return[1,1]}},fixedBox:{type:Boolean,default:!1},img:{type:[String,Blob,null,File],default:""},isOriginalImg:{type:Boolean,default:!1},maxWidth:{type:Number,default:600},maxHeight:{type:Number,default:600},outputSize:{type:Number,default:1},outputType:{type:String,default:"jpeg"},theme:{type:String,default:"rect"}},computed:{clipSizeValue:function(){var t=0===this.boxSize.w?(.8*this.screenWidth).toFixed(0):this.boxSize.w,e=0===this.boxSize.h?(.8*this.screenWidth).toFixed(0):this.boxSize.h;return"".concat(t," x ").concat(e,"  ").concat(this.imgScaleVal,"%")},pictureType:function(){return this.accept.split(",").map(function(t){return t.split("/")[1]})}},methods:{filetoDataURL:function(t,e){var i=new FileReader;i.onload=function(t){e(t.target.result)},i.readAsDataURL(t)},dataURLtoImage:function(t){return new Promise(function(e){var i=new Image;i.onload=function(){e(i)},i.src=t})},canvasResizetoFile:function(t,e){t.toBlob(function(t){e(t)},"image/".concat(this.outputType),this.outputSize)},canvasResizetoDataURL:function(t){return t.toDataURL("image/".concat(this.outputType),this.outputSize)},imagetoCanvas:function(t,e,i,n,o,a,s){var r=document.createElement("canvas"),c=r.getContext("2d"),l=a||t.width,p=s||t.height;return r.width=l,r.height=p,c.drawImage(t,e,i,n,o,0,0,l,p),r},getImg:function(t){var e=this,i=t.target.files||t.dataTransfer.files;if(0===i.length)return!1;var n=i[0];if(this.imgName=n.name,!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(t.target.value))return this.msg="图片类型必须是".concat(this.pictureType.join("、"),"中的一种"),this.msgStatus=!0,clearTimeout(this.msgTimer),this.msgTimer=setTimeout(function(){e.msgStatus=!1,clearTimeout(e.msgTimer)},1500),!1;n&&this.fileToPreviewImage(n)},fileToPreviewImage:function(t){var e=this;this.filetoDataURL(t,function(t){e.isRotate(t).then(function(t){e.clipImg=t,e.dataURLtoImage(t).then(function(t){e.image=t;var i=e.resizeSizeImg(t,e.screenWidth,e.screenHeight);o(e.imgSize,i),e.$nextTick(function(){e.imgScaleVal=(100*e.imgSize.s).toFixed(0),e.toClipPopup(t),e.showPopup=!0})})})})},isRotate:function(t){var e=this;return new Promise(function(i){var n=e.getOrientation(t)||1;n&&1!==n?e.dataURLtoImage(t).then(function(t){var o=document.createElement("canvas"),a=o.getContext("2d"),s=0,r=0;switch(a.save(),n){case 3:o.width=t.width,o.height=t.height,a.rotate(Math.PI),s=-t.width,r=-t.height;break;case 6:o.width=t.height,o.height=t.width,a.rotate(90*Math.PI/180),r=-t.height;break;case 8:o.width=t.height,o.height=t.width,a.rotate(-90*Math.PI/180),s=-t.width;break;default:o.width=t.width,o.height=t.height}a.drawImage(t,s,r),a.restore(),i(e.canvasResizetoDataURL(o))}):i(t)})},base64ToArrayBuffer:function(t){t=t.replace(/^data\:([^\;]+)\;base64,/gim,"");for(var e=atob(t),i=e.length,n=new ArrayBuffer(i),o=new Uint8Array(n),a=0;a<i;a++)o[a]=e.charCodeAt(a);return n},getStringFromCharCode:function(t,e,i){var n,o="";for(n=e,i+=e;n<i;n++)o+=String.fromCharCode(t.getUint8(n));return o},getOrientation:function(t){var e,i,n,o,a,s,r,c,l,p,h=this.base64ToArrayBuffer(t),u=new DataView(h),d=u.byteLength;if(255===u.getUint8(0)&&216===u.getUint8(1))for(l=2;l<d;){if(255===u.getUint8(l)&&225===u.getUint8(l+1)){r=l;break}l++}if(r&&(i=r+4,n=r+10,"Exif"===this.getStringFromCharCode(u,i,4)&&((a=18761===(s=u.getUint16(n)))||19789===s)&&42===u.getUint16(n+2,a)&&(o=u.getUint32(n+4,a))>=8&&(c=n+o)),c)for(d=u.getUint16(c,a),p=0;p<d;p++)if(l=c+12*p+2,274===u.getUint16(l,a)){l+=8,e=u.getUint16(l,a);break}return e},cancel:function(){this.showPopup=!1,this.$refs.uploadImg.value=""},finish:function(){var t=this,e=null;if(this.autoClip)e=this.imagetoCanvas(this.image,(this.boxSize.x-this.imgSize.x-this.image.width*(1-this.imgSize.s)/2)/this.imgSize.s,(this.boxSize.y-this.imgSize.y-this.image.height*(1-this.imgSize.s)/2)/this.imgSize.s,this.boxSize.w/this.imgSize.s,this.boxSize.h/this.imgSize.s,this.boxSize.w,this.boxSize.h);else{var i=this.resizeSizeImg(this.image,this.maxWidth,this.maxHeight);e=this.imagetoCanvas(this.image,0,0,this.image.width,this.image.height,i.w,i.h)}if("blob"===this.dataUrlType)this.canvasResizetoFile(e,function(e){t.imgUrl=URL.createObjectURL(e),t.$emit("finish",t.imgName,e)});else{var n=this.canvasResizetoDataURL(e);this.imgUrl=n,this.$emit("finish",this.imgName,n)}this.$refs.uploadImg.value="",this.showPopup=!1},resizeSizeImg:function(t,e,i){var n=t.width,o=t.height,a={x:(e-n)/2,y:(i-o)/2,w:n,h:o,s:1};if(a.w<e&&a.h<i||this.isOriginalImg)return console.log(this.isOriginalImg),a;var s=parseFloat(a.w/a.h),r={x:(e-n)/2,y:(i-o)/2,w:e,h:parseInt(e/s),s:e/n},c={x:(e-n)/2,y:(i-o)/2,w:parseInt(i*s),h:i,s:i/o};return r.h<=i?r:c.w<=e?c:{x:0,y:0,w:e,h:i,s:e/n}},toClipPopup:function(t){var e=this.$refs.image;this.imgSize.w=t.width,this.imgSize.h=t.height,this.setElementStyle(e,this.imgSize),this.autoClip&&this.setClipBoxSize()},setClipBoxSize:function(){var t=this.fixedNumber[0]/this.fixedNumber[1];this.clipWidth=0===this.autoClipWidth?parseInt(.8*this.screenWidth):this.autoClipWidth,this.clipHeight=0===this.autoClipHeight?parseInt(.8*this.screenWidth/t):this.fixed?parseInt(this.autoClipWidth/t):this.autoClipHeight;var e={x:(this.screenWidth-this.clipWidth)/2,y:(this.screenHeight-this.clipHeight)/2,w:this.clipWidth,h:this.clipHeight,s:1};o(this.boxSize,e),this.clipBoxStyle()},clipBoxStyle:function(){var t=this;this.$nextTick(function(){t.setElementStyle(t.$refs.clipBox,t.boxSize),t.clipBoxImgSize()})},clipBoxImgSize:function(){var t={x:this.imgSize.x-this.boxSize.x,y:this.imgSize.y-this.boxSize.y,w:this.imgSize.w,h:this.imgSize.h,s:this.imgSize.s};this.setElementStyle(this.$refs.clipImage,t)},setElementStyle:function(t,e){t.style.width="".concat(e.w,"px"),t.style.height="".concat(e.h,"px"),t.style.transform="translate3d(".concat(e.x,"px, ").concat(e.y,"px, 0) scale(").concat(e.s,", ").concat(e.s,")")},imageScale:function(t){var e=this;this.imgSize.s=t.target.value/100,this.$nextTick(function(){var t=e.$refs.image;e.setElementStyle(t,e.imgSize),e.clipBoxStyle(e.image)})},startMove:function(t){if(t.preventDefault(),!this.canMove)return!1;var e=t.touches?t.touches[0]:t;this.moveX=this.imgSize.x-e.clientX,this.moveY=this.imgSize.y-e.clientY,window.addEventListener("mousemove",this.moveImg),window.addEventListener("mouseup",this.leaveImg),window.addEventListener("touchmove",this.moveImg),window.addEventListener("touchend",this.leaveImg)},moveImg:function(t){var e=this,i=t.touches?t.touches[0]:t,n=i.clientX,o=i.clientY,a=n+this.moveX,s=o+this.moveY;this.imgSize.x=a,this.imgSize.y=s,this.$nextTick(function(){e.setElementStyle(e.$refs.image,e.imgSize),e.clipBoxImgSize()})},leaveImg:function(t){window.removeEventListener("mousemove",this.moveImg),window.removeEventListener("mouseup",this.leaveImg),window.removeEventListener("touchmove",this.moveImg),window.removeEventListener("touchend",this.leaveImg)},clipMove:function(t){if(t.preventDefault(),!this.canMoveBox)return!1;var e=t.touches?t.touches[0]:t;this.clipMoveX=this.boxSize.x-e.clientX,this.clipMoveY=this.boxSize.y-e.clientY,this.clipWidth=this.boxSize.w,this.clipHeight=this.boxSize.h,window.addEventListener("mousemove",this.moveClip),window.addEventListener("mouseup",this.leaveClip),window.addEventListener("touchmove",this.moveClip),window.addEventListener("touchend",this.leaveClip)},moveClip:function(t){var e=t.touches?t.touches[0]:t,i=e.clientX,n=e.clientY,o=i+this.clipMoveX,a=n+this.clipMoveY;o<0?this.boxSize.x=0:o>this.screenWidth-this.clipWidth?this.boxSize.x=this.screenWidth-this.clipWidth:this.boxSize.x=o,a<25?this.boxSize.y=25:a>this.screenHeight-this.clipHeight?this.boxSize.y=this.screenHeight-this.clipHeight:this.boxSize.y=a,this.clipBoxStyle()},leaveClip:function(){window.removeEventListener("mousemove",this.moveClip),window.removeEventListener("mouseup",this.leaveClip),window.removeEventListener("touchmove",this.moveClip),window.removeEventListener("touchend",this.leaveClip)},changeClipSize:function(t,e,i,n,o){t.preventDefault(),window.addEventListener("mousemove",this.changeClipNow),window.addEventListener("mouseup",this.changeClipEnd),window.addEventListener("touchmove",this.changeClipNow),window.addEventListener("touchend",this.changeClipEnd);var a=t.touches?t.touches[0]:t;this.canChangeX=e,this.canChangeY=i,this.changeClipTypeX=n,this.changeClipTypeY=o,this.clipMoveX=a.clientX,this.clipMoveY=a.clientY,this.clipOldX=parseInt(this.boxSize.x),this.clipOldY=parseInt(this.boxSize.y),this.clipWidth=parseInt(this.boxSize.w),this.clipHeight=parseInt(this.boxSize.h),this.fixed&&e&&i&&(this.canChangeY=0)},changeClipNow:function(t){var e=t.touches?t.touches[0]:t,i=parseInt(e.clientX-this.clipMoveX),n=parseInt(e.clientY-this.clipMoveY),o=this.screenWidth,a=this.screenHeight;if(this.canChangeX)if(1===this.changeClipTypeX){var s=this.clipWidth-i,r=this.clipOldX+i;s>0?(this.boxSize.x=r>0?r:0,this.boxSize.w=r>0?s:this.clipWidth+this.clipOldX):(this.boxSize.x=this.clipWidth+this.clipOldX,this.boxSize.w=r>o?o-this.boxSize.x:Math.abs(s))}else if(2===this.changeClipTypeX){var c=this.clipWidth+i,l=this.clipOldX-Math.abs(c);c>0?(this.boxSize.x=this.clipOldX,this.boxSize.w=c+this.clipOldX>o?o-this.clipOldX:c):(this.boxSize.x=l>0?l:0,this.boxSize.w=l>0?Math.abs(c):this.clipOldX)}if(this.canChangeY)if(1===this.changeClipTypeY){var p=this.clipOldY+n,h=this.clipHeight-n;h>0?(this.boxSize.y=p>25?p:25,this.boxSize.h=p>25?h:this.clipHeight+this.clipOldY-25):(this.boxSize.y=this.clipHeight+this.clipOldY,this.boxSize.h=p>a?a-this.boxSize.y:Math.abs(h))}else if(2===this.changeClipTypeY){var u=this.clipHeight+n,d=this.clipOldY-Math.abs(u);u>0?(this.boxSize.y=this.clipOldY,this.boxSize.h=this.clipOldY+u>a?a-this.clipOldY:u):(this.boxSize.y=d>25?d:25,this.boxSize.h=d>25?Math.abs(u):this.clipOldY-25)}var f=this.fixedNumber[0]/this.fixedNumber[1];if(this.canChangeX&&this.fixed){var g=this.boxSize.w/f;g+this.clipOldY>a?(this.boxSize.h=a-this.clipOldY,this.boxSize.w=this.boxSize.h*f):this.boxSize.h=g}if(this.canChangeY&&this.fixed){var m=this.boxSize.h*f;m+this.clipOldX>o?(this.boxSize.w=o-this.clipOldX,this.boxSize.h=this.boxSize.w/f):this.boxSize.w=m}this.clipBoxStyle()},changeClipEnd:function(){window.removeEventListener("mousemove",this.changeClipNow),window.removeEventListener("mouseup",this.changeClipEnd),window.removeEventListener("touchmove",this.changeClipNow),window.removeEventListener("touchend",this.changeClipEnd)}}};i(1);var s=function(t,e,i,n,o,a,s,r){var c,l="function"==typeof t?t.options:t;if(e&&(l.render=e,l.staticRenderFns=i,l._compiled=!0),n&&(l.functional=!0),a&&(l._scopeId="data-v-"+a),s?(c=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(s)},l._ssrRegister=c):o&&(c=r?function(){o.call(this,this.$root.$options.shadowRoot)}:o),c)if(l.functional){l._injectStyles=c;var p=l.render;l.render=function(t,e){return c.call(e),p(t,e)}}else{var h=l.beforeCreate;l.beforeCreate=h?[].concat(h,c):[c]}return{exports:t,options:l}}(a,n,[],!1,null,"29874490",null);s.options.__file="src/vue-clip.vue";var r=s.exports;i.d(e,"VueClip",function(){return r});var c=function(t){t.component(r.name,r)};"undefiend"!=typeof window&&window.Vue&&c(window.Vue);e.default={install:c,VueClip:r,vueClip:r}}])});


--------------------------------------------------------------------------------
/docs/example.bundle.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[0],{202:function(n,t,e){var i=e(207);"string"==typeof i&&(i=[[n.i,i,""]]);var o={hmr:!0,transform:void 0,insertInto:void 0};e(5)(i,o);i.locals&&(n.exports=i.locals)},203:function(n,t,e){var i=e(209);"string"==typeof i&&(i=[[n.i,i,""]]);var o={hmr:!0,transform:void 0,insertInto:void 0};e(5)(i,o);i.locals&&(n.exports=i.locals)},204:function(n,t,e){var i=e(212);"string"==typeof i&&(i=[[n.i,i,""]]);var o={hmr:!0,transform:void 0,insertInto:void 0};e(5)(i,o);i.locals&&(n.exports=i.locals)},205:function(n,t,e){var i=e(215);"string"==typeof i&&(i=[[n.i,i,""]]);var o={hmr:!0,transform:void 0,insertInto:void 0};e(5)(i,o);i.locals&&(n.exports=i.locals)},206:function(n,t,e){"use strict";var i=e(202);e.n(i).a},207:function(n,t,e){(n.exports=e(4)(!1)).push([n.i,"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* 基础样式文件 */\nhtml, body {\n  font-family: 'PingFangSC', 'PingFang SC Bold', 'Microsoft Yahei', Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  line-height: 1.5;\n  color: #141414;\n  background: #fff;\n}\nhtml {\n  min-height: 100%;\n}\nbody, h1, h2, h3, h4, h5, h6, hr, p, a, span, em, i, b, section, article, sub, sup, strong\nblockquote, dl, dt, dd, ul, ol, li, pre,\nform, fieldset, legend, button, input, select, textarea, label,\nth, td, img, div, header, footer, nav {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-weight: normal;\n  list-style: none;\n  font-style: normal;\n  font-size: 14px;\n  text-decoration: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: transparent;\n  -webkit-font-smoothing: antialiased;\n}\n.vue-clip-example {\n  width: 1020px;\n  margin: 0 auto;\n}\n.vue-clip-example h3 {\n  margin: 30px 0;\n  font-size: 36px;\n  line-height: 80px;\n  color: rgba(50, 135, 255, .7);\n  font-weight: bold;\n  text-align: center;\n}\n.vue-clip-example h4,\n.vue-clip-example a {\n  font-size: 22px;\n  margin-bottom: 30px;\n}\n.vue-clip-example .content {\n  overflow: hidden;\n  border-bottom: 6px solid #f9f9f9;\n  padding-bottom: 30px;\n  margin-bottom: 30px;\n}\n.vue-clip-example .fl {\n  position: relative;\n  float: left;\n  width: 420px;\n  height: 700px;\n  border: 1px solid #eee;\n}\n.vue-clip-example .fl header {\n  height: 40px;\n  color: #fff;\n  font-size: 20px;\n  line-height: 40px;\n  text-align: center;\n  background: #030303;\n}\n.vue-clip-example .fl .main {\n  padding: 20px;\n}\n.vue-clip-example .fr {\n  float: right;\n  width: 560px;\n  height: 700px;\n  background: #282a36;\n  overflow-y: scroll;\n}\niframe {\n  width: 100%;\n  height: 100%;\n}\n.avatar {\n  width: 60px;\n  height: 60px;\n}\n",""])},208:function(n,t,e){"use strict";var i=e(203);e.n(i).a},209:function(n,t,e){(n.exports=e(4)(!1)).push([n.i,"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* 基础样式文件 */\nhtml, body {\n  font-family: 'PingFangSC', 'PingFang SC Bold', 'Microsoft Yahei', Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  line-height: 1.5;\n  color: #141414;\n  background: #fff;\n}\nhtml {\n  min-height: 100%;\n}\nbody, h1, h2, h3, h4, h5, h6, hr, p, a, span, em, i, b, section, article, sub, sup, strong\nblockquote, dl, dt, dd, ul, ol, li, pre,\nform, fieldset, legend, button, input, select, textarea, label,\nth, td, img, div, header, footer, nav {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-weight: normal;\n  list-style: none;\n  font-style: normal;\n  font-size: 14px;\n  text-decoration: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: transparent;\n  -webkit-font-smoothing: antialiased;\n}\n.upload header {\n  height: 40px;\n  color: #fff;\n  font-size: 20px;\n  line-height: 40px;\n  text-align: center;\n  background: #030303;\n}\n.upload .main {\n  padding: 20px;\n}\n.avatar {\n  width: 60px;\n  height: 60px;\n}\n",""])},210:function(n,t,e){n.exports=e.p+"img/1.aca4e29.jpg"},211:function(n,t,e){"use strict";var i=e(204);e.n(i).a},212:function(n,t,e){(n.exports=e(4)(!1)).push([n.i,"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* 基础样式文件 */\nhtml, body {\n  font-family: 'PingFangSC', 'PingFang SC Bold', 'Microsoft Yahei', Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  line-height: 1.5;\n  color: #141414;\n  background: #fff;\n}\nhtml {\n  min-height: 100%;\n}\nbody, h1, h2, h3, h4, h5, h6, hr, p, a, span, em, i, b, section, article, sub, sup, strong\nblockquote, dl, dt, dd, ul, ol, li, pre,\nform, fieldset, legend, button, input, select, textarea, label,\nth, td, img, div, header, footer, nav {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-weight: normal;\n  list-style: none;\n  font-style: normal;\n  font-size: 14px;\n  text-decoration: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: transparent;\n  -webkit-font-smoothing: antialiased;\n}\n.upload header {\n  height: 40px;\n  color: #fff;\n  font-size: 20px;\n  line-height: 40px;\n  text-align: center;\n  background: #030303;\n}\n.upload .main {\n  padding: 20px;\n}\n.avatar {\n  width: 60px;\n  height: 60px;\n}\n",""])},213:function(n,t,e){n.exports=e.p+"img/2.9e7170f.jpg"},214:function(n,t,e){"use strict";var i=e(205);e.n(i).a},215:function(n,t,e){(n.exports=e(4)(!1)).push([n.i,"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* 基础样式文件 */\nhtml, body {\n  font-family: 'PingFangSC', 'PingFang SC Bold', 'Microsoft Yahei', Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  line-height: 1.5;\n  color: #141414;\n  background: #fff;\n}\nhtml {\n  min-height: 100%;\n}\nbody, h1, h2, h3, h4, h5, h6, hr, p, a, span, em, i, b, section, article, sub, sup, strong\nblockquote, dl, dt, dd, ul, ol, li, pre,\nform, fieldset, legend, button, input, select, textarea, label,\nth, td, img, div, header, footer, nav {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-weight: normal;\n  list-style: none;\n  font-style: normal;\n  font-size: 14px;\n  text-decoration: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: transparent;\n  -webkit-font-smoothing: antialiased;\n}\n.upload header {\n  height: 40px;\n  color: #fff;\n  font-size: 20px;\n  line-height: 40px;\n  text-align: center;\n  background: #030303;\n}\n.upload .main {\n  padding: 20px;\n}\n.avatar {\n  width: 60px;\n  height: 60px;\n}\n",""])},216:function(n,t,e){"use strict";e.r(t);var i=function(){var n=this,t=n.$createElement,e=n._self._c||t;return e("div",{staticClass:"upload"},[e("header",[n._v("上传图片")]),n._v(" "),e("div",{staticClass:"main"},[e("div",{staticClass:"avatar"},[e("vue-clip",{attrs:{img:n.option.img,dataUrlType:n.option.dataUrlType,outputSize:n.option.outputSize,isOriginalImg:n.option.isOriginalImg,maxWidth:n.option.maxWidth,maxHeight:n.option.maxHeight,outputType:n.option.outputType,theme:n.option.theme},on:{finish:n.finish}})],1)])])};i._withStripped=!0;var o={name:"upload2",data:function(){return{option:{img:e(210),outputSize:.8,dataUrlType:"base64",isOriginalImg:!1,maxWidth:600,maxHeight:600,outputType:"jpeg",theme:"circle"}}},methods:{finish:function(n,t){console.log("data",t);new FormData}}},a=(e(211),e(1)),r=Object(a.a)(o,i,[],!1,null,null,null);r.options.__file="example/upload2.vue";t.default=r.exports},217:function(n,t,e){"use strict";e.r(t);var i=function(){var n=this,t=n.$createElement,e=n._self._c||t;return e("div",{staticClass:"vue-clip-example"},[e("h3",[n._v("vue-pic-clip")]),n._v(" "),n._m(0),n._v(" "),e("div",{staticClass:"content"},[n._m(1),n._v(" "),e("div",{staticClass:"fr"},[e("div",{directives:[{name:"highlight",rawName:"v-highlight"}]},[e("pre",[n._v("          "),e("code",{domProps:{textContent:n._s(n.code0)}}),n._v("\n        ")]),n._v(" "),e("pre",[n._v("          "),e("code",{domProps:{textContent:n._s(n.code1)}}),n._v("\n        ")])])])]),n._v(" "),e("div",{staticClass:"content"},[n._m(2),n._v(" "),e("div",{staticClass:"fr"},[e("div",{directives:[{name:"highlight",rawName:"v-highlight"}]},[e("pre",[n._v("          "),e("code",{domProps:{textContent:n._s(n.code4)}}),n._v("\n        ")]),n._v(" "),e("pre",[n._v("          "),e("code",{domProps:{textContent:n._s(n.code5)}}),n._v("\n        ")])])])]),n._v(" "),e("div",{staticClass:"content"},[n._m(3),n._v(" "),e("div",{staticClass:"fr"},[e("div",{directives:[{name:"highlight",rawName:"v-highlight"}]},[e("pre",[n._v("          "),e("code",{domProps:{textContent:n._s(n.code2)}}),n._v("\n        ")]),n._v(" "),e("pre",[n._v("          "),e("code",{domProps:{textContent:n._s(n.code3)}}),n._v("\n        ")])])])])])};i._withStripped=!0;var o={name:"app",data:function(){return{code0:"",code1:"",code2:"",code3:"",code4:"",code5:""}},created:function(){this.code0='\n      <vue-clip\n        :accept="option.accept" // 可上传的图片类型\n        :autoClip="option.autoClip"\n        :autoClipWidth="option.autoClipWidth"\n        :autoClipHeight="option.autoClipHeight"\n        :fixed="option.fixed"\n        :outputSize="option.outputSize"\n        :theme="option.theme"\n        @finish="finish"\n      >上传头像</vue-clip>',this.code1="\n      data () {\n        return {\n          option: {\n            accept: 'image/png, image/jpeg, image/jpg, image/gif', // 可上传的图片类型\n            outputSize: 0.7, // 压缩质量\n            autoClip: true, // 是否开启截图框\n            autoClipWidth: 300, // 截图框宽度\n            autoClipHeight: 300, // 截图框高度\n            canMoveBox: true, // 截图框是否可以移动\n            fixed: false, // 截图框是否开启固定宽高比\n            fixedNumber: [1, 1], // 宽高比 w/h\n            theme: 'rect' // 样式风格，默认rect:方形，circle:圆形\n          }\n        }\n      },\n      methods: {\n        finish (name, url) { // 完成上传图片，返回图片名称、数据\n          console.log('data', url)\n          let formData = new FormData()\n          formData.append('files', url)\n          formData.append('name', name)\n        }\n      }",this.code4='\n      <vue-clip\n        :img="option.img"\n        :accept="option.accept"\n        :autoClip="option.autoClip"\n        :autoClipWidth="option.autoClipWidth"\n        :autoClipHeight="option.autoClipHeight"\n        :fixed="option.fixed"\n        :outputSize="option.outputSize"\n        :theme="option.theme"\n        @finish="finish"\n      >上传头像</vue-clip>',this.code5="\n      data () {\n        return {\n          option: {\n            img: require('./img/2.jpg'), // 默认图片\n            accept: 'image/png, image/jpeg, image/jpg, image/gif', // 可上传的图片类型\n            outputSize: 0.7, // 压缩质量\n            autoClip: true, // 是否开启截图框\n            autoClipWidth: 300, // 截图框宽度\n            autoClipHeight: 300, // 截图框高度\n            canMoveBox: true, // 截图框是否可以移动\n            fixed: true, // 截图框是否开启固定宽高比\n            fixedNumber: [1, 1], // 宽高比 w/h\n            theme: 'rect' // 样式风格，默认rect:方形，circle:圆形\n          }\n        }\n      },\n      methods: {\n        finish (name, url) { // 完成上传图片，返回图片名称、数据\n          console.log('data', url)\n          let formData = new FormData()\n          formData.append('files', url)\n          formData.append('name', name)\n        }\n      }",this.code2='\n      <vue-clip\n        :dataUrlType="option1.dataUrlType"\n        :outputSize="option1.outputSize"\n        :fixed="option1.fixed"\n        :fixedNumber="option1.fixedNumber"\n        :theme="option1.theme"\n        @finish="finish"\n      ></vue-clip>',this.code3="\n      data () {\n        return {\n          option1: {\n            img: require('./img/1.jpg'), // 默认图片\n            accept: 'image/png, image/jpeg, image/jpg, image/gif', // 可上传的图片类型\n            outputSize: 0.8,\n            dataUrlType: 'base64', // 数据类型，默认blob\n            isOriginalImg:  true, // 是否上传原图，上传原图maxWidth、maxHeight无效\n            maxWidth: 600, // 生成图片的最大宽度\n            maxHeight: 600, // 生成图片的最大高度\n            outputType: 'jpeg', // 生成图片的格式，默认jpg(jpg需要传入jpeg)【jpeg、png、webp】\n            theme: 'circle'\n          }\n        }\n      },\n      methods: {\n        finish (name, url) {\n          console.log('data', url)\n        }\n      }"}},a=(e(206),e(1)),r=Object(a.a)(o,i,[function(){var n=this.$createElement,t=this._self._c||n;return t("h4",[this._v("github: "),t("a",{attrs:{href:"https://github.com/Tianyazz/vue-pic-clip"}},[this._v("https://github.com/Tianyazz/vue-pic-clip")])])},function(){var n=this.$createElement,t=this._self._c||n;return t("div",{staticClass:"fl"},[t("iframe",{attrs:{src:"./#/upload",frameborder:"0"}})])},function(){var n=this.$createElement,t=this._self._c||n;return t("div",{staticClass:"fl"},[t("iframe",{attrs:{src:"./#/upload3",frameborder:"0"}})])},function(){var n=this.$createElement,t=this._self._c||n;return t("div",{staticClass:"fl"},[t("iframe",{attrs:{src:"./#/upload2",frameborder:"0"}})])}],!1,null,null,null);r.options.__file="example/home.vue";t.default=r.exports},218:function(n,t,e){"use strict";e.r(t);var i=function(){var n=this,t=n.$createElement,e=n._self._c||t;return e("div",{staticClass:"upload"},[e("header",[n._v("上传图片")]),n._v(" "),e("div",{staticClass:"main"},[e("div",{staticClass:"avatar"},[e("vue-clip",{attrs:{img:n.option.img,accept:n.option.accept,autoClip:n.option.autoClip,autoClipWidth:n.option.autoClipWidth,autoClipHeight:n.option.autoClipHeight,fixed:n.option.fixed,fixedNumber:n.option.fixedNumber,outputSize:n.option.outputSize,theme:n.option.theme},on:{finish:n.finish}})],1)])])};i._withStripped=!0;var o={name:"upload3",data:function(){return{option:{img:e(213),accept:"image/png, image/jpeg, image/jpg, image/gif",outputSize:.7,autoClip:!0,autoClipWidth:300,autoClipHeight:300,canMoveBox:!0,fixed:!0,fixedNumber:[1,1],theme:"circle"}}},methods:{finish:function(n,t){console.log("data",t);var e=new FormData;e.append("files",t),e.append("name",n)}}},a=(e(214),e(1)),r=Object(a.a)(o,i,[],!1,null,null,null);r.options.__file="example/upload3.vue";t.default=r.exports},219:function(n,t,e){"use strict";e.r(t);var i=function(){var n=this,t=n.$createElement,e=n._self._c||t;return e("div",{staticClass:"upload"},[e("header",[n._v("上传图片")]),n._v(" "),e("div",{staticClass:"main"},[e("div",{staticClass:"avatar"},[e("vue-clip",{attrs:{accept:n.option.accept,autoClip:n.option.autoClip,autoClipWidth:n.option.autoClipWidth,autoClipHeight:n.option.autoClipHeight,fixed:n.option.fixed,outputSize:n.option.outputSize,theme:n.option.theme},on:{finish:n.finish}},[n._v("上传头像")])],1)])])};i._withStripped=!0;var o={name:"upload1",data:function(){return{option:{accept:"image/png, image/jpeg, image/jpg, image/gif",outputSize:.7,autoClip:!0,autoClipWidth:300,autoClipHeight:300,canMoveBox:!1,fixed:!1,fixedNumber:[1,1],theme:"rect"}}},methods:{finish:function(n,t){console.log("data",t);var e=new FormData;e.append("files",t),e.append("name",n)}}},a=(e(208),e(1)),r=Object(a.a)(o,i,[],!1,null,null,null);r.options.__file="example/upload.vue";t.default=r.exports}}]);


--------------------------------------------------------------------------------
/docs/img/1.aca4e29.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tianyazz/vue-pic-clip/ddc4eed672bc0c0d87a9cb88ef79191993c5742d/docs/img/1.aca4e29.jpg


--------------------------------------------------------------------------------
/docs/img/2.9e7170f.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tianyazz/vue-pic-clip/ddc4eed672bc0c0d87a9cb88ef79191993c5742d/docs/img/2.9e7170f.jpg


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue image upload</title>
 6 |     <meta http-equiv="Cache-Control" content="no-siteapp" /><!-- 百度禁止转码 -->
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |   <script type="text/javascript" src="main.bundle.js"></script></body>
12 | </html>


--------------------------------------------------------------------------------
/example/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'App'
10 | }
11 | </script>
12 | 


--------------------------------------------------------------------------------
/example/home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="vue-clip-example">
  3 |     <h3>vue-pic-clip</h3>
  4 |     <h4>github: <a href="https://github.com/Tianyazz/vue-pic-clip">https://github.com/Tianyazz/vue-pic-clip</a></h4>
  5 |     <div class="content">
  6 |       <div class="fl">
  7 |         <iframe src="./#/upload" frameborder="0">
  8 |         </iframe>
  9 |       </div>
 10 |       <div class="fr">
 11 |         <div v-highlight>
 12 |           <pre>
 13 |             <code v-text="code0"></code>
 14 |           </pre>
 15 |           <pre>
 16 |             <code v-text="code1"></code>
 17 |           </pre>
 18 |         </div>
 19 |       </div>
 20 |     </div>
 21 |     <div class="content">
 22 |       <div class="fl">
 23 |         <iframe src="./#/upload3" frameborder="0">
 24 |         </iframe>
 25 |       </div>
 26 |       <div class="fr">
 27 |         <div v-highlight>
 28 |           <pre>
 29 |             <code v-text="code4"></code>
 30 |           </pre>
 31 |           <pre>
 32 |             <code v-text="code5"></code>
 33 |           </pre>
 34 |         </div>
 35 |       </div>
 36 |     </div>
 37 |     <div class="content">
 38 |       <div class="fl">
 39 |         <iframe src="./#/upload2" frameborder="0">
 40 |         </iframe>
 41 |       </div>
 42 |       <div class="fr">
 43 |         <div v-highlight>
 44 |           <pre>
 45 |             <code v-text="code2"></code>
 46 |           </pre>
 47 |           <pre>
 48 |             <code v-text="code3"></code>
 49 |           </pre>
 50 |         </div>
 51 |       </div>
 52 |     </div>
 53 |   </div>
 54 | </template>
 55 | 
 56 | <script>
 57 | // import VueClip from 
 58 | export default {
 59 |   name: 'app',
 60 |   data () {
 61 |     return {
 62 |       code0: '',
 63 |       code1: '',
 64 |       code2: '',
 65 |       code3: '',
 66 |       code4: '',
 67 |       code5: ''
 68 |     }
 69 |   },
 70 |   created () {
 71 |     this.code0 = `
 72 |       <vue-clip
 73 |         :accept="option.accept" // 可上传的图片类型
 74 |         :autoClip="option.autoClip"
 75 |         :autoClipWidth="option.autoClipWidth"
 76 |         :autoClipHeight="option.autoClipHeight"
 77 |         :fixed="option.fixed"
 78 |         :outputSize="option.outputSize"
 79 |         :theme="option.theme"
 80 |         @finish="finish"
 81 |       >上传头像</vue-clip>`
 82 |     this.code1 = `
 83 |       data () {
 84 |         return {
 85 |           option: {
 86 |             accept: 'image/png, image/jpeg, image/jpg, image/gif', // 可上传的图片类型
 87 |             outputSize: 0.7, // 压缩质量
 88 |             autoClip: true, // 是否开启截图框
 89 |             autoClipWidth: 300, // 截图框宽度
 90 |             autoClipHeight: 300, // 截图框高度
 91 |             canMoveBox: true, // 截图框是否可以移动
 92 |             fixed: false, // 截图框是否开启固定宽高比
 93 |             fixedNumber: [1, 1], // 宽高比 w/h
 94 |             theme: 'rect' // 样式风格，默认rect:方形，circle:圆形
 95 |           }
 96 |         }
 97 |       },
 98 |       methods: {
 99 |         finish (name, url) { // 完成上传图片，返回图片名称、数据
100 |           console.log('data', url)
101 |           let formData = new FormData()
102 |           formData.append('files', url)
103 |           formData.append('name', name)
104 |         }
105 |       }`
106 |     this.code4 = `
107 |       <vue-clip
108 |         :img="option.img"
109 |         :accept="option.accept"
110 |         :autoClip="option.autoClip"
111 |         :autoClipWidth="option.autoClipWidth"
112 |         :autoClipHeight="option.autoClipHeight"
113 |         :fixed="option.fixed"
114 |         :outputSize="option.outputSize"
115 |         :theme="option.theme"
116 |         @finish="finish"
117 |       >上传头像</vue-clip>`
118 |     this.code5 = `
119 |       data () {
120 |         return {
121 |           option: {
122 |             img: require('./img/2.jpg'), // 默认图片
123 |             accept: 'image/png, image/jpeg, image/jpg, image/gif', // 可上传的图片类型
124 |             outputSize: 0.7, // 压缩质量
125 |             autoClip: true, // 是否开启截图框
126 |             autoClipWidth: 300, // 截图框宽度
127 |             autoClipHeight: 300, // 截图框高度
128 |             canMoveBox: true, // 截图框是否可以移动
129 |             fixed: true, // 截图框是否开启固定宽高比
130 |             fixedNumber: [1, 1], // 宽高比 w/h
131 |             theme: 'rect' // 样式风格，默认rect:方形，circle:圆形
132 |           }
133 |         }
134 |       },
135 |       methods: {
136 |         finish (name, url) { // 完成上传图片，返回图片名称、数据
137 |           console.log('data', url)
138 |           let formData = new FormData()
139 |           formData.append('files', url)
140 |           formData.append('name', name)
141 |         }
142 |       }`
143 |     this.code2 = `
144 |       <vue-clip
145 |         :dataUrlType="option1.dataUrlType"
146 |         :outputSize="option1.outputSize"
147 |         :fixed="option1.fixed"
148 |         :fixedNumber="option1.fixedNumber"
149 |         :theme="option1.theme"
150 |         @finish="finish"
151 |       ></vue-clip>`
152 |     this.code3 = `
153 |       data () {
154 |         return {
155 |           option1: {
156 |             img: require('./img/1.jpg'), // 默认图片
157 |             accept: 'image/png, image/jpeg, image/jpg, image/gif', // 可上传的图片类型
158 |             outputSize: 0.8,
159 |             dataUrlType: 'base64', // 数据类型，默认blob
160 |             isOriginalImg:  true, // 是否上传原图，上传原图maxWidth、maxHeight无效
161 |             maxWidth: 600, // 生成图片的最大宽度
162 |             maxHeight: 600, // 生成图片的最大高度
163 |             outputType: 'jpeg', // 生成图片的格式，默认jpg(jpg需要传入jpeg)【jpeg、png、webp】
164 |             theme: 'circle'
165 |           }
166 |         }
167 |       },
168 |       methods: {
169 |         finish (name, url) {
170 |           console.log('data', url)
171 |         }
172 |       }`
173 |   }
174 | }
175 | </script>
176 | 
177 | <style lang="css">
178 | /* 基础样式文件 */
179 | html, body {
180 |   font-family: 'PingFangSC', 'PingFang SC Bold', 'Microsoft Yahei', Helvetica, Arial, sans-serif;
181 |   -webkit-font-smoothing: antialiased;
182 |   -moz-osx-font-smoothing: grayscale;
183 |   line-height: 1.5;
184 |   color: #141414;
185 |   background: #fff;
186 | }
187 | html {
188 |   min-height: 100%;
189 | }
190 | body, h1, h2, h3, h4, h5, h6, hr, p, a, span, em, i, b, section, article, sub, sup, strong
191 | blockquote, dl, dt, dd, ul, ol, li, pre,
192 | form, fieldset, legend, button, input, select, textarea, label,
193 | th, td, img, div, header, footer, nav {
194 |   margin: 0;
195 |   padding: 0;
196 |   border: 0;
197 |   font-weight: normal;
198 |   list-style: none;
199 |   font-style: normal;
200 |   font-size: 14px;
201 |   text-decoration: none;
202 |   -webkit-box-sizing: border-box;
203 |   box-sizing: border-box;
204 |   -webkit-tap-highlight-color: transparent;
205 |   -webkit-font-smoothing: antialiased;
206 | }
207 | .vue-clip-example {
208 |   width: 1020px;
209 |   margin: 0 auto;
210 | }
211 | .vue-clip-example h3 {
212 |   margin: 30px 0;
213 |   font-size: 36px;
214 |   line-height: 80px;
215 |   color: rgba(50, 135, 255, .7);
216 |   font-weight: bold;
217 |   text-align: center;
218 | }
219 | .vue-clip-example h4,
220 | .vue-clip-example a {
221 |   font-size: 22px;
222 |   margin-bottom: 30px;
223 | }
224 | .vue-clip-example .content {
225 |   overflow: hidden;
226 |   border-bottom: 6px solid #f9f9f9;
227 |   padding-bottom: 30px;
228 |   margin-bottom: 30px;
229 | }
230 | .vue-clip-example .fl {
231 |   position: relative;
232 |   float: left;
233 |   width: 420px;
234 |   height: 700px;
235 |   border: 1px solid #eee;
236 | }
237 | .vue-clip-example .fl header {
238 |   height: 40px;
239 |   color: #fff;
240 |   font-size: 20px;
241 |   line-height: 40px;
242 |   text-align: center;
243 |   background: #030303;
244 | }
245 | .vue-clip-example .fl .main {
246 |   padding: 20px;
247 | }
248 | .vue-clip-example .fr {
249 |   float: right;
250 |   width: 560px;
251 |   height: 700px;
252 |   background: #282a36;
253 |   overflow-y: scroll;
254 | }
255 | iframe {
256 |   width: 100%;
257 |   height: 100%;
258 | }
259 | .avatar {
260 |   width: 60px;
261 |   height: 60px;
262 | }
263 | </style>
264 | 


--------------------------------------------------------------------------------
/example/img/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tianyazz/vue-pic-clip/ddc4eed672bc0c0d87a9cb88ef79191993c5742d/example/img/1.jpg


--------------------------------------------------------------------------------
/example/img/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tianyazz/vue-pic-clip/ddc4eed672bc0c0d87a9cb88ef79191993c5742d/example/img/2.jpg


--------------------------------------------------------------------------------
/example/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './app'
 3 | import router from './router'
 4 | import VueClip from '../src/index'
 5 | import hljs from 'highlight.js'
 6 | import 'highlight.js/styles/dracula.css'
 7 | Vue.directive('highlight', function (el) {
 8 |   let blocks = el.querySelectorAll('pre code');
 9 |   setTimeout(() => {
10 |     blocks.forEach((block) => {
11 |       hljs.highlightBlock(block)
12 |     })
13 |   }, 200)
14 | })
15 | 
16 | Vue.use(VueClip)
17 | 
18 | new Vue({
19 |   el: '#app',
20 |   router,
21 |   components: { App },
22 |   template: '<App/>'
23 | })
24 | 


--------------------------------------------------------------------------------
/example/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | const Home = r => require.ensure([], () => r(require('../home')), 'example')
 4 | const Upload = r => require.ensure([], () => r(require('../upload')), 'example')
 5 | const Upload2 = r => require.ensure([], () => r(require('../upload2')), 'example')
 6 | const Upload3 = r => require.ensure([], () => r(require('../upload3')), 'example')
 7 | 
 8 | Vue.use(Router)
 9 | 
10 | export default new Router({
11 |   routes: [
12 |     {
13 |       path: '/',
14 |       component: Home
15 |     }, {
16 |       path: '/upload',
17 |       component: Upload
18 |     }, {
19 |       path: '/upload2',
20 |       component: Upload2
21 |     }, {
22 |       path: '/upload3',
23 |       component: Upload3
24 |     }
25 |   ]
26 | })
27 | 


--------------------------------------------------------------------------------
/example/upload.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="upload">
 3 |     <header>上传图片</header>
 4 |     <div class="main">
 5 |       <div class="avatar">
 6 |         <vue-clip
 7 |           :accept="option.accept"
 8 |           :autoClip="option.autoClip"
 9 |           :autoClipWidth="option.autoClipWidth"
10 |           :autoClipHeight="option.autoClipHeight"
11 |           :fixed="option.fixed"
12 |           :outputSize="option.outputSize"
13 |           :theme="option.theme"
14 |           @finish="finish"
15 |         >上传头像</vue-clip>
16 |       </div>
17 |     </div>
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 | export default {
23 |   name: 'upload1',
24 |   data () {
25 |     return {
26 |       option: {
27 |         accept: 'image/png, image/jpeg, image/jpg, image/gif',
28 |         outputSize: 0.7,
29 |         autoClip: true,
30 |         autoClipWidth: 300,
31 |         autoClipHeight: 300,
32 |         canMoveBox: false,
33 |         fixed: false,
34 |         fixedNumber: [1, 1],
35 |         theme: 'rect'
36 |       }
37 |     }
38 |   },
39 |   methods: {
40 |     finish (name, url) {
41 |       console.log('data', url)
42 |       let formData = new FormData()
43 |       formData.append('files', url)
44 |       formData.append('name', name)
45 |     }
46 |   }
47 | }
48 | </script>
49 | 
50 | <style lang="css">
51 | /* 基础样式文件 */
52 | html, body {
53 |   font-family: 'PingFangSC', 'PingFang SC Bold', 'Microsoft Yahei', Helvetica, Arial, sans-serif;
54 |   -webkit-font-smoothing: antialiased;
55 |   -moz-osx-font-smoothing: grayscale;
56 |   line-height: 1.5;
57 |   color: #141414;
58 |   background: #fff;
59 | }
60 | html {
61 |   min-height: 100%;
62 | }
63 | body, h1, h2, h3, h4, h5, h6, hr, p, a, span, em, i, b, section, article, sub, sup, strong
64 | blockquote, dl, dt, dd, ul, ol, li, pre,
65 | form, fieldset, legend, button, input, select, textarea, label,
66 | th, td, img, div, header, footer, nav {
67 |   margin: 0;
68 |   padding: 0;
69 |   border: 0;
70 |   font-weight: normal;
71 |   list-style: none;
72 |   font-style: normal;
73 |   font-size: 14px;
74 |   text-decoration: none;
75 |   -webkit-box-sizing: border-box;
76 |   box-sizing: border-box;
77 |   -webkit-tap-highlight-color: transparent;
78 |   -webkit-font-smoothing: antialiased;
79 | }
80 | .upload header {
81 |   height: 40px;
82 |   color: #fff;
83 |   font-size: 20px;
84 |   line-height: 40px;
85 |   text-align: center;
86 |   background: #030303;
87 | }
88 | .upload .main {
89 |   padding: 20px;
90 | }
91 | .avatar {
92 |   width: 60px;
93 |   height: 60px;
94 | }
95 | </style>
96 | 


--------------------------------------------------------------------------------
/example/upload2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="upload">
 3 |     <header>上传图片</header>
 4 |     <div class="main">
 5 |       <div class="avatar">
 6 |         <vue-clip
 7 |           :img="option.img"
 8 |           :dataUrlType="option.dataUrlType"
 9 |           :outputSize="option.outputSize"
10 |           :isOriginalImg="option.isOriginalImg"
11 |           :maxWidth="option.maxWidth"
12 |           :maxHeight="option.maxHeight"
13 |           :outputType="option.outputType"
14 |           :theme="option.theme"
15 |           @finish="finish"
16 |         ></vue-clip>
17 |       </div>
18 |     </div>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | export default {
24 |   name: 'upload2',
25 |   data () {
26 |     return {
27 |       option: {
28 |         img: require('./img/1.jpg'),
29 |         outputSize: 0.8,
30 |         dataUrlType: 'base64', // 数据类型，默认blob
31 |         isOriginalImg:  false, // 是否上传原图，上传原图maxWidth、maxHeight无效
32 |         maxWidth: 600, // 生成图片的最大宽度
33 |         maxHeight: 600, // 生成图片的最大高度
34 |         outputType: 'jpeg', // 生成图片的格式，默认jpg(jpg需要传入jpeg)【jpeg、png、webp】
35 |         theme: 'circle'
36 |       }
37 |     }
38 |   },
39 |   methods: {
40 |     finish (name, url) {
41 |       console.log('data', url)
42 |       let formData = new FormData()
43 |     }
44 |   }
45 | }
46 | </script>
47 | 
48 | <style lang="css">
49 | /* 基础样式文件 */
50 | html, body {
51 |   font-family: 'PingFangSC', 'PingFang SC Bold', 'Microsoft Yahei', Helvetica, Arial, sans-serif;
52 |   -webkit-font-smoothing: antialiased;
53 |   -moz-osx-font-smoothing: grayscale;
54 |   line-height: 1.5;
55 |   color: #141414;
56 |   background: #fff;
57 | }
58 | html {
59 |   min-height: 100%;
60 | }
61 | body, h1, h2, h3, h4, h5, h6, hr, p, a, span, em, i, b, section, article, sub, sup, strong
62 | blockquote, dl, dt, dd, ul, ol, li, pre,
63 | form, fieldset, legend, button, input, select, textarea, label,
64 | th, td, img, div, header, footer, nav {
65 |   margin: 0;
66 |   padding: 0;
67 |   border: 0;
68 |   font-weight: normal;
69 |   list-style: none;
70 |   font-style: normal;
71 |   font-size: 14px;
72 |   text-decoration: none;
73 |   -webkit-box-sizing: border-box;
74 |   box-sizing: border-box;
75 |   -webkit-tap-highlight-color: transparent;
76 |   -webkit-font-smoothing: antialiased;
77 | }
78 | .upload header {
79 |   height: 40px;
80 |   color: #fff;
81 |   font-size: 20px;
82 |   line-height: 40px;
83 |   text-align: center;
84 |   background: #030303;
85 | }
86 | .upload .main {
87 |   padding: 20px;
88 | }
89 | .avatar {
90 |   width: 60px;
91 |   height: 60px;
92 | }
93 | </style>
94 | 


--------------------------------------------------------------------------------
/example/upload3.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="upload">
 3 |     <header>上传图片</header>
 4 |     <div class="main">
 5 |       <div class="avatar">
 6 |         <vue-clip
 7 |           :img="option.img"
 8 |           :accept="option.accept"
 9 |           :autoClip="option.autoClip"
10 |           :autoClipWidth="option.autoClipWidth"
11 |           :autoClipHeight="option.autoClipHeight"
12 |           :fixed="option.fixed"
13 |           :fixedNumber="option.fixedNumber"
14 |           :outputSize="option.outputSize"
15 |           :theme="option.theme"
16 |           @finish="finish"
17 |         ></vue-clip>
18 |       </div>
19 |     </div>
20 |   </div>
21 | </template>
22 | 
23 | <script>
24 | export default {
25 |   name: 'upload3',
26 |   data () {
27 |     return {
28 |       option: {
29 |         img: require('./img/2.jpg'),
30 |         accept: 'image/png, image/jpeg, image/jpg, image/gif',
31 |         outputSize: 0.7,
32 |         autoClip: true,
33 |         autoClipWidth: 300,
34 |         autoClipHeight: 300,
35 |         canMoveBox: true,
36 |         fixed: true,
37 |         fixedNumber: [1, 1],
38 |         theme: 'circle'
39 |       }
40 |     }
41 |   },
42 |   methods: {
43 |     finish (name, url) {
44 |       console.log('data', url)
45 |       let formData = new FormData()
46 |       formData.append('files', url)
47 |       formData.append('name', name)
48 |     }
49 |   }
50 | }
51 | </script>
52 | 
53 | <style lang="css">
54 | /* 基础样式文件 */
55 | html, body {
56 |   font-family: 'PingFangSC', 'PingFang SC Bold', 'Microsoft Yahei', Helvetica, Arial, sans-serif;
57 |   -webkit-font-smoothing: antialiased;
58 |   -moz-osx-font-smoothing: grayscale;
59 |   line-height: 1.5;
60 |   color: #141414;
61 |   background: #fff;
62 | }
63 | html {
64 |   min-height: 100%;
65 | }
66 | body, h1, h2, h3, h4, h5, h6, hr, p, a, span, em, i, b, section, article, sub, sup, strong
67 | blockquote, dl, dt, dd, ul, ol, li, pre,
68 | form, fieldset, legend, button, input, select, textarea, label,
69 | th, td, img, div, header, footer, nav {
70 |   margin: 0;
71 |   padding: 0;
72 |   border: 0;
73 |   font-weight: normal;
74 |   list-style: none;
75 |   font-style: normal;
76 |   font-size: 14px;
77 |   text-decoration: none;
78 |   -webkit-box-sizing: border-box;
79 |   box-sizing: border-box;
80 |   -webkit-tap-highlight-color: transparent;
81 |   -webkit-font-smoothing: antialiased;
82 | }
83 | .upload header {
84 |   height: 40px;
85 |   color: #fff;
86 |   font-size: 20px;
87 |   line-height: 40px;
88 |   text-align: center;
89 |   background: #030303;
90 | }
91 | .upload .main {
92 |   padding: 20px;
93 | }
94 | .avatar {
95 |   width: 60px;
96 |   height: 60px;
97 | }
98 | </style>
99 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Vue image upload</title>
 6 |     <meta http-equiv="Cache-Control" content="no-siteapp" /><!-- 百度禁止转码 -->
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |   </body>
12 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-pic-clip",
 3 |   "version": "0.0.1",
 4 |   "description": "a simple upload cropped image vue plugin",
 5 |   "author": "",
 6 |   "private": false,
 7 |   "main": "./dist/vue-pic-clip.min.js",
 8 |   "scripts": {
 9 |     "test": "echo \"Error: no test specified\" && exit 1",
10 |     "start": "webpack-dev-server --open --config webpack.config.js --host 172.28.3.132",
11 |     "doc": "webpack --config webpack.config.js",
12 |     "build": "webpack --config webpack.prod.conf.js"
13 |   },
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "git@github.com:Tianyazz/vue-pic-clip.git"
17 |   },
18 |   "files": [
19 |     "dist",
20 |     "src"
21 |   ],
22 |   "keywords": [
23 |     "vue",
24 |     "vue-clip",
25 |     "vue-pic-clip",
26 |     "vue-component"
27 |   ],
28 |   "license": "MIT",
29 |   "dependencies": {
30 |     "vue-router": "^3.0.2",
31 |     "webpack-cli": "^3.2.0"
32 |   },
33 |   "devDependencies": {
34 |     "@babel/core": "^7.2.2",
35 |     "@babel/plugin-transform-runtime": "^7.2.0",
36 |     "@babel/preset-env": "^7.2.3",
37 |     "babel-loader": "^8.0.5",
38 |     "clean-webpack-plugin": "^1.0.0",
39 |     "css-loader": "^1.0.1",
40 |     "extract-text-webpack-plugin": "^3.0.2",
41 |     "file-loader": "^3.0.1",
42 |     "highlight.js": "^9.13.1",
43 |     "html-webpack-plugin": "^3.2.0",
44 |     "style-loader": "^0.23.1",
45 |     "url-loader": "^1.1.2",
46 |     "vue-loader": "^15.5.0",
47 |     "vue-template-compiler": "^2.5.21",
48 |     "webpack": "^4.28.3",
49 |     "webpack-dev-server": "^3.1.14"
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import VueClip from './vue-clip'
 2 | 
 3 | const install = function(Vue) {
 4 |   Vue.component(VueClip.name, VueClip)
 5 | }
 6 | 
 7 | if (typeof window !== 'undefiend' && window.Vue) {
 8 |   install(window.Vue)
 9 | }
10 | export { VueClip }
11 | 
12 | export default {
13 |   install,
14 |   VueClip,
15 |   vueClip: VueClip
16 | }
17 | 


--------------------------------------------------------------------------------
/src/vue-clip.vue:
--------------------------------------------------------------------------------
   1 | <template>
   2 |   <div :class="['clip', theme]">
   3 |     <div class="icon">
   4 |       <i v-show="imgUrl === ''"></i>
   5 |       <p v-show="imgUrl === ''"><slot></slot></p>
   6 |     </div>
   7 |     <div class="picture" v-if="imgUrl !== ''">
   8 |       <img :src="imgUrl">
   9 |     </div>
  10 |     <input type="file"
  11 |       :accept="accept"
  12 |       @change="getImg($event)"
  13 |       ref="uploadImg"
  14 |     >
  15 |     <transition name="opacity">
  16 |       <div
  17 |         :class="['popup', {'clip-popup': autoClip}]"
  18 |         v-show="showPopup"
  19 |       >
  20 |         <img :src="clipImg" alt="" ref="image">
  21 |         <div class="popup-move"
  22 |           @mousedown="startMove"
  23 |           @touchstart.prevent="startMove"
  24 |           v-if="autoClip"
  25 |         ></div>
  26 |         <div class="clip-box" v-if="autoClip" ref="clipBox">
  27 |           <span class="clip-view">
  28 |             <img :src="clipImg" alt="" ref="clipImage">
  29 |           </span>
  30 |           <span class="clip-move"
  31 |             @mousedown="clipMove"
  32 |             @touchstart.prevent="clipMove"
  33 |           ></span>
  34 |           <span class="clip-info" v-text="clipSizeValue"></span>
  35 |           <span v-if="!fixedBox">
  36 |             <i class="clip-line line-t"
  37 |               @mousedown="changeClipSize($event, false, true, 0, 1)"
  38 |               @touchstart.prevent="changeClipSize($event, false, true, 0, 1)"
  39 |             ></i>
  40 |             <i class="clip-line line-r"
  41 |               @mousedown="changeClipSize($event, true, false, 2, 0)"
  42 |               @touchstart.prevent="changeClipSize($event, true, false, 2, 0)"
  43 |             ></i>
  44 |             <i class="clip-line line-b"
  45 |               @mousedown="changeClipSize($event, false, true, 0, 2)"
  46 |               @touchstart.prevent="changeClipSize($event, false, true, 0, 2)"
  47 |             ></i>
  48 |             <i class="clip-line line-l"
  49 |               @mousedown="changeClipSize($event, true, false, 1, 0)"
  50 |               @touchstart.prevent="changeClipSize($event, true, false, 1, 0)"
  51 |             ></i>
  52 |             <i class="clip-point point-tr"
  53 |               @mousedown="changeClipSize($event, true, true, 2, 1)"
  54 |               @touchstart.prevent="changeClipSize($event, true, true, 2, 1)"
  55 |             ></i>
  56 |             <i class="clip-point point-br"
  57 |               @mousedown="changeClipSize($event, true, true, 2, 2)"
  58 |               @touchstart.prevent="changeClipSize($event, true, true, 2, 2)"
  59 |             ></i>
  60 |             <i class="clip-point point-bl"
  61 |               @mousedown="changeClipSize($event, true, true, 1, 2)"
  62 |               @touchstart.prevent="changeClipSize($event, true, true, 1, 2)"
  63 |             ></i>
  64 |             <i class="clip-point point-tl"
  65 |               @mousedown="changeClipSize($event, true, true, 1, 1)"
  66 |               @touchstart.prevent="changeClipSize($event, true, true, 1, 1)"
  67 |             ></i>
  68 |           </span>
  69 |         </div>
  70 |         <div class="range" v-if="autoClip">
  71 |           <span>0%</span>
  72 |           <input type="range" min="0" max="100" v-model="imgScaleVal" @input="imageScale($event)">
  73 |           <span>100%</span>
  74 |         </div>
  75 |         <div class="button">
  76 |           <button @click="cancel">取消</button>
  77 |           <button @click="finish">完成</button>
  78 |         </div>
  79 |       </div>
  80 |     </transition>
  81 |     <transition name="opacity">
  82 |       <span class="msg" v-text="msg" v-show="msgStatus"></span>
  83 |     </transition>
  84 |   </div>
  85 | </template>
  86 | 
  87 | <script>
  88 | const extend = (target, source) => {
  89 |   for (let key in source) {
  90 |     target[key] = source[key]
  91 |   }
  92 |   return target
  93 | }
  94 | export default {
  95 |   name: 'VueClip',
  96 |   data () {
  97 |     return {
  98 |       screenWidth: document.documentElement.clientWidth,
  99 |       screenHeight: document.documentElement.clientHeight - 48,
 100 |       imgUrl: this.img, // 上传图片预览
 101 |       imgName: '', // 上传图片的名称
 102 |       image: '', // 图片对象
 103 |       clipImg: '', // 裁剪后的图片
 104 |       showPopup: false,
 105 |       imgScaleVal: 0, // 百分比
 106 |       moveX: 0, // 图片移动的x
 107 |       moveY: 0, // 图片移动的y
 108 |       clipWidth: 0, // 截图框的宽度
 109 |       clipHeight: 0, // 截图框的高度
 110 |       clipMoveX: 0, // 截图框移动的x
 111 |       clipMoveY: 0, // 截图框移动的y
 112 |       clipOldX: 0,
 113 |       clipOldY: 0,
 114 |       canChangeX: false, // 是否能改变截图框x轴值
 115 |       canChangeY: false, // 是否能改变截图框y轴值
 116 |       changeClipTypeX: 1, // 改变的基准点 0:不变、1:截图框左边变化、2：截图框右边变化
 117 |       changeClipTypeY: 1, // 改变的基准点 0:不变、1:截图框上边变化、2:截图框下边变化
 118 |       imgSize: { // 图片的尺寸、位置、缩放比
 119 |         x: 0,
 120 |         y: 0,
 121 |         w: 0,
 122 |         h: 0,
 123 |         s: 1
 124 |       },
 125 |       boxSize: { // 截图框的尺寸、位置
 126 |         x: 0,
 127 |         y: 0,
 128 |         w: 0,
 129 |         h: 0,
 130 |         s: 1
 131 |       },
 132 |       msg: '',
 133 |       msgStatus: false,
 134 |       msgTimer: null
 135 |     }
 136 |   },
 137 |   props: {
 138 |     accept: {
 139 |       type: String,
 140 |       default: 'image/png, image/jpeg, image/jpg, image/gif'
 141 |     },
 142 |     autoClip: { // 是否生成截图框
 143 |       type: Boolean,
 144 |       default: false
 145 |     },
 146 |     autoClipWidth: { // 截图框的宽度，最大不超过容器宽度，【默认容器宽度的80%】
 147 |       type: Number,
 148 |       default: 0
 149 |     },
 150 |     autoClipHeight: { // 截图框的高度，最大不超过容器的高度，【默认容器宽度的80%】
 151 |       type: Number,
 152 |       default: 0
 153 |     },
 154 |     canMove: { // 上传图片能否拖动
 155 |       type: Boolean,
 156 |       default: true
 157 |     },
 158 |     canMoveBox: { // 截图框能否拖动
 159 |       type: Boolean,
 160 |       default: true
 161 |     },
 162 |     dataUrlType: { // 输出图片数据的类型，默认Bolb
 163 |       type: String,
 164 |       default: 'blob'
 165 |     },
 166 |     fixed: { // 截图框是否开启固定宽高比。开启宽高比，若设置的宽高比例与宽高比不匹配，则按照宽高比计算高度
 167 |       type: Boolean,
 168 |       default: false
 169 |     },
 170 |     fixedNumber: { // 宽高比 w/h
 171 |       type: Array,
 172 |       default: () => {
 173 |         return [1, 1]
 174 |       }
 175 |     },
 176 |     fixedBox: { // 固定大小，禁止改变截图框大小
 177 |       type: Boolean,
 178 |       default: false
 179 |     },
 180 |     img: {
 181 |       type: [String, Blob, null, File],
 182 |       default: ''
 183 |     },
 184 |     isOriginalImg: { // 是否上传原图(启用裁剪时，上传原图无效)
 185 |       type: Boolean,
 186 |       default: false
 187 |     },
 188 |     maxWidth: { // 生成图片的最大宽度（启用裁剪或上传原图时最大宽度无效）
 189 |       type: Number,
 190 |       default: 600
 191 |     },
 192 |     maxHeight: { // 生成图片的最大高度（启用裁剪或上传原图时最大高度无效）
 193 |       type: Number,
 194 |       default: 600
 195 |     },
 196 |     outputSize: { // 输出图片压缩比
 197 |       type: Number,
 198 |       default: 1
 199 |     },
 200 |     outputType: { // 生成图片的格式，默认jpg(jpg需要传入jpeg)【jpeg、png、webp】
 201 |       type: String,
 202 |       default: 'jpeg'
 203 |     },
 204 |     theme: { // 样式风格
 205 |       type: String,
 206 |       default: 'rect'
 207 |     }
 208 |   },
 209 |   computed: {
 210 |     /* 计算截图框的尺寸数值 */
 211 |     clipSizeValue () {
 212 |       let w = this.boxSize.w === 0 ? (this.screenWidth * 0.8).toFixed(0) : this.boxSize.w
 213 |       let h = this.boxSize.h === 0 ? (this.screenWidth * 0.8).toFixed(0) : this.boxSize.h
 214 |       return `${w} x ${h}  ${this.imgScaleVal}%`
 215 |     },
 216 |     pictureType () {
 217 |       return this.accept.split(',').map(x => {
 218 |         return x.split('/')[1]
 219 |       })
 220 |     }
 221 |   },
 222 |   methods: {
 223 |     /*
 224 |     * 将File类型文件转变为dataURL字符串
 225 |     * @param: [file] [file类型文件]
 226 |     * @param: [fn] [回调函数，包含一个dataURL类型的参数]
 227 |     */
 228 |     filetoDataURL (file, fn) {
 229 |       let reader = new FileReader()
 230 |       reader.onload = function (e) {
 231 |         fn(e.target.result)
 232 |       }
 233 |       reader.readAsDataURL(file)
 234 |     },
 235 |     /*
 236 |     * 将一串dataURL转变为Image类型文件
 237 |     * @param: [dataUrl] [dataURL字符串]
 238 |     */
 239 |     dataURLtoImage (dataUrl) {
 240 |       return new Promise(resolve => {
 241 |         let img = new Image()
 242 |         img.onload = () => {
 243 |           resolve(img)
 244 |         }
 245 |         img.src = dataUrl
 246 |       })
 247 |     },
 248 |     /*
 249 |     * 将Canvas类型对象转换成Blob类型对象
 250 |     * @param: [canvas] [Canvas类型对象]
 251 |     * @param: [fn] [回调函数，包含一个Blob对象]
 252 |     */
 253 |     canvasResizetoFile (canvas, fn) {
 254 |       canvas.toBlob((blob) => {
 255 |         fn(blob)
 256 |       }, `image/${this.outputType}`, this.outputSize)
 257 |     },
 258 |     /*
 259 |     * 将Canvas对象转换成dataURL字符串
 260 |     * @param: [canvas] [Canvas类型对象]
 261 |     */
 262 |     canvasResizetoDataURL (canvas) {
 263 |       return canvas.toDataURL(`image/${this.outputType}`, this.outputSize)
 264 |     },
 265 |     /*
 266 |     * 将Image类型文件转换为Canvas类型对象
 267 |     * @param: [img] [图片]
 268 |     * @param: [sx] [开始剪切的x坐标位置]
 269 |     * @param: [sy] [开始剪切的y坐标位置]
 270 |     * @param: [imgWidth] [被裁减的图片宽度]
 271 |     * @param: [imgHeight] [被裁剪的图片高度]
 272 |     * @param: [clipWidth] [剪切图像的宽度，不传默认img宽度]
 273 |     * @param: [clipHeight] [剪切图像的高度，不传默认img高度]
 274 |     */
 275 |     imagetoCanvas (img, sx, sy, imgWidth, imgHeight, clipWidth, clipHeight) {
 276 |       let canvas = document.createElement('canvas')
 277 |       let ctx = canvas.getContext('2d')
 278 |       let cw = clipWidth ? clipWidth : img.width
 279 |       let ch = clipHeight ? clipHeight : img.height
 280 |       canvas.width = cw
 281 |       canvas.height = ch
 282 |       ctx.drawImage(img, sx, sy, imgWidth, imgHeight, 0, 0, cw, ch)
 283 |       return canvas
 284 |     },
 285 |     /*
 286 |     * 获取上传图片
 287 |     */
 288 |     getImg (e) {
 289 |       let files = e.target.files || e.dataTransfer.files
 290 |       if (files.length === 0) {
 291 |         return false
 292 |       }
 293 |       let file = files[0]
 294 |       this.imgName = file.name
 295 |       if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) { // 判断上传的是否是图片类型文件。几乎可以忽略此段代码
 296 |         this.msg = `图片类型必须是${this.pictureType.join('、')}中的一种`
 297 |         this.msgStatus = true
 298 |         clearTimeout(this.msgTimer)
 299 |         this.msgTimer = setTimeout(() => {
 300 |           this.msgStatus = false
 301 |           clearTimeout(this.msgTimer)
 302 |         }, 1500)
 303 |         return false
 304 |       }
 305 |       if (file) {
 306 |         this.fileToPreviewImage(file)
 307 |       }
 308 |     },
 309 |     /*
 310 |     * 生成预览图片，截图框
 311 |     * @param: [file] [上传图片]
 312 |     */
 313 |     fileToPreviewImage (file) {
 314 |       this.filetoDataURL(file, (dataUrl) => { // 转换成base64
 315 |         this.isRotate(dataUrl)
 316 |           .then(url => {
 317 |             this.clipImg = url
 318 |             this.dataURLtoImage(url)
 319 |               .then(image => { // 图片转换成image对象， 显示预览图片弹出层
 320 |                 this.image = image
 321 |                 let size = this.resizeSizeImg(image, this.screenWidth, this.screenHeight) // 计算图片尺寸、缩放
 322 |                 extend(this.imgSize, size)
 323 |                 this.$nextTick(() => {
 324 |                   this.imgScaleVal = (this.imgSize.s * 100).toFixed(0) // 默认图片缩放百分比
 325 |                   this.toClipPopup(image)
 326 |                   this.showPopup = true
 327 |                 })
 328 |               })
 329 |           })
 330 |       })
 331 |     },
 332 |     /* 
 333 |     * 根据exif信息，判断图片是否需要旋转，旋转图片
 334 |     * @param: [dataUrl] [图片的base64数据]
 335 |     */
 336 |     isRotate (dataUrl) {
 337 |       return new Promise(reslove => {
 338 |         let orientation = this.getOrientation(dataUrl) || 1 // 获取图片exif旋转角度
 339 |         if (orientation && orientation !== 1) { // 1:旋转0°，3:旋转180°，6:顺时针90°，8:逆时针90°
 340 |           this.dataURLtoImage(dataUrl)
 341 |             .then(image => {
 342 |               let canvas = document.createElement('canvas')
 343 |               let ctx = canvas.getContext('2d')
 344 |               let x = 0
 345 |               let y = 0
 346 |               ctx.save()
 347 |               switch(orientation) {
 348 |                 case 3:
 349 |                   canvas.width = image.width
 350 |                   canvas.height = image.height
 351 |                   ctx.rotate(Math.PI)
 352 |                   x = -image.width
 353 |                   y = -image.height
 354 |                   break
 355 |                 case 6:
 356 |                   canvas.width = image.height
 357 |                   canvas.height = image.width
 358 |                   ctx.rotate(90 * Math.PI / 180)
 359 |                   y = -image.height
 360 |                   break
 361 |                 case 8:
 362 |                   canvas.width = image.height
 363 |                   canvas.height = image.width
 364 |                   ctx.rotate(-90 * Math.PI / 180)
 365 |                   x = -image.width
 366 |                   break
 367 |                 default:
 368 |                   canvas.width = image.width
 369 |                   canvas.height = image.height
 370 |               }
 371 |               ctx.drawImage(image, x, y)
 372 |               ctx.restore()
 373 |               reslove(this.canvasResizetoDataURL(canvas))
 374 |             })
 375 |         } else {
 376 |           reslove(dataUrl)
 377 |         }
 378 |       })
 379 |     },
 380 |     /* 获取图片exif要将图片转换成ArrayBuffer对象， base64转换ArrayBuffer对象 */
 381 |     base64ToArrayBuffer (dataUrl) {
 382 |       dataUrl = dataUrl.replace(/^data\:([^\;]+)\;base64,/gmi, '')
 383 |       let binary = atob(dataUrl)
 384 |       let len = binary.length
 385 |       let buffer = new ArrayBuffer(len)
 386 |       let view = new Uint8Array(buffer)
 387 |       for (let i = 0; i < len; i++) {
 388 |         view[i] = binary.charCodeAt(i)
 389 |       }
 390 |       return buffer
 391 |     },
 392 |     /*
 393 |     * Unicode码转字符串
 394 |     * ArrayBuffer对象，Unicode码转字符串
 395 |     */
 396 |     getStringFromCharCode (dataView, start, length) {
 397 |       let str = ''
 398 |       let i
 399 |       for (i = start, length += start; i < length; i++) {
 400 |         str += String.fromCharCode(dataView.getUint8(i))
 401 |       }
 402 |       return str
 403 |     },
 404 |     /*
 405 |     * 获取jpg图片的exif角度（在ios体现最明显）
 406 |     * @param: [dataUrl] [图片的base64数据]
 407 |     */
 408 |     getOrientation (dataUrl) {
 409 |       let arrayBuffer = this.base64ToArrayBuffer(dataUrl)
 410 |       let dataView = new DataView(arrayBuffer)
 411 |       let length = dataView.byteLength
 412 |       let orientation
 413 |       let exifIDCode
 414 |       let tiffOffest
 415 |       let firstIFDOffest
 416 |       let littleEndian
 417 |       let endianness
 418 |       let app1Start
 419 |       let ifdStart
 420 |       let offset
 421 |       let i
 422 |       // Only handle JPEG image (start by 0xFFD8)
 423 |       if (dataView.getUint8(0) === 0xFF && dataView.getUint8(1) === 0xD8) {
 424 |         offset = 2
 425 |         while (offset < length) {
 426 |           if (dataView.getUint8(offset) === 0xFF && dataView.getUint8(offset + 1) === 0xE1) {
 427 |             app1Start = offset
 428 |             break
 429 |           }
 430 |           offset++
 431 |         }
 432 |       }
 433 |       if (app1Start) {
 434 |         exifIDCode = app1Start + 4
 435 |         tiffOffest = app1Start + 10
 436 |         if (this.getStringFromCharCode(dataView, exifIDCode, 4) === 'Exif') {
 437 |           endianness = dataView.getUint16(tiffOffest)
 438 |           littleEndian = endianness === 0x4949
 439 |           if (littleEndian || endianness === 0x4d4d /* bigEndian */) {
 440 |             if (dataView.getUint16(tiffOffest + 2, littleEndian) === 0x002A) {
 441 |               firstIFDOffest = dataView.getUint32(tiffOffest + 4, littleEndian)
 442 |               if (firstIFDOffest >= 0x00000008) {
 443 |                 ifdStart = tiffOffest + firstIFDOffest
 444 |               }
 445 |             }
 446 |           }
 447 |         }
 448 |       }
 449 |       if (ifdStart) {
 450 |         length = dataView.getUint16(ifdStart, littleEndian)
 451 |         for (i = 0; i < length; i++) {
 452 |           offset = ifdStart + i * 12 + 2
 453 |           if (dataView.getUint16(offset, littleEndian) === 0x0112 /* Orientation */) {
 454 |             // 8 is the offset of the current tag's value
 455 |             offset += 8
 456 |             // Get the original orientation value
 457 |             orientation = dataView.getUint16(offset, littleEndian)
 458 |             // Override the orientation with its default value for Safari (#120)
 459 |             // if (IS_SAFARI_OR_UIWEBVIEW) {
 460 |             //   dataView.setUint16(offset, 1, littleEndian)
 461 |             // }
 462 |             break
 463 |           }
 464 |         }
 465 |       }
 466 |       return orientation
 467 |     },
 468 |     /* 取消上传图片 */
 469 |     cancel () {
 470 |       this.showPopup = false
 471 |       this.$refs.uploadImg.value = ''
 472 |     },
 473 |     /* 完成上传图片 */
 474 |     finish () {
 475 |       let canvas = null
 476 |       if (this.autoClip) { // 按截图框裁剪图片
 477 |         canvas = this.imagetoCanvas(
 478 |           this.image,
 479 |           ((this.boxSize.x - this.imgSize.x) - (this.image.width * (1 - this.imgSize.s)) / 2) / this.imgSize.s,
 480 |           ((this.boxSize.y - this.imgSize.y) - (this.image.height * (1 - this.imgSize.s)) / 2) / this.imgSize.s,
 481 |           this.boxSize.w / this.imgSize.s,
 482 |           this.boxSize.h / this.imgSize.s,
 483 |           this.boxSize.w,
 484 |           this.boxSize.h
 485 |         )
 486 |       } else {
 487 |         let size = this.resizeSizeImg(this.image, this.maxWidth, this.maxHeight)
 488 |         canvas = this.imagetoCanvas(this.image, 0, 0, this.image.width, this.image.height, size.w, size.h)
 489 |       }
 490 |       if (this.dataUrlType === 'blob') {
 491 |         this.canvasResizetoFile(canvas, (blob) => {
 492 |           this.imgUrl = URL.createObjectURL(blob)
 493 |           this.$emit('finish', this.imgName, blob)
 494 |         })
 495 |       } else {
 496 |         let url = this.canvasResizetoDataURL(canvas)
 497 |         this.imgUrl = url
 498 |         this.$emit('finish', this.imgName, url)
 499 |       }
 500 |       this.$refs.uploadImg.value = ''
 501 |       this.showPopup = false
 502 |     },
 503 |     /*
 504 |     * 计算图片等比压缩尺寸
 505 |     * @param: [img] [图片]
 506 |     * @param: [maxWidth] [最大宽度]
 507 |     * @param: [maxHeight] [最大高度]
 508 |     */
 509 |     resizeSizeImg (img, maxWidth, maxHeight) {
 510 |       let width = img.width
 511 |       let height = img.height
 512 |       let imgInfo = {
 513 |         x: (maxWidth - width) / 2,
 514 |         y: (maxHeight - height) / 2,
 515 |         w: width,
 516 |         h: height,
 517 |         s: 1
 518 |       }
 519 |       if ((imgInfo.w < maxWidth && imgInfo.h < maxHeight) || this.isOriginalImg) {
 520 |         console.log(this.isOriginalImg)
 521 |         return imgInfo
 522 |       }
 523 |       let scale = parseFloat(imgInfo.w / imgInfo.h) // 计算宽高比
 524 |       let sizeByMw = { // 按照宽等比计算高
 525 |         x: (maxWidth - width) / 2,
 526 |         y: (maxHeight - height) / 2,
 527 |         w: maxWidth,
 528 |         h: parseInt(maxWidth / scale),
 529 |         s: maxWidth / width
 530 |       }
 531 |       let sizeByMh = { // 按照高等比计算宽
 532 |         x: (maxWidth - width) / 2,
 533 |         y: (maxHeight - height) / 2,
 534 |         w: parseInt(maxHeight * scale),
 535 |         h: maxHeight,
 536 |         s: maxHeight / height
 537 |       }
 538 |       if (sizeByMw.h <= maxHeight) {
 539 |         return sizeByMw
 540 |       }
 541 |       if (sizeByMh.w <= maxWidth) {
 542 |         return sizeByMh
 543 |       }
 544 |       return {
 545 |         x: 0,
 546 |         y: 0,
 547 |         w: maxWidth,
 548 |         h: maxHeight,
 549 |         s: maxWidth / width
 550 |       }
 551 |     },
 552 |     /*
 553 |     * 生成截图弹出层
 554 |     * @param: [image] [图片对象]
 555 |     */
 556 |     toClipPopup (image) {
 557 |       let element = this.$refs.image
 558 |       this.imgSize.w = image.width
 559 |       this.imgSize.h = image.height
 560 |       this.setElementStyle(element, this.imgSize)
 561 |       if (this.autoClip) {
 562 |         this.setClipBoxSize()
 563 |       }
 564 |     },
 565 |     /*
 566 |     * 计算截图框的尺寸、位置
 567 |     */
 568 |     setClipBoxSize () {
 569 |       let scale = this.fixedNumber[0] / this.fixedNumber[1]
 570 |       this.clipWidth = this.autoClipWidth === 0 ? parseInt(this.screenWidth * 0.8) : this.autoClipWidth
 571 |       this.clipHeight = this.autoClipHeight === 0 ? parseInt(this.screenWidth * 0.8 / scale) : this.fixed ? parseInt(this.autoClipWidth / scale) : this.autoClipHeight
 572 |       let size = {
 573 |         x: (this.screenWidth - this.clipWidth) / 2,
 574 |         y: (this.screenHeight - this.clipHeight) / 2,
 575 |         w: this.clipWidth,
 576 |         h: this.clipHeight,
 577 |         s: 1
 578 |       }
 579 |       extend(this.boxSize, size)
 580 |       this.clipBoxStyle()
 581 |     },
 582 |     /*
 583 |     * 设置截图框尺寸、位置、缩放
 584 |     */
 585 |     clipBoxStyle () {
 586 |       this.$nextTick(() => {
 587 |         this.setElementStyle(this.$refs.clipBox, this.boxSize)
 588 |         this.clipBoxImgSize()
 589 |       })
 590 |     },
 591 |     /*
 592 |     * 设置截图框内的图片尺寸、相对截图框的位置
 593 |     */
 594 |     clipBoxImgSize () {
 595 |       let size = {
 596 |         x: this.imgSize.x - this.boxSize.x,
 597 |         y: this.imgSize.y - this.boxSize.y,
 598 |         w: this.imgSize.w,
 599 |         h: this.imgSize.h,
 600 |         s: this.imgSize.s
 601 |       }
 602 |       this.setElementStyle(this.$refs.clipImage, size)
 603 |     },
 604 |     /* 给元素添加样式，尺寸、位置 */
 605 |     setElementStyle (image, size) {
 606 |       image.style.width = `${size.w}px`
 607 |       image.style.height = `${size.h}px`
 608 |       image.style.transform = `translate3d(${size.x}px, ${size.y}px, 0) scale(${size.s}, ${size.s})`
 609 |     },
 610 |     /* 图片缩放 */
 611 |     imageScale (e) {
 612 |       this.imgSize.s = e.target.value / 100
 613 |       this.$nextTick(() => {
 614 |         let element = this.$refs.image
 615 |         this.setElementStyle(element, this.imgSize)
 616 |         this.clipBoxStyle(this.image)
 617 |       })
 618 |     },
 619 |     /* 开始移动图片 */
 620 |     startMove (e) {
 621 |       e.preventDefault()
 622 |       if (!this.canMove) {
 623 |         return false
 624 |       }
 625 |       let touch = e.touches ? e.touches[0] : e
 626 |       this.moveX = this.imgSize.x - touch.clientX
 627 |       this.moveY = this.imgSize.y - touch.clientY
 628 |       window.addEventListener('mousemove', this.moveImg)
 629 |       window.addEventListener('mouseup', this.leaveImg)
 630 |       window.addEventListener('touchmove', this.moveImg)
 631 |       window.addEventListener('touchend', this.leaveImg)
 632 |     },
 633 |     /* 移动图片 */
 634 |     moveImg (e) {
 635 |       let touch = e.touches ? e.touches[0] : e
 636 |       let nowX = touch.clientX
 637 |       let nowY = touch.clientY
 638 |       let changeX = nowX + this.moveX
 639 |       let changeY = nowY + this.moveY
 640 |       this.imgSize.x = changeX
 641 |       this.imgSize.y = changeY
 642 |       this.$nextTick(() => {
 643 |         this.setElementStyle(this.$refs.image, this.imgSize)
 644 |         this.clipBoxImgSize()
 645 |       })
 646 |     },
 647 |     /* 移动图片结束 */
 648 |     leaveImg (e) {
 649 |       window.removeEventListener('mousemove', this.moveImg)
 650 |       window.removeEventListener('mouseup', this.leaveImg)
 651 |       window.removeEventListener('touchmove', this.moveImg)
 652 |       window.removeEventListener('touchend', this.leaveImg)
 653 |     },
 654 |     /* 裁剪框移动 */
 655 |     clipMove (e) {
 656 |       e.preventDefault()
 657 |       if (!this.canMoveBox) {
 658 |         return false
 659 |       }
 660 |       let touch = e.touches ? e.touches[0] : e
 661 |       this.clipMoveX = this.boxSize.x - touch.clientX
 662 |       this.clipMoveY = this.boxSize.y - touch.clientY
 663 |       this.clipWidth = this.boxSize.w
 664 |       this.clipHeight = this.boxSize.h
 665 |       window.addEventListener('mousemove', this.moveClip)
 666 |       window.addEventListener('mouseup', this.leaveClip)
 667 |       window.addEventListener('touchmove', this.moveClip)
 668 |       window.addEventListener('touchend', this.leaveClip)
 669 |     },
 670 |     /* 移动截图框 */
 671 |     moveClip (e) {
 672 |       let touch = e.touches ? e.touches[0] : e
 673 |       let nowX = touch.clientX
 674 |       let nowY = touch.clientY
 675 |       let changeX = nowX + this.clipMoveX
 676 |       let changeY = nowY + this.clipMoveY
 677 |       // 不能超过外层容器
 678 |       if (changeX < 0) {
 679 |         this.boxSize.x = 0
 680 |       } else if (changeX > (this.screenWidth - this.clipWidth)) {
 681 |         this.boxSize.x = this.screenWidth - this.clipWidth
 682 |       } else {
 683 |         this.boxSize.x = changeX
 684 |       }
 685 |       if (changeY < 25) {
 686 |         this.boxSize.y = 25
 687 |       } else if (changeY > (this.screenHeight - this.clipHeight)) {
 688 |         this.boxSize.y = this.screenHeight - this.clipHeight
 689 |       } else {
 690 |         this.boxSize.y = changeY
 691 |       }
 692 |       this.clipBoxStyle()
 693 |     },
 694 |     /* 截图框移动结束 */
 695 |     leaveClip () {
 696 |       window.removeEventListener('mousemove', this.moveClip)
 697 |       window.removeEventListener('mouseup', this.leaveClip)
 698 |       window.removeEventListener('touchmove', this.moveClip)
 699 |       window.removeEventListener('touchend', this.leaveClip)
 700 |     },
 701 |     /*
 702 |     * 改变截图框大小
 703 |     * @param: [x] [Boolean] [是否能改变坐标轴x]
 704 |     * @param: [y] [Boolean] [是否能改变坐标轴y]
 705 |     * @param: [typeX] [Number] [0:不变、1:截图框左边变化、2：截图框右边变化]
 706 |     * @Param: [typeY] [Number] [0:不变、1:截图框上边变化、2：截图框下边变化]
 707 |     */
 708 |     changeClipSize (e, x, y, typeX, typeY) {
 709 |       e.preventDefault()
 710 |       window.addEventListener('mousemove', this.changeClipNow)
 711 |       window.addEventListener('mouseup', this.changeClipEnd)
 712 |       window.addEventListener('touchmove', this.changeClipNow)
 713 |       window.addEventListener('touchend', this.changeClipEnd)
 714 |       let touch = e.touches ? e.touches[0] : e
 715 |       this.canChangeX = x
 716 |       this.canChangeY = y
 717 |       this.changeClipTypeX = typeX
 718 |       this.changeClipTypeY = typeY
 719 |       this.clipMoveX = touch.clientX
 720 |       this.clipMoveY = touch.clientY
 721 |       this.clipOldX = parseInt(this.boxSize.x)
 722 |       this.clipOldY = parseInt(this.boxSize.y)
 723 |       this.clipWidth = parseInt(this.boxSize.w)
 724 |       this.clipHeight = parseInt(this.boxSize.h)
 725 |       if (this.fixed) {
 726 |         if (x && y) {
 727 |           this.canChangeY = 0
 728 |         }
 729 |       }
 730 |     },
 731 |     /* 正在改变截图框大小 */
 732 |     changeClipNow (e) {
 733 |       let touch = e.touches ? e.touches[0] : e
 734 |       let changeX = parseInt(touch.clientX - this.clipMoveX)
 735 |       let changeY = parseInt(touch.clientY - this.clipMoveY)
 736 |       let maxW = this.screenWidth // 容器的宽度
 737 |       let maxH = this.screenHeight // 容器的高度
 738 |       if (this.canChangeX) { // x轴可变
 739 |         if (this.changeClipTypeX === 1) { // 以右边框为基准
 740 |           let w = this.clipWidth - changeX
 741 |           let x = this.clipOldX + changeX
 742 |           if (w > 0) {
 743 |             this.boxSize.x = x > 0 ? x : 0
 744 |             this.boxSize.w = x > 0 ? w : this.clipWidth + this.clipOldX
 745 |           } else {
 746 |             this.boxSize.x = this.clipWidth + this.clipOldX
 747 |             this.boxSize.w = x > maxW ? maxW - this.boxSize.x : Math.abs(w)
 748 |           }
 749 |         } else if (this.changeClipTypeX === 2) { // 以左边框为基准
 750 |           let w = this.clipWidth + changeX
 751 |           let x = this.clipOldX - Math.abs(w)
 752 |           if (w > 0) {
 753 |             this.boxSize.x = this.clipOldX
 754 |             this.boxSize.w = (w + this.clipOldX) > maxW ? maxW - this.clipOldX : w
 755 |           } else {
 756 |             this.boxSize.x = x > 0 ? x : 0
 757 |             this.boxSize.w = x > 0 ? Math.abs(w) : this.clipOldX
 758 |           }
 759 |         }
 760 |       }
 761 |       if (this.canChangeY) { // y轴方向可变
 762 |         if (this.changeClipTypeY === 1) { // 以下边框为基准 25为y轴预留的最小距离
 763 |           let y = this.clipOldY + changeY
 764 |           let h = this.clipHeight - changeY
 765 |           if (h > 0) {
 766 |             this.boxSize.y = y > 25 ? y : 25
 767 |             this.boxSize.h = y > 25 ? h : this.clipHeight + this.clipOldY - 25
 768 |           } else {
 769 |             this.boxSize.y =  this.clipHeight + this.clipOldY
 770 |             this.boxSize.h = y > maxH ? maxH - this.boxSize.y : Math.abs(h)
 771 |           }
 772 |         } else if (this.changeClipTypeY === 2) { // 以上边框为基准
 773 |           let h = this.clipHeight + changeY
 774 |           let y = this.clipOldY - Math.abs(h)
 775 |           if (h > 0) { // 判断移动下边框，是否超出截图框的上边框
 776 |             this.boxSize.y = this.clipOldY
 777 |             this.boxSize.h = (this.clipOldY + h) > maxH ? maxH - this.clipOldY : h
 778 |           } else {
 779 |             this.boxSize.y = y > 25 ? y : 25
 780 |             this.boxSize.h = y > 25 ? Math.abs(h) : this.clipOldY - 25
 781 |           }
 782 |         }
 783 |       }
 784 |       // 等比缩放
 785 |       let scale = this.fixedNumber[0] / this.fixedNumber[1]
 786 |       if (this.canChangeX && this.fixed) {
 787 |         let fixedHeight = this.boxSize.w / scale
 788 |         if (fixedHeight + this.clipOldY > maxH) {
 789 |           this.boxSize.h = maxH - this.clipOldY
 790 |           this.boxSize.w = this.boxSize.h * scale
 791 |         } else {
 792 |           this.boxSize.h = fixedHeight
 793 |         }
 794 |       }
 795 |       if (this.canChangeY && this.fixed) {
 796 |         let fixedWidth = this.boxSize.h * scale
 797 |         if (fixedWidth + this.clipOldX > maxW) {
 798 |           this.boxSize.w = maxW - this.clipOldX
 799 |           this.boxSize.h = this.boxSize.w / scale
 800 |         } else {
 801 |           this.boxSize.w = fixedWidth
 802 |         }
 803 |       }
 804 |       this.clipBoxStyle()
 805 |     },
 806 |     /* 结束改变截图框大小 */
 807 |     changeClipEnd () {
 808 |       window.removeEventListener('mousemove', this.changeClipNow)
 809 |       window.removeEventListener('mouseup', this.changeClipEnd)
 810 |       window.removeEventListener('touchmove', this.changeClipNow)
 811 |       window.removeEventListener('touchend', this.changeClipEnd)
 812 |     }
 813 |   }
 814 | }
 815 | </script>
 816 | 
 817 | <style lang="css" scoped>
 818 | @font-face {
 819 |   font-family: 'iconfont';  /* project id 953300 */
 820 |   src: url('//at.alicdn.com/t/font_953300_clegio409me.eot');
 821 |   src: url('//at.alicdn.com/t/font_953300_clegio409me.eot?#iefix') format('embedded-opentype'),
 822 |   url('//at.alicdn.com/t/font_953300_clegio409me.woff') format('woff'),
 823 |   url('//at.alicdn.com/t/font_953300_clegio409me.ttf') format('truetype'),
 824 |   url('//at.alicdn.com/t/font_953300_clegio409me.svg#iconfont') format('svg');
 825 | }
 826 | .clip {
 827 |   position: relative;
 828 |   width: 100%;
 829 |   height: 100%;
 830 | }
 831 | .clip .icon,
 832 | .clip > input {
 833 |   position: absolute;
 834 |   top: 0;
 835 |   left: 0;
 836 |   right: 0;
 837 |   bottom: 0;
 838 |   z-index: 10;
 839 | }
 840 | .clip .picture {
 841 |   display: -webkit-flex;
 842 |   display: flex;
 843 |   -webkit-align-items: center;
 844 |   align-items: center;
 845 |   -webkit-justify-content: center;
 846 |   justify-content: center;
 847 |   position: absolute;
 848 |   top: 0;
 849 |   right: 0;
 850 |   width: 100%;
 851 |   height: 100%;
 852 |   z-index: 20;
 853 | }
 854 | .clip .picture img {
 855 |   max-width: 100%;
 856 |   max-height: 100%;
 857 | }
 858 | .clip > input {
 859 |   width: 100%;
 860 |   opacity: 0;
 861 |   z-index: 30;
 862 | }
 863 | .clip .icon {
 864 |   text-align: center;
 865 |   border: 2px solid rgba(0, 0, 0, .1);
 866 | }
 867 | .clip .icon i {
 868 |   display: -webkit-flex;
 869 |   display: flex;
 870 |   -webkit-align-items: center;
 871 |   align-items: center;
 872 |   -webkit-justify-content: center;
 873 |   justify-content: center;
 874 |   height: 100%;
 875 | }
 876 | .clip .icon i:before {
 877 |   content: "\e641";
 878 |   display: block;
 879 |   font-size: 30px;
 880 |   font-family: "iconfont";
 881 |   line-height: 100%;
 882 |   color: rgba(0, 0, 0, .1);
 883 | }
 884 | .clip .msg {
 885 |   position: fixed;
 886 |   top: 50%;
 887 |   left: 50%;
 888 |   z-index: 30;
 889 |   padding: 5px 20px;
 890 |   border-radius: 5px;
 891 |   -webkit-border-radius: 5px;
 892 |   transform: translate(-50%, -50%);
 893 |   -webkit-transform:  translate(-50%, -50%);
 894 |   color: #fff;
 895 |   text-align: center;
 896 |   background: rgba(0, 0, 0, .7);
 897 | }
 898 | .rect .icon i {
 899 |   height: 80%;
 900 | }
 901 | .rect .icon i:before {
 902 |   content: "\e641";
 903 |   line-height: 42px;
 904 | }
 905 | .rect p {
 906 |   margin-top: -8px;
 907 |   font-size: 12px;
 908 |   color: #666;
 909 |   text-align: center;
 910 | }
 911 | .circle .icon,
 912 | .circle .picture {
 913 |   border-radius: 50%;
 914 |   -webkit-border-radius: 50%;
 915 | }
 916 | .circle .picture {
 917 |   overflow: hidden;
 918 | }
 919 | .circle .icon i:before {
 920 |   content: "\e6da";
 921 |   font-size: 30px;
 922 | }
 923 | .popup {
 924 |   position: fixed;
 925 |   top: 0;
 926 |   left: 0;
 927 |   right: 0;
 928 |   bottom: 0;
 929 |   z-index: 20181211;
 930 |   background: rgba(0, 0, 0, .7);
 931 | }
 932 | .popup .button {
 933 |   display: -webkit-flex;
 934 |   display: flex;
 935 |   -webkit-align-items: center;
 936 |   align-items: center;
 937 |   -webkit-justify-content: center;
 938 |   justify-content: center;
 939 |   position: absolute;
 940 |   bottom: 0;
 941 |   left: 0;
 942 |   z-index: 20;
 943 |   width: 100%;
 944 |   height: 48px;
 945 |   text-align: center;
 946 |   background: rgba(255, 255, 255, 1);
 947 | }
 948 | .popup button {
 949 |   -webkit-tap-highlight-color: transparent;
 950 |   outline: none;
 951 |   display: inline-block;
 952 |   width: 40%;
 953 |   height: 38px;
 954 |   margin: 0 5%;
 955 |   border: 0;
 956 |   border-radius: 5px;
 957 |   color: #fff;
 958 |   background: rgba(50, 135, 255, .7);
 959 | }
 960 | .clip-popup {
 961 |   background: none;
 962 | }
 963 | .clip-popup .clip-box,
 964 | .clip-popup .clip-move,
 965 | .clip-popup .popup-move {
 966 |   position: absolute;
 967 |   top: 0;
 968 |   right: 0;
 969 |   bottom: 0;
 970 |   left: 0;
 971 | }
 972 | .clip-popup .popup-move {
 973 |   background: rgba(0, 0, 0, .5);
 974 |   z-index: 18;
 975 | }
 976 | .clip-popup .clip-box {
 977 |   z-index: 20;
 978 | }
 979 | .clip-popup .clip-view {
 980 |   display: block;
 981 |   width: 100%;
 982 |   height: 100%;
 983 |   overflow: hidden;
 984 |   outline: 1px solid rgba(50, 135, 255, 1.0);
 985 | }
 986 | .clip-popup .clip-move {
 987 |   background: rgba(255, 255, 255, .1);
 988 |   z-index: 21;
 989 | }
 990 | .clip-popup .clip-info {
 991 |   display: block;
 992 |   position: absolute;
 993 |   top: -26px;
 994 |   left: 12px;
 995 |   width: 112px;
 996 |   height: 25px;
 997 |   padding: 2px 5px;
 998 |   background: rgba(0, 0, 0, .8);
 999 |   color: #fff;
1000 | }
1001 | .clip-popup .clip-line {
1002 |   position: absolute;
1003 |   display: block;
1004 |   width: 100%;
1005 |   height: 100%;
1006 |   z-index: 25;
1007 | }
1008 | .clip-popup .line-t {
1009 |   top: -5px;
1010 |   height: 10px;
1011 | }
1012 | .clip-popup .line-r {
1013 |   top: 0;
1014 |   right: -5px;
1015 |   width: 10px;
1016 | }
1017 | .clip-popup .line-b {
1018 |   bottom: -5px;
1019 |   height: 10px;
1020 | }
1021 | .clip-popup .line-l {
1022 |   top: 0;
1023 |   left: -5px;
1024 |   width: 10px;
1025 | }
1026 | .clip-popup .clip-point {
1027 |   position: absolute;
1028 |   display: block;
1029 |   width: 16px;
1030 |   height: 16px;
1031 |   z-index: 26;
1032 | }
1033 | .clip-popup .point-tr {
1034 |   top: -3px;
1035 |   right: -3px;
1036 |   border-top: 3px solid rgba(50, 135, 255, 1.0);
1037 |   border-right: 3px solid rgba(50, 135, 255, 1.0);
1038 | }
1039 | .clip-popup .point-br {
1040 |   bottom: -3px;
1041 |   right: -3px;
1042 |   border-right: 3px solid rgba(50, 135, 255, 1.0);
1043 |   border-bottom: 3px solid rgba(50, 135, 255, 1.0);
1044 | }
1045 | .clip-popup .point-tl {
1046 |   top: -3px;
1047 |   left: -3px;
1048 |   border-top: 3px solid rgba(50, 135, 255, 1.0);
1049 |   border-left: 3px solid rgba(50, 135, 255, 1.0);
1050 | }
1051 | .clip-popup .point-bl {
1052 |   bottom: -3px;
1053 |   left: -3px;
1054 |   border-bottom: 3px solid rgba(50, 135, 255, 1.0);
1055 |   border-left: 3px solid rgba(50, 135, 255, 1.0);
1056 | }
1057 | .clip-popup .range {
1058 |   display: -webkit-flex;
1059 |   display: flex;
1060 |   -webkit-align-items: center;
1061 |   align-items: center;
1062 |   -webkit-justify-content: center;
1063 |   justify-content: center;
1064 |   position: absolute;
1065 |   bottom: 48px;
1066 |   left: 0;
1067 |   z-index: 30;
1068 |   width: 100%;
1069 |   height: 30px;
1070 |   padding: 0 50px;
1071 | }
1072 | .clip-popup .range input[type="range"] {
1073 |   -webkit-box-flex: 1;
1074 |   -webkit-flex: 1;
1075 |   flex: 1;
1076 |   display: block;
1077 |   margin: 0 20px;
1078 |   height: 3px;
1079 |   border-radius: 2px;
1080 |   background: rgba(255, 255, 255, .8);
1081 |   -webkit-appearance: none;
1082 | }
1083 | .clip-popup .range input[type=range]::-webkit-slider-thumb {
1084 |   width: 16px;
1085 |   height: 16px;
1086 |   border-radius: 50%;
1087 |   border: none;
1088 |   box-shadow: 0px 0px 3px rgba(255, 255, 255, 1.0);
1089 |   background: rgba(50, 135, 255, 1.0);
1090 |   -webkit-appearance: none;
1091 | }
1092 | .clip-popup .range span {
1093 |   color: #fff;
1094 | }
1095 | /* 弹框切换放大渐变 */
1096 | .opacity-enter-active,
1097 | .opacity-leave-active {
1098 |   -webkit-transition:  all .3s;
1099 |   transition: all .3s;
1100 | }
1101 | .opacity-enter,
1102 | .opacity-leave-to {
1103 |   opacity: 0;
1104 | }
1105 | </style>
1106 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const path = require('path')
 3 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | const CleanWebpackPlugin = require('clean-webpack-plugin')
 5 | const VueLoaderPlugin = require('vue-loader/lib/plugin')
 6 | 
 7 | module.exports = {
 8 |   mode: 'production',
 9 |   entry: './example/main.js',
10 |   performance: {
11 |     hints: false
12 |   },
13 |   devServer: {
14 |     contentBase: './docs'
15 |   },
16 |   output: {
17 |     filename: '[name].bundle.js',
18 |     path: path.resolve(__dirname, 'docs')
19 |   },
20 |   resolve: {
21 |     extensions: ['.js', '.vue'],
22 |     alias: {
23 |       'vue$': 'vue/dist/vue.esm.js'
24 |     }
25 |   },
26 |   module: {
27 |     rules: [
28 |       {
29 |         test: /\.m?js$/,
30 |         exclude: /(node_modules|bower_components)/,
31 |         use: {
32 |           loader: 'babel-loader',
33 |           options: {
34 |             presets: ['@babel/preset-env'],
35 |             plugins: ['@babel/plugin-transform-runtime']
36 |           }
37 |         }
38 |       },
39 |       {
40 |         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
41 |         loader: 'url-loader',
42 |         options: {
43 |           limit: 10000,
44 |           name: path.posix.join('img/[name].[hash:7].[ext]')
45 |         }
46 |       },
47 |       {
48 |         test: /\.css$/,
49 |         use: [
50 |           'style-loader',
51 |           'css-loader'
52 |         ]
53 |       },
54 |       {
55 |         test: /\.vue$/,
56 |         loader: 'vue-loader'
57 |       }
58 |     ]
59 |   },
60 |   plugins: [
61 |     new CleanWebpackPlugin(['docs']),
62 |     new HtmlWebpackPlugin({
63 |       template: 'index.html',
64 |       inject: true, // js插入位置
65 |     }),
66 |     new VueLoaderPlugin()
67 |   ]
68 | }
69 | 


--------------------------------------------------------------------------------
/webpack.prod.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const path = require('path')
 3 | const CleanWebpackPlugin = require('clean-webpack-plugin')
 4 | const VueLoaderPlugin = require('vue-loader/lib/plugin')
 5 | 
 6 | module.exports = {
 7 |   mode: 'production',
 8 |   entry: './src/index.js',
 9 |   performance: {
10 |     hints: false
11 |   },
12 |   output: {
13 |     path: path.resolve(__dirname, './dist'),
14 |     filename: 'vue-pic-clip.min.js',
15 |     library: 'Vue-pic-clip',
16 |     libraryTarget: 'umd',
17 |     umdNamedDefine: true
18 |   },
19 |   resolve: {
20 |     extensions: ['.js', '.vue'],
21 |     alias: {
22 |       'vue$': 'vue/dist/vue.esm.js'
23 |     }
24 |   },
25 |   module: {
26 |     rules: [
27 |       {
28 |         test: /\.m?js$/,
29 |         exclude: /(node_modules|bower_components)/,
30 |         use: {
31 |           loader: 'babel-loader',
32 |           options: {
33 |             presets: ['@babel/preset-env'],
34 |             plugins: ['@babel/plugin-transform-runtime']
35 |           }
36 |         }
37 |       },
38 |       {
39 |         test: /\.css$/,
40 |         use: [
41 |           'style-loader',
42 |           'css-loader'
43 |         ]
44 |       },
45 |       {
46 |         test: /\.vue$/,
47 |         loader: 'vue-loader'
48 |       }
49 |     ]
50 |   },
51 |   plugins: [
52 |     new CleanWebpackPlugin(['dist']),
53 |     new VueLoaderPlugin()
54 |   ]
55 | }
56 | 


--------------------------------------------------------------------------------