Uploading user avatars requires cropping and compressing images, and this Vue plugin can quickly complete such development needs.
About Vue Cropper
Vue Cropper is a practical JavaScript image cropping plug-in. Based on Vue.js , it realizes functions such as zooming in and out, rotating, dragging and selecting area cropping, image compression and uploading on the web on the basis of Vue.js. The API is also very simple and easy to use.
Technical Features of the Vue Cropper Plugin
- Based on Vue development, support the latest Vue 3.x, compatible with Vue 2.x
- Support Vite and TypeScript
- Whether it is input or output images, the image data type supports base 64 and blob, which is very friendly to image input, export and upload processing
- Support image compression, output mainstream JPG / PNG / WebP image formats
- In addition to being used on the web side, it also supports use on the server side
Usage scenarios of Vue Cropper
I don’t know if you have ever met the need for users to upload avatars. When users choose a picture for their avatar, the source of the picture may be the source file taken by the mobile phone. The size and space of the photo are large; it may also be a picture downloaded from the Internet, often Needs further processing before uploading. The easy-to-use picture cropping function can not only meet the needs of users to edit avatars, but also process pictures on demand, saving resources for storing and reading back-end avatars.
Vue Cropper development hands-on experience and usage suggestions
Vue Cropper supports npm installation and direct online introduction:
Import CDN address online:
Suggestions for using the Vue Cropper plugin
The Vue Cropper image cropping plugin supports the following functions:
- Picture zoom in and zoom out
- picture rotation
- Drag the selection to crop the image by area
- Support input network pictures
- Support input JPG / PNG / WebP format pictures
Regarding user avatars, the basic avatar image processing functions are basically covered. This article was first published on the " Those Free Bricks " website. I will place links to the official website on the article page. This time I put it on the project homepage of Vue Cropper Github. The documentation is very clear. It's also very simple. One page contains all the API introductions. There are also many code examples. It is also very easy to integrate the plug-in into your own project. The intuitive online demo is here .
It is worth mentioning that the function of uploading pictures generally selects pictures from the form, obtains the temporary path tempPath of the picture file, and then submits it to the backend server for uploading, while Vue Cropper supports outputting pictures in base64 and blob formats. It is very friendly to download pictures to the local or upload to the server. For example, the cloud function of the WeChat applet or the official upload component of uniapp fully supports it.
Free Open Source Instructions
Vue Cropper is a free and open source JavaScript image cropping plugin, developed and used based on Vue.js, the project source code is hosted on Github based on the MIT open source agreement , anyone can download and use it for free, and can also be used for commercial projects.
Original link: https://www.thosefree.com/vue-cropper