Skip to content

Commit fead9c1

Browse files
JackPuJackPu
authored
Merge pull request #55 from Vanthink-UED/new_features_20170504
New features 20170504
2 parents 950bb32 + 0dbc976 commit fead9c1

File tree

18 files changed

+497
-80
lines changed

18 files changed

+497
-80
lines changed

‎index.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-core-image-upload",
3-
"version": "2.1.5",
3+
"version": "2.1.6",
44
"description": "a vue plgin for image upload and crop",
55
"main": "src/index.js",
66
"dependencies": {

‎site/build/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@
22
<html>
33
<head>
44
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
5+
<meta name="viewport" content="width=device-width,user-scalable=0,initial-scale=1,maximum-scale=1">
56
<title><%= htmlWebpackPlugin.options.title %></title>
67
</head>
78
<body>
89
<div id="app"></div>
910
</body>
10-
</html>
11+
</html>

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
@imageuploaded="imageUploded"
1010
:max-file-size="5242880"
1111
compress="50"
12+
:data="params"
1213
url="http://101.198.151.190/api/upload.php" >
1314
</vue-core-image-upload>
1415
</div>
@@ -25,14 +26,18 @@
2526

2627
<script>
2728
28-
import VueCoreImageUpload from 'vue-core-image-upload'
29+
import VueCoreImageUpload from '../../../../src/vue-core-image-upload.vue'
2930
export default {
3031
components: {
3132
VueCoreImageUpload,
3233
},
3334
data() {
3435
return {
3536
src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
37+
params: {
38+
auth: '123123',
39+
arr: [123,123123]
40+
}
3641
};
3742
},
3843

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

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<template>
2+
<div class="components">
3+
<h3>调整图片</h3>
4+
<p>你可以设置 <code> resize </code> 来进行图片的缩放。 </p>
5+
<p>设置<code>resize="local"</code> 意味着图片的缩放将在本地进行。发给服务端的将会是大小调整完毕的后的图片。</p>
6+
<div class="center">
7+
<div class="user">
8+
<img class="avatar" :src="src"/>
9+
</div>
10+
<vue-core-image-upload
11+
crop-ratio="1:1"
12+
:class="['btn', 'btn-primary']"
13+
resize="local"
14+
url="http://101.198.151.190/api/upload.php"
15+
extensions="png,jpeg,jpg"
16+
text="Resize Image"
17+
compress="20"
18+
@imageuploaded="resizeLocalImageUploaded">
19+
</vue-core-image-upload>
20+
</div>
21+
<p>Code Example</p>
22+
<pre v-highlightjs><code class="HTML">&lt;vue-core-image-upload
23+
crop-ratio="1:1"
24+
:class="['btn', 'btn-primary']"
25+
resize="local"
26+
url="http://101.198.151.190/api/crop.php"
27+
extensions="png,gif,jpeg,jpg"
28+
text="Resize Image"
29+
@imageuploaded="resizeLocalImageUploaded"&gt;
30+
&lt;/vue-core-image-upload&gt;
31+
32+
</code></pre>
33+
<p>设置<code>resize="server"</code>同理，会上传原图片，只是会在服务端的参数自动添加裁剪的比例 <code>imgChangeRatio</code>。</p>
34+
<a href="https://github.com/Vanthink-UED/vue-core-image-upload/blob/master/site/client/components/doc/cn/ResizeImage.vue">View Code Source</a>
35+
</div>
36+
</template>
37+
38+
<script>
39+
import VueCoreImageUpload from 'vue-core-image-upload';
40+
export default {
41+
components: {
42+
VueCoreImageUpload
43+
},
44+
data() {
45+
return {
46+
src: 'http://img1.vued.vanthink.cn/vued7553a09a5d5209ebd00a48264394b7f3.png',
47+
cropSrc: 'http://img1.vued.vanthink.cn/vued7553a09a5d5209ebd00a48264394b7f3.png',
48+
cropArgs: {
49+
toCropImgH: '?',
50+
toCropImgW: '?',
51+
toCropImgX: '?',
52+
toCropImgY: '?'
53+
}
54+
};
55+
},
56+
57+
methods: {
58+
resizeLocalImageUploaded(res) {
59+
this.src = res.data.src;
60+
},
61+
crpoServerImageUploaded(res) {
62+
if (res.errcode === 0) {
63+
if (res.data.src) {
64+
this.src = res.data.src;
65+
return;
66+
}
67+
this.name = res.data.name;
68+
this.cropArgs = {
69+
toCropImgH: parseInt(res.data.post.toCropImgH),
70+
toCropImgW: parseInt(res.data.post.toCropImgW),
71+
toCropImgX: parseInt(res.data.post.toCropImgX),
72+
toCropImgY: parseInt(res.data.post.toCropImgY)
73+
}
74+
this.cropSrc = 'http://img1.vued.vanthink.cn/vued41b900045d6d44f3b32e06049621b415.png';
75+
}
76+
}
77+
}
78+
};
79+
80+
</script>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
<li><code>maxHeight</code>: The maximum height of the crop image</li>
3636
</ul>
3737
<h4>Code example</h4>
38-
<p>上传图片后可以看到裁剪的参数</p>
38+
<p>Click button to upload and you can view some post params.</p>
3939
<div class="center">
4040
<div class="user">
4141
<img class="avatar" :src="cropSrc"/>
@@ -84,7 +84,7 @@
8484
</template>
8585

8686
<script>
87-
import VueCoreImageUpload from 'vue-core-image-upload'
87+
import VueCoreImageUpload from 'vue-core-image-upload';
8888
export default {
8989
components: {
9090
VueCoreImageUpload

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

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<template>
2+
<div class="components">
3+
<h3>Resize</h3>
4+
<p>Set <code> resize </code> props to help you to resize the imagey you want to upload. </p>
5+
<p><code>resize="local"</code> means you can resize image in local browser via canvas and it will send server the resized image.</p>
6+
<div class="center">
7+
<div class="user">
8+
<img class="avatar" :src="src"/>
9+
</div>
10+
<vue-core-image-upload
11+
crop-ratio="1:1"
12+
:class="['btn', 'btn-primary']"
13+
resize="local"
14+
url="http://101.198.151.190/api/upload.php"
15+
extensions="png,jpeg,jpg"
16+
text="Resize Image"
17+
compress="20"
18+
@imageuploaded="resizeLocalImageUploaded">
19+
</vue-core-image-upload>
20+
</div>
21+
<p>Code Example</p>
22+
<pre v-highlightjs><code class="HTML">&lt;vue-core-image-upload
23+
crop-ratio="1:1"
24+
:class="['btn', 'btn-primary']"
25+
resize="local"
26+
url="http://101.198.151.190/api/crop.php"
27+
extensions="png,gif,jpeg,jpg"
28+
text="Resize Image"
29+
@imageuploaded="resizeLocalImageUploaded"&gt;
30+
&lt;/vue-core-image-upload&gt;
31+
</code></pre>
32+
<p><code>resize="server"</code> means it will send the original image you upload，and it will send the server with data params <code>imgChangeRatio</code>. <code>imgChangeRatio</code> is the scaling ratio.</p>
33+
<a href="https://github.com/Vanthink-UED/vue-core-image-upload/blob/master/site/client/components/doc/cn/ResizeImage.vue">View Code Source</a>
34+
</div>
35+
</template>
36+
37+
<script>
38+
import VueCoreImageUpload from 'vue-core-image-upload';
39+
export default {
40+
components: {
41+
VueCoreImageUpload
42+
},
43+
data() {
44+
return {
45+
src: 'http://img1.vued.vanthink.cn/vued7553a09a5d5209ebd00a48264394b7f3.png',
46+
cropSrc: 'http://img1.vued.vanthink.cn/vued7553a09a5d5209ebd00a48264394b7f3.png',
47+
cropArgs: {
48+
toCropImgH: '?',
49+
toCropImgW: '?',
50+
toCropImgX: '?',
51+
toCropImgY: '?'
52+
}
53+
};
54+
},
55+
56+
methods: {
57+
resizeLocalImageUploaded(res) {
58+
this.src = res.data.src;
59+
},
60+
crpoServerImageUploaded(res) {
61+
if (res.errcode === 0) {
62+
if (res.data.src) {
63+
this.src = res.data.src;
64+
return;
65+
}
66+
this.name = res.data.name;
67+
this.cropArgs = {
68+
toCropImgH: parseInt(res.data.post.toCropImgH),
69+
toCropImgW: parseInt(res.data.post.toCropImgW),
70+
toCropImgX: parseInt(res.data.post.toCropImgX),
71+
toCropImgY: parseInt(res.data.post.toCropImgY)
72+
}
73+
this.cropSrc = 'http://img1.vued.vanthink.cn/vued41b900045d6d44f3b32e06049621b415.png';
74+
}
75+
}
76+
}
77+
};
78+
79+
</script>

‎site/client/lib/constants.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@ let routers = [
2020
name: 'Crop Image',
2121
cn_name: '裁剪图片'
2222
},
23+
{
24+
name: 'Resize Image',
25+
cn_name: '调整图片'
26+
},
2327
{
2428
name: 'Multiple File',
2529
cn_name: '上传多文件'

‎site/client/router/index.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import CnEvents from '../components/doc/cn/Events.vue';
1010
import EnEvents from '../components/doc/en/Events.vue';
1111
import CnCropImage from '../components/doc/cn/CropImage.vue';
1212
import EnCropImage from '../components/doc/en/CropImage.vue';
13+
import CnResizeImage from '../components/doc/cn/ResizeImage.vue';
14+
import EnResizeImage from '../components/doc/en/ResizeImage.vue';
1315
import CnMultipleFile from '../components/doc/cn/MultipleFile.vue';
1416
import EnMultipleFile from '../components/doc/en/MultipleFile.vue';
1517
import CnCompressImage from '../components/doc/cn/CompressImage.vue';
@@ -69,6 +71,14 @@ export default new Router({
6971
path: '/en/crop-image',
7072
component: EnCropImage
7173
},
74+
{
75+
path: '/cn/resize-image',
76+
component: CnResizeImage,
77+
},
78+
{
79+
path: '/en/resize-image',
80+
component: EnResizeImage,
81+
},
7282
{
7383
path: '/cn/multiple-file',
7484
component: CnMultipleFile

0 commit comments

Comments
 (0)