Vue-Core-Image-Upload

a vue plugin for image upload and crop ( Support 📱 IE9+)

if you use vue.js(<=2.0), you should go here.Or select 1.x.x version.

Install

1npm i vue-core-image-upload --save

Code Example (ES6)

1import VueCoreImageUpload  from './vue.core.image.upload.vue';
2
3new Vue({
4  el: '#app',
5  components: {
6    'vue-core-image-upload': VueCoreImageUpload
7  },
8  data: {
9    src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
10  },
11  methods: {
12
13  },
14  events: {
15    imageuploaded(res) {
16      if (res.errcode == 0) {
17        this.src = 'http://img1.vued.vanthink.cn/vued751d13a9cb5376b89cb6719e86f591f3.png';
18      }
19    }
20  },
21});

Use CDN Script(ES5)

1
2// include the script ./node_modules/vue-core-image-upload/index.js
3<script src="http://s1.vued.vanthink.cn/3e3f5b16269d/vue-core-image-upload.js"></script>
4...
5<script>
6    var MyComponent = Vue.extend(VueCoreImageUpload);
7    new Vue({
8      el: '#app',
9      components: {
10        'vue-core-image-upload': MyComponent
11      },
12      data: {
13        src: 'http://img1.vued.vanthink.cn/vued0a233185b6027244f9d43e653227439a.png',
14      },
15      methods: {
16
17      },
18      events: {
19        imageuploaded: function(res) {
20          if (res.errcode == 0) {
21            this.src = 'http://img1.vued.vanthink.cn/vued751d13a9cb5376b89cb6719e86f591f3.png';
22          }
23        }
24      },
25    });
26</script>

1<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

$dispatch, events

1//finish image uload
2imageuploaded(res) {
3  if (res.errcode == 0) {
4    this.src = 'http://img1.vued.vanthink.cn/vued751d13a9cb5376b89cb6719e86f591f3.png';
5
6  }
7}
8
9
10// uploading image
11imageuploading(res) {
12  console.info('uploading');
13}
14
15// handle some error like ajax not working
16errorhandle(err) {
17  console.error(err);
18}

Server Crop Arguments

If you crop a image , your crop will send a request to your server with some crop arguments;

• 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