vue-core-image-upload 2.1 Is Released

We are so happy to release the new version of vue-core-image-upload. We try to fix some bugs and support some new features. As the slogan:

Do More For You

We try to add some new features to handle the image files via pure javascript. There are some new features:

Compress image in local browser
Crop image via canvas
Multiple files
New crop section style

We have heard some good suggestions from our users. And those features are so useful and ease to use.

New Crop Section Style

We add a white mask for crop section area. And we change the resize button to be a circle and make it larger.

Compress Image In Local Browser

We add new props compress. Props compress means the quality of the image you want to compress via browser and then send the compressed image to the server. It is more friendly to mobile devices for saving your network traffic.

Code Example

<vue-core-image-upload
  :class="['btn', 'btn-primary']"
  @imageuploaded="imageUploded"
  :max-file-size="5242880"
  compress="50"
  url="http://101.198.151.190/api/upload.php" >
</vue-core-image-upload>

Demo

Multiple Files

Set props multiple equal true, and you could select more than one file. And your server will receive an array of files.multiple-size is a number which limits your count of the files you selected.

<vue-core-image-upload
:class="['btn', 'btn-primary']"
:crop="false"
@imageuploaded="imageUploded"
:max-file-size="5242880"
:multiple="true"
:multiple-size="4"
url="http://101.198.151.190/api/upload2.php" >
</vue-core-image-upload>

Crop Image Via Canvas

We are also excited about support this feature. crop="local" The Browser will crop the image via canvas API and send the cropped image to the server. You will see HTTP form data like this:

Code example

<vue-core-image-upload
   crop-ratio="1:1"
   :class="['btn', 'btn-primary']"
   crop="local"
   url="http://101.198.151.190/api/crop.php"
   extensions="png,gif,jpeg,jpg"
   text="Crop Image"
   @imageuploaded="crpoServerImageUploaded">
</vue-core-image-upload>

Update New Document Website

We re-build our document webiste and we provide English document too. The code source are here.

The Future

Of course in the future, we'll change some style when cropping the image on mobile devices and fix the new bugs.