Skip to content

Commit c1b6efc

Browse files
JackPuJackPu
committed
add new files
1 parent 230afe7 commit c1b6efc

File tree

8 files changed

+59
-47
lines changed

8 files changed

+59
-47
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ a vue plugin for image upload and crop ( Support 📱 IE10+)
77

88
[查看文档](http://vanthink-ued.github.io/vue-core-image-upload/index.html#/cn/get-started)
99

10+
1011
[English Document](http://vanthink-ued.github.io/vue-core-image-upload/index.html#/en/home)
1112

1213
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

‎site/client/components/doc/cn/CropImage.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<div class="components">
33
<h3>裁剪图片</h3>
44
<p>你可以通过设置 <code>crop</code>，来实现图片的裁剪。你可以指定图片裁剪的宽高，以及它的最大宽度和高度这些参数。</p>
5+
<p>设置 <code>cropRatio</code>来限制裁剪图片的形状，需要字符串的格式(1:1 或者2:3这种比例形式)，当然你可以设置为 auto 则不限制裁剪框的形状。</p>
56
<p class="warnning"> 设置图片裁剪后，批量上传将不再生效。</p>
67
<p>图片裁剪完有两种选择，选择<strong>本地裁剪<code>local</code></strong>或者<strong>服务端裁剪 <code>server</code></strong>。</p>
78
<h4>本地裁剪</h4>

‎site/client/components/doc/cn/Props.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
<td>cropRatio</td>
5858
<td align="left">String</td>
5959
<td>'1:1'</td>
60-
<td>限制裁剪的形状</td>
60+
<td>限制裁剪的形状(设置为auto表示不限制裁剪框形状)</td>
6161
</tr>
6262
<tr>
6363
<td>cropBtn</td>

‎site/client/components/doc/en/CropImage.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<h3>Crop Image</h3>
44
<p>Set <code>crop</code> value to help you crop the image. </p>
55
<p class="warnning"> if you setted the crop props, you can not upload multiple files.</p>
6+
<p><code>cropRatio</code> can be setted for diffrent crop shape.But it must be a string like '2:3' or '1:1'. If you set it to 'auto', users can crop any shape images.</p>
67
<p>You have two values to select，<strong>local crop:<code>local</code></strong>or<strong>server-side crop: <code>server</code></strong>.</p>
78
<h4>Local Crop</h4>
89
<p><code>crop="local"</code> The Browser will crop the image via canvas API and send the cropped image to the server.</p>

‎site/client/components/doc/en/Events.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@
8787
</style>
8888

8989
<script>
90-
import VueCoreImageUpload from '../../../../src/vue-core-image-upload.vue'
90+
import VueCoreImageUpload from 'vue-core-image-upload'
9191
export default {
9292
components: {
9393
VueCoreImageUpload,

‎site/client/components/doc/en/Props.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
<td>cropRatio</td>
5858
<td align="left">String</td>
5959
<td>'1:1'</td>
60-
<td>The cropped image shape</td>
60+
<td>The cropped image shape(set 'auto' not limit the crop shape)</td>
6161
</tr>
6262
<tr>
6363
<td>cropBtn</td>

‎src/crop.vue‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ import resize from './lib/resize';
9090
import GIF_LOADING_SRC from './lib/loading-gif';
9191
import helper from './lib/helper';
9292
// set cropbox size in image
93-
const CROPBOX_PERCENT = 80;
93+
const CROPBOX_PERCENT = 75;
9494
export default {
9595
props: {
9696
formId: {
@@ -117,8 +117,15 @@ export default {
117117
methods: {
118118
setImage(src, w, h) {
119119
this.src = src;
120-
this.ratioW = this.ratio.split(':')[0];
121-
this.ratioH = this.ratio.split(':')[1];
120+
if (this.ratio.indexOf(':') > 0) {
121+
this.ratioW = this.ratio.split(':')[0];
122+
this.ratioH = this.ratio.split(':')[1];
123+
this.ratioVal = this.ratioW / this.ratioH;
124+
} else {
125+
this.ratioW = 1;
126+
this.ratioH = 1;
127+
this.ratioVal = this.ratio;
128+
}
122129
this.setLayout(w, h);
123130
this.setCropBox();
124131
},
@@ -208,7 +215,7 @@ export default {
208215
this.el = $el;
209216
this.container = $container;
210217
const move = function (ev) {
211-
const newCropStyle = resize(ev, self.el, $container, coor, self.ratioW / self.ratioH, helper.isMobile);
218+
const newCropStyle = resize(ev, self.el, $container, coor, self.ratioVal);
212219
if (newCropStyle) {
213220
self.cropCSS.width = newCropStyle.width;
214221
self.cropCSS.height = newCropStyle.height;

‎src/lib/resize.js‎

Lines changed: 42 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -9,67 +9,69 @@ import helper from './helper';
99
const isMobile = helper.isMobile;
1010

1111
const W = document.body.offsetWidth;
12-
const H = document.body.offsetHeight;
12+
13+
14+
1315
export default function resize(e, el, container, coor, ratio) {
1416
if (!el) {
1517
return ;
1618
}
19+
const H = document.body.offsetHeight;
1720
const ratioRemainder = 1 / ratio;
1821
const dotBoxW = parseInt(window.getComputedStyle(container).width);
1922
const dotBoxH = parseInt(window.getComputedStyle(container).height);
2023
const $topH = document.querySelector('.info-aside');
21-
const $halfX = W - dotBoxW;
22-
const topH = window.getComputedStyle($topH).height;
23-
const $halfY = H - dotBoxH - topH;
24+
const halfX = (W - dotBoxW) / 2;
25+
const topH = parseInt(window.getComputedStyle($topH).height);
26+
const halfY = (H - dotBoxH - topH)/2;
2427
const resetX = isMobile ? e.changedTouches[0]['clientX'] : e.clientX;
2528
const resetY = isMobile ? e.changedTouches[0]['clientY'] : e.clientY;
2629
const elOffsetWidth = parseInt(el.offsetWidth);
2730
const elOffsetHeight = parseInt(el.offsetHeight);
2831
const CSSObj = {};
29-
if (ratio >= 1) {
30-
if (parseInt(resetX) <= ($halfX / 2) + dotBoxW) {
31-
if (elOffsetWidth >= dotBoxW) {
32-
CSSObj.width = window.getComputedStyle($dotBox).width;
32+
if (ratio >= 1 && resetX <= halfX + dotBoxW) {
33+
if (elOffsetWidth >= dotBoxW) {
34+
CSSObj.width = dotBoxW;
35+
}
36+
CSSObj.width = (coor.w + resetX - coor.x);
37+
CSSObj.height = elOffsetWidth * ratioRemainder;
38+
if (dotBoxW > dotBoxH) {
39+
if (elOffsetWidth >= dotBoxH) {
40+
CSSObj.height = dotBoxH;
41+
CSSObj.width = dotBoxH * ratio;
3342
}
34-
CSSObj.width = (coor.w + (isMobile ? e.changedTouches[0]['clientX'] : e.clientX) - coor.x);
35-
CSSObj.height = elOffsetWidth * ratioRemainder;
36-
if (dotBoxW > dotBoxH) {
37-
if (elOffsetWidth >= dotBoxH) {
38-
CSSObj.height = dotBoxH;
39-
CSSObj.width = dotBoxH * ratio;
40-
}
41-
} else if (dotBoxW < dotBoxH) {
42-
if (elOffsetWidth >= dotBoxW) {
43-
CSSObj.width = dotBoxW;
44-
CSSObj.height = dotBoxW * ratioRemainder;
45-
}
46-
} else if (elOffsetWidth >= dotBoxW) {
47-
CSSObj.width = dotBoxW ;
43+
} else if (dotBoxW < dotBoxH) {
44+
if (elOffsetWidth >= dotBoxW) {
45+
CSSObj.width = dotBoxW;
4846
CSSObj.height = dotBoxW * ratioRemainder;
4947
}
48+
} else if (elOffsetWidth >= dotBoxW) {
49+
CSSObj.width = dotBoxW ;
50+
CSSObj.height = dotBoxW * ratioRemainder;
5051
}
51-
} else if (ratio < 1) {
52-
if (parseInt(resetY) <= ($halfY / 2) + dotBoxH + topH) {
53-
CSSObj.height = (coor.h + (isMobile ? e.changedTouches[0]['clientY'] : e.clientY) - coor.y);
54-
CSSObj.width = parseInt(el.style.height) * ratio;
55-
// 限制拖拉的范围在图片内
56-
if (dotBoxW > dotBoxH) {
57-
if (elOffsetHeight >= dotBoxH) {
58-
CSSObj.height = dotBoxH;
59-
CSSObj.width = dotBoxH * ratio;
60-
}
61-
} else if (dotBoxW < dotBoxH) {
62-
if (elOffsetWidth >= dotBoxW) {
63-
CSSObj.width = dotBoxW;
64-
CSSObj.height = dotBoxW * ratioRemainder;
65-
}
66-
} else if (elOffsetWidth >= dotBoxW) {
52+
} else if (ratio < 1 && resetY < (halfY + dotBoxH + topH)) {
53+
CSSObj.height = (coor.h + resetY - coor.y);
54+
CSSObj.width = parseInt(el.style.height) * ratio;
55+
// 限制拖拉的范围在图片内
56+
if (dotBoxW > dotBoxH) {
57+
if (elOffsetHeight >= dotBoxH) {
58+
CSSObj.height = dotBoxH;
59+
CSSObj.width = dotBoxH * ratio;
60+
}
61+
} else if (dotBoxW < dotBoxH) {
62+
if (elOffsetWidth >= dotBoxW) {
6763
CSSObj.width = dotBoxW;
6864
CSSObj.height = dotBoxW * ratioRemainder;
6965
}
66+
} else if (elOffsetWidth >= dotBoxW) {
67+
CSSObj.width = dotBoxW;
68+
CSSObj.height = dotBoxW * ratioRemainder;
7069
}
71-
} else if (parseInt(resetX) <= ($halfX / 2) + dotBoxW) {
72-
CSSObj.width = (coor.w + (isMobile ? e.changedTouches[0]['clientX'] : e.clientX) - coor.x);
70+
} else if(ratio == 'auto' && resetY <= (halfY + dotBoxH + topH) && resetX <= halfY + dotBoxW) {
71+
CSSObj.height = (coor.h + resetY - coor.y);
72+
CSSObj.width = (coor.w + resetX - coor.x);
73+
} else if (resetX <= $halfX + dotBoxW) {
74+
CSSObj.width = (coor.w + resetX - coor.x);
7375
CSSObj.height = el.style.width;
7476
// limit the copr box area
7577
if (dotBoxW > dotBoxH) {

0 commit comments

Comments
 (0)