Simple image editor on VueJS

Recently, I had the opportunity to write a service for an online store that would help place an order for printing my photos.



The service assumed the presence of a “simple” image editor, the creation of which I would like to share. And all because among the abundance of all sorts of plug-ins, I did not find the right functionality, and besides, the nuances of CSS transformations, suddenly became a very nontrivial task for me.

Main tasks:

1. The ability to download images from the device, Google Drive and Instagram.
2. Image editing: moving, rotating, flashing horizontally and vertically, zooming, auto-aligning the image to fill the crop area.

If the topic turns out to be interesting, in the next post I will describe in detail the integration with Google Drive and Instagram in the backend-part of the application, where the popular bundle NodeJS + Express was used.

')

For the organization of the frontend-a, I chose a wonderful framework Vue. Just because he inspires me after heavy Angular and annoying React. I think it makes no sense to describe the architecture, routes and other components, let's go straight to the editor.



By the way, you can poke the editor's demo here .



We need two components:



Edit - will contain the main logic and controls

Preview - will be responsible for displaying pictures





The Preview component can trigger 3 events:



loaded - image load event

resized - window resizing event

moved - picture move event



Options:



image - image link

matrix - transformation matrix for CSS transform properties

transform - an object that describes the transformation



In order to better control the position of the image, img has absolute positioning, and the transform-origin property, the transformation reference point, is set to the initial value “0 0”, which corresponds to the origin in the upper left corner of the original (before transformation!) Image.



The main problem I encountered is that you need to ensure that the transform-origin point is always in the center of the editing area, otherwise, during transformations, the selected part of the image will shift. This task can be solved using the transformation matrix .

Component Edit

The imageRect and areaRect values ​​are passed to the Preview component by calling the imageLoaded and areaResized methods, respectively, the objects have the structure:

 { size: { width: 100, height: 100 }, center: { x: 50, y: 50 } } 

The center values ​​could be calculated each time, but it is easier to write them once.



The calculated matrix property is the very coefficients of the transformation matrix.



The first task that needs to be solved is to center an image with an arbitrary aspect ratio in the cropping area, while the image must be able to fit completely, blank areas (only) above and below, or (only) left and right are valid. For any transformation, this condition must be maintained.



First, we limit the values ​​for zooming, for this we will check the aspect ratio, taking into account the orientation of the image.





We now turn to transformations. First, let's describe the reflections, because they do not displace the visible area of ​​the image.





Transformations of zooming, rotation, and offset already require a transform-origin adjustment.





It is the _translate method that is responsible for all the subtleties of transformations. It is necessary to present two reference systems. The first one, let's call it zero, begins in the upper left corner of the image, when multiplying the coordinates by the transformation matrix, we move to another system of coordinates, let's call it local. In this case, the inverse transition, from local to zero, we can accomplish by finding the inverse transformation matrix .



So we need two functions.



The first is to go from zero to the local system; the browser performs the same transformation when we specify the transform css property.

 img { transform: matrix(a, b, c, d, tx, ty); } 

The second is for finding the original coordinates of the image, having already transformed coordinates.



The most convenient way is to write these functions using methods of a separate class.







Alignment creates the effect of "sticking" the image to the edges of the cropping area, avoiding empty fields.

Component Preview

The main task of this component is to display a picture, apply transformations and react to the movement of a mouse button clamped over an image. By calculating the offset, we update the transform.x and transform.y parameters; when the movement is completed, we trigger the moved event, telling the Edit component that we need to re-calculate the position of the transformation center and correct the transform.x and transform.y.





The functionality of the editor is neatly separated from the main project and lies here .



I hope this material will be useful for you. Thank!