Use ImageMagick for image scaling, synthesis and cropping (js python)_javascript skills

In a recent project, I needed to process the cover of a book, which was to add a shadow line to form the concave and convex feeling of the spine, and then cut out the spine and divide it into two parts so that the client can realize the opening animation. Since it needs to be processed on the server side, I will study the use of imagemagick. At the same time, I am going to encapsulate a Node.js and Python method. I will mainly talk about it and then use imagemagick to scale, synthesize and crop the pictures.

First, the material files are as follows (the cover on the left is unprocessed, and the right is the shadow that needs to be synthesized):

I won’t go into the installation process of ImageMagick. You can refer to the installation method on the official website: http://www.imagemagick.org/script/install-source.php

First, scale the cover image file.png to a height of 1024, and generate newfile.png to facilitate synthesis with the shadow image. The command is as follows:

Copy code The code is as follows:

convert -resize x1024 file.png newfile.png

The method of convert for scaling is as follows:

convert -resize 1024 file.jpg newfile.jpg
The width of the image is 1024, and the height is calculated according to the original image ratio

convert -resize x768 file.jpg newfile.jpg
Get The image height is 768, and the width is calculated based on the original image ratio

convert -resize 1024×768! file.jpg newfile.jpg
Fixed width and height scaling, regardless of the original image width and height ratio. Scale the image to the specified size.

convert -resize “1024×768>” file.jpg newfile.jpg
Only when the width of src.jpg is greater than 1024 or the height is greater than 768, it will be reduced, otherwise newfile.jpg and file.jpg has the same dimensions.

convert -resize “1024×768<” file.jpg newfile.jpg
Only when the width of src.jpg is less than 1024 or the height is less than 768, it will be enlarged, otherwise newfile.jpg and file.jpg has the same dimensions.

The next step is to combine the shadow file onto the cover (composite yy.png from the upper left corner to file.png to generate newfile.png):

Copy code The code is as follows:

composite -gravity northwest yy.png file.png newfile.png

Here are the main explanations - Gravity parameter:

-gravity northwest refers to the upper right corner
If it is required to be in the middle, the parameter is center
If it is required to be in the lower right corner, the parameter is southeast
Others are based on the direction

The result after synthesis is as follows:

The last step is to crop the image. Divide the image into two parts, the shadow part left.png and the other part right.png:

Copy code The code is as follows:

left: convert file.png -gravity southwest -crop 31x1024 0 0 left.png
right: convert file. png -gravity southeast -crop 737x1024 0 0 right.png

The cropping method is adjusted as follows:

convert file.png -crop widthxheight x y newfile
where widthxheight is the size of the target image, x y is the coordinate point of the original image, these two sets of values ​​must appear in at least one set, and can also exist at the same time. In addition, this command can also use gravity to redefine the coordinate system.

The final results are as follows: