Skip to content

Commit

Permalink
add new version
Browse files Browse the repository at this point in the history
  • Loading branch information
@JackPu
JackPu committed May 3, 2017
1 parent 699fc95 commit 230afe7
Show file tree
Hide file tree
Showing 44 changed files with 392 additions and 1,357 deletions.
229 changes: 128 additions & 101 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -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.

<img width="360" src="./shots/vue-core-image-upload.png" />
Expand All @@ -17,7 +22,19 @@ npm i vue-core-image-upload --save
```

Code Example (ES6)
``` html
<vue-core-image-upload
:class="['btn', 'btn-primary']"
:crop="false"
@imageuploaded="imageuploaded"
:data="data"
:max-file-size="5242880"
url="your server url" >
</vue-core-image-upload>
```
``` js


import VueCoreImageUpload from 'vue-core-image-upload';

new Vue({
Expand All @@ -38,104 +55,114 @@ new Vue({
});
```

Use CDN Script(ES5)
```js

// include the script ./node_modules/vue-core-image-upload/index.js
<script src="http://s1.vued.vanthink.cn/3e3f5b16269d/vue-core-image-upload.js"></script>
...
<script>
var MyComponent = Vue.extend(VueCoreImageUpload);
new Vue({
el: '#app',
components: {
'vue-core-image-upload': MyComponent
},
data: {
src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
},
methods: {
imageuploaded: function(res) {
if (res.errcode == 0) {
this.src = 'http://img1.vued.vanthink.cn/vued751d13a9cb5376b89cb6719e86f591f3.png';
}
}

}
</script>
```
``` html
<vue-core-image-upload
v-bind:class="['pure-button','pure-button-primary','js-btn-crop']"
v-bind:crop="false"
url="./crop.php"
extensions="png,gif,jpeg,jpg">
</vue-core-image-upload>
```
[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;
<img src="./shots/vuedba0ed377b88fc84d51026310efcb255b.png" />
### Props
<table class="m-table bordered">
<thead>
<tr>
<th>Props</th>
<th align="left">Data Type</th>
<th>Example</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td>url</td>
<td align="left">String</td>
<td>'/crop.php'</td>
<td>Your server api</td>
</tr>
<tr>
<td>text</td>
<td align="left">String</td>
<td>'Upload Image'</td>
<td>The text of your uploading button</td>
</tr>
<tr>
<td>inputOfFile</td>
<td align="left">String &nbsp; &nbsp;</td>
<td>&nbsp; 'file'</td>
<td>Yout input[file] name</td>
</tr>
<tr>
<td>extensions</td>
<td align="left">String</td>
<td>'png,jpg,gif'</td>
<td>Limit the image type</td>
</tr>
<tr>
<td>crop</td>
<td align="left">Boolean</td>
<td>'server'</td>
<td>Crop image option</td>
</tr>
<tr>
<td>cropRatio</td>
<td align="left">String</td>
<td>'1:1'</td>
<td>The cropped image shape</td>
</tr>
<tr>
<td>cropBtn</td>
<td align="left">Object</td>
<td>{ok:'Save','cancel':'Give Up'}</td>
<td>The Text of cropping button text</td>
</tr>
<tr>
<td>maxFileSize</td>
<td align="left">Number</td>
<td>10485760(10M)</td>
<td>Limit the size of the file</td>
</tr>
<tr>
<td>maxWidth</td>
<td align="left">Number</td>
<td>150</td>
<td>The maximum width of cropped image </td>
</tr>
<tr>
<td>maxheight</td>
<td align="left">Number</td>
<td>150</td>
<td>限制图片的最大高度</td>
</tr>
<tr>
<td>inputAccept</td>
<td align="left">string</td>
<td>'image/*' / 'image/jpg,image/jpeg,image/png'</td>
<td>the input[file] accept</td>
</tr>
<tr>
<td>compress</td>
<td align="left">Number</td>
<td>50</td>
<td>Set the quality of compressed image</td>
</tr>
<tr>
<td>isXhr</td>
<td align="left">Boolean</td>
<td>true</td>
<td>IF cancel ajax uploading</td>
</tr>
<tr>
<td>headers</td>
<td align="left">Object</td>
<td>{auth: xxxxx}</td>
<td>Set customed header when ajax uploading</td>
</tr>
<tr>
<td>data</td>
<td align="left">Object</td>
<td>{auth: xxxxx}</td>
<td>Set customed data when ajax posting server</td>
</tr>
</tbody>
</table>

### 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
126 changes: 0 additions & 126 deletions README_CN.md
View file

This file was deleted.

2 changes: 1 addition & 1 deletion index.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 230afe7

Please sign in to comment.