Historical review:

  • [VUE series] From the interpretation of publish and subscribe mode to the implementation of vUE responsive principle (including VUe3.0)
  • 【 VUE series 】 Gracefully generate dynamic forms with VUE (I)
  • 【 VUE series 】 Gracefully generate dynamic forms with VUE (2)
  • Vue series: Vue-DevTools you don’t know
  • Vue series vUE – Router source code analysis
  • [VUE series] In-depth understanding of VUex
  • 【 VUE series 】 VUE and EChats combine spring, vUE plug-in Vechart
  • Vue series ESLint is configured for the vue2. X project
  • [VUE series] Vue2. X project configures Mocha unit test
  • [[VUE series] Two pictures, figure out the diff algorithm, really sweet ah!

] (juejin. Cn/post / 684490…).

  • [[VUE series] Lazy loading of vue-Router routes occurs when element-UI is introduced on demand

] (juejin. Cn/post / 684490…).

  • Vue series the correct way to encapsulate common popover components
  • [VUE series] Develop components, package into VUE plug-ins, write documents, configure GH-Pages branch demo, release NPM package one stream

preface

Recently, there is a demand for cutting and uploading certificate photos and TWO-DIMENSIONAL codes. I went to look up information. There are many posts about the use of xyxiao001/ VUe-Cropper plug-in. Go to Github, find it, and quickly get requirements development online. The author mainly carries on the second package to vue-Cropper plug-in. After encapsulation, it includes clicking to select the image, base64 transformation of the image, cropping, and calling the background interface to upload.

Picture cutting requirements in the development of questions

The author left several questions in the process of development, such as: how can the clipping frame see the original picture at the bottom through the mask? How to deal with dragging pictures, shrinking pictures and cropping pictures, etc. Roughly comb out the following questions.

  • 1. How to drag pictures and control the zoom of pictures?
  • 2. How does cropping box display pictures through the mask?
  • 3. How to generate the screenshot box and how to control the size of the screenshot?
  • 4. How do I clear clipping boxes?
  • 5. After cropping, how to generate the image?
  • 6. Select pictures upload pictures and display them?
  • 7. Why are images converted to BLOB objects? (todo)
  • 8. How to automatically crop screenshots?
  • 9. How do you control zooming gestures on the phone?

Vue-cropper source code to read

Faced with these problems, if you want to know the answer, there is no good way, is to read the source code, while debugging, while reading the source code. My habit of reading source code is to start with the initial commit of the source code. In fact, some of the questions just happened to be plugins constantly fixing bugs, expansion functions added.

1, how to drag the picture, and control the picture zoom?

For this problem, an initial COMMIT version is selected and run locally.

Image dragging and zooming is controlled by cSS3’s scale and translate3D (x, Y, Z). Every time you change the image’s outer div box, the zooming and moving is also the outer div, not the IMG itself.

The drag control for the image is not tied to the image or the image’s parent box, but uses cropper-drag-box, an empty div. Mouse events and touch events are bound to this div. That’s it. Let’s go to the next one.

2. How does cropping box display pictures through the mask?

Suddenly, the author thought that the clipping frame saw the original picture through the mask. In fact, there is an original image in the clipping box that shows the clipping. I wonder why the original image is not moving in the same position as the original image in the cropping.

So the author gathers up the source code, see the ‘translate3d (‘ + (x – cropOffsertX)/scale +’ px, ‘is the original picture of the current top level – cut out of the box top level, ha, ha, ha, so 😂

3, how to generate the screenshot box, how to control the size of the screenshot?

When clicking “Start clipping”, the clipping event will be monitored, and the initial position of the clipping box will be recorded. The screenshot will be moved, and the width and height of the clipping box will be obtained by subtracting the initial position from the current position. The dynamic property will be updated to the style of the clipping box div. It’s pretty simple.

4. How to clear the clipping box?

This is easier, just think about it with your feet, and reset the style on the cropped box. Went to look at the source code, as expected.

5. After cropping, how to generate the image?

After clipping, create a Canvas, call drawImage to draw, and use Canvas.todataURL (“image/ JPEG “, this.outputSize) to generate a Base64 image.

6, select pictures upload pictures, and display?

Anyone who’s ever uploaded a picture knows that. But let’s do a little bit of science here.

FileReaderCan read files asynchronously throughFileReader.readAsDataURL()Starts reading the specifiedBlobThe content of. When I listen until the upload is complete,resultProperty will contain a data: URL formatBase64 stringTo represent the contents of the file being read.

7. Why convert images to BLOB objects? (todo)

Look at the plugin’s commit record. There was a commit that converted the image to a BLOB object, but it didn’t say why. Why convert images to blob objects before cropping? Can’t the original base64 work? I submitted a comment to the author about my doubts. I haven’t heard back yet.

Don’t get it right here? Clear, understanding can be private chat me (wechat: uxiaoxiaoxx)

8. How to automatically crop screenshots?

When the image is asynchronously read, the clipping box is initialized and clipped to the default position of the clipping box.

9. How to control gesture zooming on the mobile terminal?

The main use of mobile touches, if e.touches.length == 2, for two fingers.

Its specific implementation is as follows: oldL is the initial straight line distance of two fingers, newL is the end straight line distance of two fingers, and cha = ~~(newL-OLDL) cha scale coefficient is used to calculate the multiple of image enlargement and contraction 😁

Extension:

Math.sqrt() returns the square root of a number;

Math.pow() returns the exponent of base

summary

Daily business requirements development, most developers can do, but, do such things, how can we improve ourselves? Let yourself grow? First of all, we can think deeply in requirements development, ask questions, and then read the source code (or refactoring package), to answer their own questions, which is a way of self-improvement. Hope my study method, can bring you a little inspiration. ‘! Finally, thanks to Xyxiao001 for contributing to VUe-Cropper.