From 230afe7866938ca0d31c3859e0d18e38668db609 Mon Sep 17 00:00:00 2001 From: JackPu Date: Wed, 3 May 2017 16:19:44 +0800 Subject: [PATCH] add new version --- README.md | 229 +++++++------ README_CN.md | 126 -------- index.js | 2 +- package.json | 10 +- site/client/components/Footer.vue | 12 +- site/client/components/NavList.vue | 3 +- .../components/doc/cn/CompressImage.vue | 2 +- site/client/components/doc/cn/CropImage.vue | 4 +- site/client/components/doc/cn/Events.vue | 4 +- site/client/components/doc/cn/GetStarted.vue | 2 +- site/client/components/doc/cn/Home.vue | 5 +- .../client/components/doc/cn/MultipleFile.vue | 4 +- site/client/components/doc/cn/Others.vue | 2 +- site/client/components/doc/cn/PostData.vue | 6 +- .../components/doc/en/CompressImage.vue | 2 +- site/client/components/doc/en/CropImage.vue | 4 +- site/client/components/doc/en/Events.vue | 2 +- site/client/components/doc/en/GetStarted.vue | 4 +- site/client/components/doc/en/Home.vue | 13 +- .../client/components/doc/en/MultipleFile.vue | 4 +- site/client/components/doc/en/Others.vue | 2 +- site/client/components/doc/en/PostData.vue | 6 +- site/client/lib/constants.js | 2 +- site/package.json | 1 + site/src/demo/index.js | 45 --- site/src/index.js | 2 - site/src/lib/drag.js | 29 -- site/src/lib/helper.js | 15 - site/src/lib/loading-gif.js | 3 - site/src/lib/resize.js | 90 ------ site/src/lib/xhr.js | 94 ------ site/src/style/style.css | 139 -------- site/src/vue-core-image-upload.vue | 227 ------------- {site/src => src}/crop.vue | 0 src/index.js | 2 +- {site/src => src}/lib/canvas-helper.js | 0 src/lib/drag.js | 85 ++--- src/lib/helper.js | 4 +- src/lib/resize.js | 167 ++++------ src/lib/xhr.js | 43 +-- {site/src => src}/props.js | 0 src/style/style.css | 4 +- src/vue-core-image-upload.vue | 305 ++++++------------ webpack.config.demo.js | 44 --- 44 files changed, 392 insertions(+), 1357 deletions(-) delete mode 100644 README_CN.md delete mode 100644 site/src/demo/index.js delete mode 100644 site/src/index.js delete mode 100644 site/src/lib/drag.js delete mode 100644 site/src/lib/helper.js delete mode 100644 site/src/lib/loading-gif.js delete mode 100644 site/src/lib/resize.js delete mode 100644 site/src/lib/xhr.js delete mode 100644 site/src/style/style.css delete mode 100644 site/src/vue-core-image-upload.vue rename {site/src => src}/crop.vue (100%) rename {site/src => src}/lib/canvas-helper.js (100%) rename {site/src => src}/props.js (100%) delete mode 100644 webpack.config.demo.js diff --git a/README.md b/README.md index 1a641cd..612f8fe 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,15 @@ -## Vue-Core-Image-Upload +## Vue-Core-Image-Upload -[Chinese Doc](./README_CN.md) +[![npm](https://img.shields.io/npm/v/vue-core-image-upload.svg?maxAge=2592000)]() -a vue plugin for image upload and crop ( Support 📱 IE9+) -if you use vue.js(<=2.0), you should go [here](https://github.com/Vanthink-UED/vue-core-image-upload/tree/v1.x).Or select +a vue plugin for image upload and crop ( Support 📱 IE10+) + +[查看文档](http://vanthink-ued.github.io/vue-core-image-upload/index.html#/cn/get-started) + +[English Document](http://vanthink-ued.github.io/vue-core-image-upload/index.html#/en/home) + +if you use vue.js(<=2.0), you should go [here](https://github.com/Vanthink-UED/vue-core-image-upload/tree/v1.x).Or select 1.x.x version. @@ -17,7 +22,19 @@ npm i vue-core-image-upload --save ``` Code Example (ES6) +``` html + + +``` ``` js + + import VueCoreImageUpload from 'vue-core-image-upload'; new Vue({ @@ -38,104 +55,114 @@ new Vue({ }); ``` -Use CDN Script(ES5) -```js - -// include the script ./node_modules/vue-core-image-upload/index.js - -... - -``` - -``` html - - -``` - [Demo] (http://vanthink-ued.github.io/vue-core-image-upload/upload.html) -### Options - -| Props | Type | Example | Description | -| ------------- |:----------| ---------|--------------| -| url | String | '/crop.php' | your server url | -| text | String | 'Upload Image' | the text you want to show | -| inputOfFile | String | 'file' | upload file form name | -| extensions | String | 'png,jpg,gif' | limit the file type | -| crop | Boolean | true | if need crop image | -| cropRatio | String | '1:1' | limit the cropped image shape| -| cropBtn | Object | {ok:'Save','cancel':'Give Up'} | the text of crop button| -| maxFileSize | Number | 10485760(10M) | limit the file size| -| maxWidth | Number | 150 | limit the width of your image you cropped| -| maxheight | Number | 150 | limit the height of your image you cropped| -| inputAccept | string | 'image/*' / 'image/jpg,image/jpeg,image/png' | the image file of accept type | -| isXhr | Boolean | true | cancel default xhr uploading -| headers | Object | {auth: xxxxx} | the http header to send server -| data | Object | {id: xxxxx} | the http post data to send server - -### $dispatch, events - -``` js -//finish image uload -imageuploaded(res) { - if (res.errcode == 0) { - this.src = 'http://img1.vued.vanthink.cn/vued751d13a9cb5376b89cb6719e86f591f3.png'; - - } -} -// return file object -imagechanged(res) { - console.log(res.name) -} - - -// uploading image -imageuploading(res) { - console.info('uploading'); -} - -// handle some error like ajax not working -errorhandle(err) { - console.error(err); -} -``` - -### Server Crop Arguments - -If you crop a image , your crop will send a request to your server with some crop arguments; - - - - +### Props + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropsData TypeExampleDetails
urlString'/crop.php'Your server api
textString'Upload Image'The text of your uploading button
inputOfFileString      'file'Yout input[file] name
extensionsString'png,jpg,gif'Limit the image type
cropBoolean'server'Crop image option
cropRatioString'1:1'The cropped image shape
cropBtnObject{ok:'Save','cancel':'Give Up'}The Text of cropping button text
maxFileSizeNumber10485760(10M)Limit the size of the file
maxWidthNumber150The maximum width of cropped image
maxheightNumber150限制图片的最大高度
inputAcceptstring'image/*' / 'image/jpg,image/jpeg,image/png'the input[file] accept
compressNumber50Set the quality of compressed image
isXhrBooleantrueIF cancel ajax uploading
headersObject{auth: xxxxx}Set customed header when ajax uploading
dataObject{auth: xxxxx}Set customed data when ajax posting server
+ +### Contributions + +Your contributions and suggestions are welcome 😄😄😄💐💐💐. -+ `toCropImgX`: the distance of cropbox to the image left; -+ `toCropImgY`: the distance of cropbox to the image top -+ `toCropImgW`: the width of cropbox -+ `toCropImgH`: the height of cropbox -+ `maxWidth`: the maxium width of your target image -+ `maxHeight`: the maxium height of your target image -If you want to change the crop window style , you should write your own css files. -### MIT Liscense diff --git a/README_CN.md b/README_CN.md deleted file mode 100644 index 795ac8e..0000000 --- a/README_CN.md +++ /dev/null @@ -1,126 +0,0 @@ -## Vue-Core-Image-Upload 中文文档 - -[English Doc](./README.md) - -一款轻量级的vue上传插件 ( 支持 📱 IE9+) - -如果你使用 vue.js(<=2.0), 你可以到这里克隆代码 [here](https://github.com/Vanthink-UED/vue-core-image-upload/tree/v1.x).或者在安装的时候使用 -1.x.x 版本. - - - - -### Install - -``` bash -npm i vue-core-image-upload --save -``` - -使用ES6 -``` js -import VueCoreImageUpload from 'vue.core.image.upload'; - -new Vue({ - el: '#app', - components: { - 'vue-core-image-upload': VueCoreImageUpload - }, - data: { - src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png', - }, - methods: { - imageuploaded(res) { - if (res.errcode == 0) { - this.src = 'http://img1.vued.vanthink.cn/vued751d13a9cb5376b89cb6719e86f591f3.png'; - } - } - } -}); -``` - -使用ES5 -```js - -// include the script ./node_modules/vue-core-image-upload/index.js - -... - -``` - -``` html - -``` - -[Demo] (http://vanthink-ued.github.io/vue-core-image-upload/upload.html) - -### 配置属性 - -| Props | Type | Example | Description | -| ------------- |:----------| ---------|--------------| -| url | String | '/crop.php' | 服务端上传的地址 | -| text | String | 'Upload Image' | 你需要显示按钮的文本| -| inputOfFile | String     |   'file' | 上传服务端对应表单 name | -| extensions | String | 'png,jpg,gif' | 限制的图片类型 | -| crop | Boolean | true | 是否需要裁剪 | -| cropRatio | String | '1:1' | 限制裁剪的形状| -| cropBtn | Object | {ok:'Save','cancel':'Give Up'} | 按钮文本| -| maxFileSize | Number | 10485760(10M) | 文件大小限制| -| maxWidth | Number | 150 | 限制图片的最大宽度| -| maxheight | Number | 150 | 限制图片的最大高度| -| inputAccept | string | 'image/*' / 'image/jpg,image/jpeg,image/png' | 赋予上传file的接受类型 | -| isXhr | Boolean | true | 是否需要调用系统内自己的上传功能 -| headers | Object | {auth: xxxxx} | 设置xhr上传 的header - -### 支持的事件类型 - -``` js -//finish image uload -imageuploaded(res) { - if (res.errcode == 0) { - this.src = 'http://img1.vued.vanthink.cn/vued751d13a9cb5376b89cb6719e86f591f3.png'; - - } -} -// return file object -imagechanged(res) { - console.log(res.name) -} - - -// uploading image -imageuploading(res) { - console.info('uploading'); -} - -// handle some error like ajax not working -errorhandle(err) { - console.error(err); -} -``` - -### 发给服务端的裁剪参数 - - - - -参数如上图。 - -如果你需要自定义裁剪弹窗的的样式，你可以自己写css进行覆盖 diff --git a/index.js b/index.js index 49aa984..92ff41b 100644 --- a/index.js +++ b/index.js @@ -1 +1 @@ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueCoreImageUpload=e():t.VueCoreImageUpload=e()}(this,function(){return function(t){function e(o){if(n[o])return n[o].exports;var i=n[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,o){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:o})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=78)}([function(t,e){var n=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},function(t,e,n){var o=n(55),i=n(14);t.exports=function(t){return o(i(t))}},function(t,e,n){t.exports=!n(8)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(t,e,n){var o=n(5),i=n(11);t.exports=n(3)?function(t,e,n){return o.f(t,e,i(1,n))}:function(t,e,n){return t[e]=n,t}},function(t,e,n){var o=n(7),i=n(30),r=n(23),s=Object.defineProperty;e.f=n(3)?Object.defineProperty:function(t,e,n){if(o(t),e=r(e,!0),o(n),i)try{return s(t,e,n)}catch(t){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(t[e]=n.value),t}},function(t,e,n){var o=n(21)("wks"),i=n(12),r=n(0).Symbol,s="function"==typeof r;(t.exports=function(t){return o[t]||(o[t]=s&&r[t]||(s?r:i)("Symbol."+t))}).store=o},function(t,e,n){var o=n(9);t.exports=function(t){if(!o(t))throw TypeError(t+" is not an object!");return t}},function(t,e){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,e){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,e,n){var o=n(35),i=n(15);t.exports=Object.keys||function(t){return o(t,i)}},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e){var n=0,o=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++n+o).toString(36))}},function(t,e){var n=t.exports={version:"2.4.0"};"number"==typeof __e&&(__e=n)},function(t,e){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on "+t);return t}},function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,e){t.exports={}},function(t,e){t.exports=!0},function(t,e){e.f={}.propertyIsEnumerable},function(t,e,n){var o=n(5).f,i=n(1),r=n(6)("toStringTag");t.exports=function(t,e,n){t&&!i(t=n?t:t.prototype,r)&&o(t,r,{configurable:!0,value:e})}},function(t,e,n){var o=n(21)("keys"),i=n(12);t.exports=function(t){return o[t]||(o[t]=i(t))}},function(t,e,n){var o=n(0),i=o["__core-js_shared__"]||(o["__core-js_shared__"]={});t.exports=function(t){return i[t]||(i[t]={})}},function(t,e){var n=Math.ceil,o=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?o:n)(t)}},function(t,e,n){var o=n(9);t.exports=function(t,e){if(!o(t))return t;var n,i;if(e&&"function"==typeof(n=t.toString)&&!o(i=n.call(t)))return i;if("function"==typeof(n=t.valueOf)&&!o(i=n.call(t)))return i;if(!e&&"function"==typeof(n=t.toString)&&!o(i=n.call(t)))return i;throw TypeError("Can't convert object to primitive value")}},function(t,e,n){var o=n(0),i=n(13),r=n(17),s=n(25),a=n(5).f;t.exports=function(t){var e=i.Symbol||(i.Symbol=r?{}:o.Symbol||{});"_"==t.charAt(0)||t in e||a(e,t,{value:s.f(t)})}},function(t,e,n){e.f=n(6)},function(t,e,n){"use strict";t.exports={isMobile:/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)}},function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},function(t,e,n){var o=n(9),i=n(0).document,r=o(i)&&o(i.createElement);t.exports=function(t){return r?i.createElement(t):{}}},function(t,e,n){var o=n(0),i=n(13),r=n(52),s=n(4),a=function(t,e,n){var c,u,l,p=t&a.F,f=t&a.G,d=t&a.S,h=t&a.P,g=t&a.B,A=t&a.W,m=f?i:i[e]||(i[e]={}),y=m.prototype,v=f?o:d?o[e]:(o[e]||{}).prototype;f&&(n=e);for(c in n)(u=!p&&v&&void 0!==v[c])&&c in m||(l=u?v[c]:n[c],m[c]=f&&"function"!=typeof v[c]?n[c]:g&&u?r(l,o):A&&v[c]==l?function(t){var e=function(e,n,o){if(this instanceof t){switch(arguments.length){case 0:return new t;case 1:return new t(e);case 2:return new t(e,n)}return new t(e,n,o)}return t.apply(this,arguments)};return e.prototype=t.prototype,e}(l):h&&"function"==typeof l?r(Function.call,l):l,h&&((m.virtual||(m.virtual={}))[c]=l,t&a.R&&y&&!y[c]&&s(y,c,l)))};a.F=1,a.G=2,a.S=4,a.P=8,a.B=16,a.W=32,a.U=64,a.R=128,t.exports=a},function(t,e,n){t.exports=!n(3)&&!n(8)(function(){return 7!=Object.defineProperty(n(28)("div"),"a",{get:function(){return 7}}).a})},function(t,e,n){"use strict";var o=n(17),i=n(29),r=n(36),s=n(4),a=n(1),c=n(16),u=n(57),l=n(19),p=n(64),f=n(6)("iterator"),d=!([].keys&&"next"in[].keys()),h=function(){return this};t.exports=function(t,e,n,g,A,m,y){u(n,e,g);var v,x,w,b=function(t){if(!d&&t in S)return S[t];switch(t){case"keys":case"values":return function(){return new n(this,t)}}return function(){return new n(this,t)}},C=e+" Iterator",I="values"==A,E=!1,S=t.prototype,O=S[f]||S["@@iterator"]||A&&S[A],B=O||b(A),k=A?I?b("entries"):B:void 0,Q="Array"==e?S.entries||O:O;if(Q&&(w=p(Q.call(new t)))!==Object.prototype&&(l(w,C,!0),o||a(w,f)||s(w,f,h)),I&&O&&"values"!==O.name&&(E=!0,B=function(){return O.call(this)}),o&&!y||!d&&!E&&S[f]||s(S,f,B),c[e]=B,c[C]=h,A)if(v={values:I?B:b("values"),keys:m?B:b("keys"),entries:k},y)for(x in v)x in S||r(S,x,v[x]);else i(i.P+i.F*(d||E),e,v);return v}},function(t,e,n){var o=n(7),i=n(61),r=n(15),s=n(20)("IE_PROTO"),a=function(){},c=function(){var t,e=n(28)("iframe"),o=r.length;for(e.style.display="none",n(54).appendChild(e),e.src="javascript:",t=e.contentWindow.document,t.open(),t.write(" diff --git a/site/src/crop.vue b/src/crop.vue similarity index 100% rename from site/src/crop.vue rename to src/crop.vue diff --git a/src/index.js b/src/index.js index 7f83447..a8c0731 100644 --- a/src/index.js +++ b/src/index.js @@ -1,2 +1,2 @@ import VueCoreImageUpload from './vue-core-image-upload.vue'; -module.exports = VueCoreImageUpload; +export default VueCoreImageUpload; diff --git a/site/src/lib/canvas-helper.js b/src/lib/canvas-helper.js similarity index 100% rename from site/src/lib/canvas-helper.js rename to src/lib/canvas-helper.js diff --git a/src/lib/drag.js b/src/lib/drag.js index 6960337..92318d3 100644 --- a/src/lib/drag.js +++ b/src/lib/drag.js @@ -1,68 +1,29 @@ import helper from './helper'; const isMobile = helper.isMobile; -let moves; -let stopM; -export default class Drag { - constructor($el, $container, e) { - const self = this; - this.el = $el; - this.container = $container; - this.coor = { - x: (isMobile ? e.touches[0]['clientX'] : e.clientX) - $el.offsetLeft - $el.parentElement.offsetLeft - document.getElementsByClassName('image-aside')[0].offsetLeft, - y: (isMobile ? e.touches[0]['clientY'] : e.clientY) - $el.offsetTop - $el.parentElement.offsetTop - document.getElementsByClassName('image-aside')[0].offsetTop, - posX: isMobile ? e.touches[0]['clientX'] : e.clientX, - posy: isMobile ? e.touches[0]['clientY'] : e.clientY, - maxLeft: parseInt(this.container.style.width) - parseInt(this.el.style.width), - maxTop: parseInt(this.container.style.height) - parseInt(this.el.style.height), - }; - moves = function (ev) { - self.move(ev); - }; - stopM = function (ev) { - self.stopMove(ev); - }; - if (isMobile) { - document.addEventListener('touchmove', moves, false); - document.addEventListener('touchend', stopM, false); - return; - } - document.addEventListener('mousemove', moves, false); - document.addEventListener('mouseup', stopM, false); +export default function drag(e, el, coor) { + if (!el) { + return; } - move(e) { - if (!this.el) { - return; - } - // this.coor.posX = isMobile ? e.changedTouches[0]['clientX']:e.clientX; - // this.coor.posY = isMobile ? e.changedTouches[0]['clientY']:e.clientY; - const aa = isMobile ? e.changedTouches[0]['clientX'] : e.clientX; - const bb = isMobile ? e.changedTouches[0]['clientY'] : e.clientY; - let newPosX = aa - this.el.parentElement.offsetLeft - document.getElementsByClassName('image-aside')[0].offsetLeft - this.coor.x; - let newPosY = bb - this.el.parentElement.offsetTop - document.getElementsByClassName('image-aside')[0].offsetTop - this.coor.y; - if (newPosX <= 0) { - newPosX = 0; - } - if (newPosX >= this.coor.maxLeft) { - newPosX = this.coor.maxLeft; - } - if (newPosY <= 0) { - newPosY = 0; - } - if (newPosY >= this.coor.maxTop) { - newPosY = this.coor.maxTop; - } - this.el.style.left = (newPosX) + 'px'; - this.el.style.top = (newPosY) + 'px'; + const currentX = isMobile ? e.changedTouches[0]['clientX'] : e.clientX; + const currentY = isMobile ? e.changedTouches[0]['clientY'] : e.clientY; + + let left = currentX - el.parentElement.offsetLeft - document.getElementsByClassName('image-aside')[0].offsetLeft - coor.x; + let top = currentY - el.parentElement.offsetTop - document.getElementsByClassName('image-aside')[0].offsetTop - coor.y; + if (left <= 0) { + left = 0; + } + if (left >= coor.maxLeft) { + left = coor.maxLeft; + } + if (top <= 0) { + top = 0; + } + if (top >= coor.maxTop) { + top = coor.maxTop; } - stopMove() { - this.el = null; - if (isMobile) { - document.removeEventListener('touchmove', moves, false); - document.removeEventListener('touchend', stopM, false); - return; - } - document.removeEventListener('mousemove', moves, false); - document.removeEventListener('mouseup', stopM, false); + return { + left, + top } -} +}; diff --git a/src/lib/helper.js b/src/lib/helper.js index f7c35ab..93731fc 100644 --- a/src/lib/helper.js +++ b/src/lib/helper.js @@ -5,11 +5,11 @@ module.exports = { let cssArr = []; for(let key in obj) { let val = obj[key]; - if (Number.isNumber(val)) { + if (typeof val === 'number') { val = '' + val + 'px'; } cssArr.push(`${key}:${val};`) } - return cssArr; + return cssArr.join(''); } }; diff --git a/src/lib/resize.js b/src/lib/resize.js index 4cf9921..01c50e1 100644 --- a/src/lib/resize.js +++ b/src/lib/resize.js @@ -6,120 +6,85 @@ **/ import helper from './helper'; -let drags; -let stopD; const isMobile = helper.isMobile; + const W = document.body.offsetWidth; const H = document.body.offsetHeight; -export default class Resize { - constructor($el, $container, ratio, e) { - e.stopPropagation(); - const self = this; - this.coor = { - x: isMobile ? e.touches[0].clientX : e.clientX, - y: isMobile ? e.touches[0].clientY : e.clientY, - w: parseInt(window.getComputedStyle($el).width, 10), - h: parseInt(window.getComputedStyle($el).height, 10) - }; - this.splitX = ratio.split(':')[0]; - this.splitY = ratio.split(':')[1]; - this.el = $el; - this.container = $container; - drags = function (ev) { - self.drag(ev); - }; - stopD = function (ev) { - self.stopDrag(ev); - }; - if (isMobile) { - document.addEventListener('touchmove', drags, false); - document.addEventListener('touchend', stopD, false); - } - document.addEventListener('mousemove', drags, false); - document.addEventListener('mouseup', stopD, false); +export default function resize(e, el, container, coor, ratio) { + if (!el) { + return ; } - - drag(e) { - if (!this.el) { - return; - } - const $dotBox = this.container; - const dotBoxW = parseInt(window.getComputedStyle($dotBox).width); - const dotBoxH = parseInt(window.getComputedStyle($dotBox).height); - const $topH = document.querySelector('.info-aside'); - const $halfX = W - dotBoxW; - const $halfY = H - dotBoxH - window.getComputedStyle($topH).height; - const resetX = isMobile ? e.changedTouches[0]['clientX'] : e.clientX; - const resetY = isMobile ? e.changedTouches[0]['clientY'] : e.clientY; - if (this.splitX > this.splitY) { - if (parseInt(resetX) <= ($halfX / 2) + dotBoxW) { - if (parseInt(this.el.offsetWidth) >= dotBoxW) { - this.el.style.width = window.getComputedStyle($dotBox).width; - } - this.el.style.width = (this.coor.w + (isMobile ? e.changedTouches[0]['clientX'] : e.clientX) - this.coor.x) + 'px'; - this.el.style.height = parseInt(this.el.offsetWidth) * (this.splitY / this.splitX) + 'px'; - if (dotBoxW > dotBoxH) { - if (parseInt(this.el.offsetWidth) >= parseInt(window.getComputedStyle($dotBox).height)) { - this.el.style.height = window.getComputedStyle($dotBox).height; - this.el.style.width = parseInt(window.getComputedStyle($dotBox).height) * (this.splitX / this.splitY) + 'px'; - } - } else if (dotBoxW < dotBoxH) { - if (parseInt(this.el.offsetWidth) >= dotBoxW) { - this.el.style.width = window.getComputedStyle($dotBox).width; - this.el.style.height = dotBoxW * (this.splitY / this.splitX) + 'px'; - } - } else if (parseInt(this.el.offsetHeight) >= dotBoxW) { - this.el.style.width = dotBoxW; - this.el.style.height = dotBoxW * (this.splitY / this.splitX) + 'px'; - } + const ratioRemainder = 1 / ratio; + const dotBoxW = parseInt(window.getComputedStyle(container).width); + const dotBoxH = parseInt(window.getComputedStyle(container).height); + const $topH = document.querySelector('.info-aside'); + const $halfX = W - dotBoxW; + const topH = window.getComputedStyle($topH).height; + const $halfY = H - dotBoxH - topH; + const resetX = isMobile ? e.changedTouches[0]['clientX'] : e.clientX; + const resetY = isMobile ? e.changedTouches[0]['clientY'] : e.clientY; + const elOffsetWidth = parseInt(el.offsetWidth); + const elOffsetHeight = parseInt(el.offsetHeight); + const CSSObj = {}; + if (ratio >= 1) { + if (parseInt(resetX) <= ($halfX / 2) + dotBoxW) { + if (elOffsetWidth >= dotBoxW) { + CSSObj.width = window.getComputedStyle($dotBox).width; } - } else if (this.splitX < this.splitY) { - if (parseInt(resetY) <= ($halfY / 2) + dotBoxH + window.getComputedStyle($topH).height) { - this.el.style.height = (this.coor.h + (isMobile ? e.changedTouches[0]['clientY'] : e.clientY) - this.coor.y) + 'px'; - this.el.style.width = parseInt(this.el.style.height) * (this.splitX / this.splitY) + 'px'; - // 限制拖拉的范围在图片内 - if (dotBoxW > dotBoxH) { - if (parseInt(this.el.offsetHeight) >= dotBoxH) { - this.el.style.height = dotBoxH; - this.el.style.width = dotBoxH * (this.splitX / this.splitY) + 'px'; - } - } else if (dotBoxW < dotBoxH) { - if (parseInt(this.el.offsetWidth) >= dotBoxW) { - this.el.style.width = dotBoxW; - this.el.style.height = dotBoxW * (this.splitY / this.splitX) + 'px'; - } - } else if (parseInt(this.el.offsetWidth) >= dotBoxW) { - this.el.style.width = dotBoxW; - this.el.style.height = dotBoxW * (this.splitY / this.splitX) + 'px'; + CSSObj.width = (coor.w + (isMobile ? e.changedTouches[0]['clientX'] : e.clientX) - coor.x); + CSSObj.height = elOffsetWidth * ratioRemainder; + if (dotBoxW > dotBoxH) { + if (elOffsetWidth >= dotBoxH) { + CSSObj.height = dotBoxH; + CSSObj.width = dotBoxH * ratio; } + } else if (dotBoxW < dotBoxH) { + if (elOffsetWidth >= dotBoxW) { + CSSObj.width = dotBoxW; + CSSObj.height = dotBoxW * ratioRemainder; + } + } else if (elOffsetWidth >= dotBoxW) { + CSSObj.width = dotBoxW ; + CSSObj.height = dotBoxW * ratioRemainder; } - } else if (parseInt(resetX) <= ($halfX / 2) + dotBoxW) { - this.el.style.width = (this.coor.w + (isMobile ? e.changedTouches[0]['clientX'] : e.clientX) - this.coor.x) + 'px'; - this.el.style.height = this.el.style.width; + } + } else if (ratio < 1) { + if (parseInt(resetY) <= ($halfY / 2) + dotBoxH + topH) { + CSSObj.height = (coor.h + (isMobile ? e.changedTouches[0]['clientY'] : e.clientY) - coor.y); + CSSObj.width = parseInt(el.style.height) * ratio; // 限制拖拉的范围在图片内 if (dotBoxW > dotBoxH) { - if (parseInt(this.el.offsetHeight) >= dotBoxH) { - this.el.style.height = dotBoxH; - this.el.style.width = dotBoxH; + if (elOffsetHeight >= dotBoxH) { + CSSObj.height = dotBoxH; + CSSObj.width = dotBoxH * ratio; } } else if (dotBoxW < dotBoxH) { - if (parseInt(this.el.offsetWidth) >= dotBoxW) { - this.el.style.width = dotBoxW; - this.el.style.height = dotBoxW; + if (elOffsetWidth >= dotBoxW) { + CSSObj.width = dotBoxW; + CSSObj.height = dotBoxW * ratioRemainder; } - } else if (parseInt(this.el.offsetWidth) >= dotBoxW) { - this.el.style.width = this.el.style.height = dotBoxW; + } else if (elOffsetWidth >= dotBoxW) { + CSSObj.width = dotBoxW; + CSSObj.height = dotBoxW * ratioRemainder; } } - } - - stopDrag() { - this.el = null; - if (isMobile) { - document.removeEventListener('touchmove', drags, false); - document.removeEventListener('touchend', stopD, false); + } else if (parseInt(resetX) <= ($halfX / 2) + dotBoxW) { + CSSObj.width = (coor.w + (isMobile ? e.changedTouches[0]['clientX'] : e.clientX) - coor.x); + CSSObj.height = el.style.width; + // limit the copr box area + if (dotBoxW > dotBoxH) { + if (elOffsetHeight >= dotBoxH) { + CSSObj.height = dotBoxH; + CSSObj.width = dotBoxH; + } + } else if (dotBoxW < dotBoxH) { + if (elOffsetWidth >= dotBoxW) { + CSSObj.width = dotBoxW; + CSSObj.height = dotBoxW; + } + } else if (elOffsetWidth >= dotBoxW) { + CSSObj.width = el.style.height = dotBoxW; } - document.removeEventListener('mousemove', drags, false); - document.removeEventListener('mouseup', stopD, false); } -} + return CSSObj; +}; diff --git a/src/lib/xhr.js b/src/lib/xhr.js index 884b82d..06bcde6 100644 --- a/src/lib/xhr.js +++ b/src/lib/xhr.js @@ -1,11 +1,24 @@ /** * simple ajax handler **/ -module.exports = function (method, url, headers, data, callback, err) { + + //ADD sendAsBinary compatibilty to older browsers + if (XMLHttpRequest.prototype.sendAsBinary === undefined) { + XMLHttpRequest.prototype.sendAsBinary = function(string) { + var bytes = Array.prototype.map.call(string, function(c) { + return c.charCodeAt(0) & 0xff; + }); + this.send(new Uint8Array(bytes).buffer); + }; + } + +module.exports = function (method, url, headers, data, callback, err, isBinary) { + const r = new XMLHttpRequest(); const error = err || function () { console.error('AJAX ERROR!'); }; + const boundary = 'vuecodeimageupload'; // Binary? let binary = false; if (method === 'blob') { @@ -40,25 +53,9 @@ module.exports = function (method, url, headers, data, callback, err) { // Should we add the query to the URL? if (method === 'GET' || method === 'DELETE') { data = null; - } - else if (data && typeof (data) !== 'string' && !(data instanceof FormData) && !(data instanceof File) && !(data instanceof Blob)) { - // Loop through and add formData - var f = new FormData(); - for (x in data) - if (data.hasOwnProperty(x)) { - if (data[x] instanceof HTMLInputElement) { - if ('files' in data[x] && data[x].files.length > 0) { - f.append(x, data[x].files[0]); - } - } - else if (data[x] instanceof Blob) { - f.append(x, data[x], data.name); - } - else { - f.append(x, data[x]); - } - } - data = f; + } else if (isBinary) { + const code = data.base64Code.replace('data:' + data.type + ';base64,', ''); + data = ['--' + boundary, 'Content-Disposition: form-data; name="' + data.filed + '"; filename="' + data.filename + '"', 'Content-Type: ' + data.type, '', window.atob(code), '--' + boundary + '--'].join('\r\n'); } // Open the path, async r.open(method, url, true); @@ -75,6 +72,12 @@ module.exports = function (method, url, headers, data, callback, err) { for (x in headers) { r.setRequestHeader(x, headers[x]); } + if (isBinary) { + r.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary); + } + } + if (isBinary) { + return r.sendAsBinary(data); } r.send(data); return r; diff --git a/site/src/props.js b/src/props.js similarity index 100% rename from site/src/props.js rename to src/props.js diff --git a/src/style/style.css b/src/style/style.css index 7976f14..e954601 100644 --- a/src/style/style.css +++ b/src/style/style.css @@ -133,7 +133,7 @@ border-color:#27ae60; box-shadow: 0 1px 3px rgba(0,0,0,.05); } -.g-core-image-corp-container .g-crop-image-box, -.g-core-image-corp-container .g-crop-image-box .g-crop-image-principal{ +.g-core-image-corp-container .g-crop-image-box,.g-core-image-corp-container .g-crop-image-box .g-crop-image-principal{ position: relative; + } diff --git a/src/vue-core-image-upload.vue b/src/vue-core-image-upload.vue index 9342578..28fd0a5 100644 --- a/src/vue-core-image-upload.vue +++ b/src/vue-core-image-upload.vue @@ -1,116 +1,40 @@ -