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
+
+
+
+ Props
+ Data Type
+ Example
+ Details
+
+
+
+
+ url
+ String
+ '/crop.php'
+ Your server api
+
+
+ text
+ String
+ 'Upload Image'
+ The text of your uploading button
+
+
+ inputOfFile
+ String
+ 'file'
+ Yout input[file] name
+
+
+ extensions
+ String
+ 'png,jpg,gif'
+ Limit the image type
+
+
+ crop
+ Boolean
+ 'server'
+ Crop image option
+
+
+ cropRatio
+ String
+ '1:1'
+ The cropped image shape
+
+
+ cropBtn
+ Object
+ {ok:'Save','cancel':'Give Up'}
+ The Text of cropping button text
+
+
+ maxFileSize
+ Number
+ 10485760(10M)
+ Limit the size of the file
+
+
+ maxWidth
+ Number
+ 150
+ The maximum width of cropped image
+
+
+ maxheight
+ Number
+ 150
+ 限制图片的最大高度
+
+
+ inputAccept
+ string
+ 'image/*' / 'image/jpg,image/jpeg,image/png'
+ the input[file] accept
+
+
+ compress
+ Number
+ 50
+ Set the quality of compressed image
+
+
+ isXhr
+ Boolean
+ true
+ IF cancel ajax uploading
+
+
+ headers
+ Object
+ {auth: xxxxx}
+ Set customed header when ajax uploading
+
+
+ data
+ Object
+ {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 @@
-
{{text}}
-
-
-
-
-
+
-
-
-
- {{cropBtn.ok}}
- {{cropBtn.cancel}}
-
-
-
+
+
+ {{cropBtn.ok}}
+ {{cropBtn.cancel}}
+
+
-
-
+