Hello everyone, I am your Yu Xiaoer.

preface

When doing web front-end development, you must have encountered such a business scenario, when uploading users’ profile pictures, the picture needs to be cropped and other operations, this time, we usually use third-party plug-ins.

Technology Github learning address: github.com/codeGoogler…

Programming books for programmers: github.com/codeGoogler…

If you build your own wheel, it will be too slow. If you delay time, you may have to stay and work overtime.

Here recommend a simple to use vue pictures cut plug-in, moving image support, cut out pictures, zoom in on the picture, the up and down or so mobile, fixed ratio, fixed size, remote image cropping, only need very little code can realize cutting function, can also by adjusting the parameters to suit your business needs.

Without further ado, first attach the project address:

Github link: github.com/acccccccb/v…

If it looks familiar, or if it looks familiar from a few years ago when I was using jquery, I saw it in the plugin library. I used to use cropper.js to upload and crop images.

Compatibility is also very good, compatible with IE9+,MSEdge, Chrome, Firefox and other mainstream browsers, you can also use this configuration tool for more personalized Settings, not only real-time preview, but also directly generated code copy and paste into your project.

The first step

1: Install vue-img-cutter in your project

npm install vue-img-cutter --save-dev 
Copy the code

The plugin vue-img-cutter version can be found in package.json

The second step

2: Create an index.vue component and add the ImgCutter. Vue file to the project:

import ImgCutter from 'vue-img-cutter'
export default {
        components:{
            ImgCutter
        },
...
} 
Copy the code

The third step

3: Use in the page:

<ImgCutter V-on :cutDown="cutDown"> <button slot="open"> select picture </button> </ImgCutter>Copy the code

The reference code for index.vue

<template> <div class="tab-container"> <ImgCutter V-on :cutDown="cutDown"> <button slot="open"> select image </button> </ImgCutter>  </div> </template> <script> import ImgCutter from "vue-img-cutter"; export default { components: { ImgCutter, }, }; </script>Copy the code

The fourth step

4: The overall effect is like this

Do you like today’s recommendation? If you like it, please leave a comment and a thumbs-up at the bottom of the article to show my support. Your comments, thumbs-up and forwarding concerns are my motivation to keep updating!

Author: Gendaria

Link: www.jianshu.com/p/436ef2eaa… Source: CSDN

On how to learn Java, on the one hand, we need to continue to learn, to learn the basic knowledge of solid, on the other hand, we should also realize that Java learning can not only rely on theory, more rely on practical operation, so we should practice more projects, learning in practice is the best way to learn. Many people don’t know how to learn at first. Here I have compiled some important technical articles into the Github open source project, hoping to give you some help. The project is: JavaCodeHub

In addition, I also sorted out some programming books for programmers and put them on Github. The projects are: ProgramBooks, if necessary, you can get them by yourself. Address: github.com/codeGoogler…

If Github access is too slow? I also put ProgramBooks on the code cloud