Skip to content

Commit 2f23b12

Browse files
JackPuJackPu
committed
add english doc
1 parent 68397d1 commit 2f23b12

File tree

4 files changed

+105
-5
lines changed

4 files changed

+105
-5
lines changed

‎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/ResizeImage.vue‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<template>
22
<div class="components">
33
<h3>调整图片</h3>
4+
<p>你可以设置 <code> resize </code> 来进行图片的缩放。 </p>
5+
<p>设置<code>resize="local"</code> 意味着图片的缩放将在本地进行。发给服务端的将会是大小调整完毕的后的图片。</p>
46
<div class="center">
57
<div class="user">
68
<img class="avatar" :src="src"/>
@@ -13,15 +15,28 @@
1315
extensions="png,jpeg,jpg"
1416
text="Resize Image"
1517
compress="20"
16-
@imageuploaded="crpoServerImageUploaded">
18+
@imageuploaded="resizeLocalImageUploaded">
1719
</vue-core-image-upload>
1820
</div>
19-
<a href="https://github.com/Vanthink-UED/vue-core-image-upload/blob/master/site/client/components/doc/cn/CropImage.vue">View Code Source</a>
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>
2035
</div>
2136
</template>
2237

2338
<script>
24-
import VueCoreImageUpload from '../../../../src/vue-core-image-upload.vue';
39+
import VueCoreImageUpload from 'vue-core-image-upload';
2540
export default {
2641
components: {
2742
VueCoreImageUpload
@@ -40,7 +55,7 @@ export default {
4055
},
4156
4257
methods: {
43-
cropLocalImageUploaded(res) {
58+
resizeLocalImageUploaded(res) {
4459
this.src = res.data.src;
4560
},
4661
crpoServerImageUploaded(res) {

‎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/router/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ 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';
1313
import CnResizeImage from '../components/doc/cn/ResizeImage.vue';
14+
import EnResizeImage from '../components/doc/en/ResizeImage.vue';
1415
import CnMultipleFile from '../components/doc/cn/MultipleFile.vue';
1516
import EnMultipleFile from '../components/doc/en/MultipleFile.vue';
1617
import CnCompressImage from '../components/doc/cn/CompressImage.vue';
@@ -74,6 +75,10 @@ export default new Router({
7475
path: '/cn/resize-image',
7576
component: CnResizeImage,
7677
},
78+
{
79+
path: '/en/resize-image',
80+
component: EnResizeImage,
81+
},
7782
{
7883
path: '/cn/multiple-file',
7984
component: CnMultipleFile

0 commit comments

Comments
 (0)