Use ImageMagick for picture scaling, compositing, and cropping (Js+python) _javascript tips

Source: Internet
Author: User
Tags imagemagick
Recent projects need to deal with the cover of the book, that is, add a shadow line to form a spine of the concave-convex feeling, and then cut the spine, divided into two parts, so that the client implementation to open the animation. Because it needs to be processed on the server side, the use of ImageMagick is studied. Also prepare to encapsulate a node.js and Python method, mainly to talk about and then use ImageMagick to zoom in on the picture, and then crop it.

First the material file is as follows (left unhandled cover, right is the shadow that needs to be synthesized up):

Installation of the ImageMagick process will not speak, you can refer to the official Website installation method: http://www.imagemagick.org/script/install-source.php

First of all, the cover picture file.png Zoom to a height of 1024, generate newfile.png convenient and shadow picture synthesis, commands are as follows:

Copy Code code as follows:
Convert-resize x1024 file.png Newfile.png


Convert is scaled in the following ways:

Convert-resize 1024 file.jpg newfile.jpg
To get the picture width of 1024, high according to the original picture proportional calculation

Convert-resize x768 file.jpg newfile.jpg
Get the picture high 768, wide according to the original picture proportional calculation

Convert-resize 1024x768! File.jpg newfile.jpg
Fixed wide and high scaling, regardless of the original is the ratio of the width of the graph, the picture zoom to the specified size.

Convert-resize "1024x768>" File.jpg newfile.jpg
Only if the src.jpg is larger than 1024 or higher than 768, the reduction is done, otherwise the newfile.jpg and file.jpg have the same size.

Convert-resize "1024x768<" File.jpg newfile.jpg
Only if the width of the src.jpg is less than 1024 or higher than 768, the magnification is done, otherwise the newfile.jpg and file.jpg have the same size.

The next step is to synthesize the shadow file onto the cover (the Yy.png from the top left corner to the File.png build newfile.png):

Copy Code code as follows:
composite-gravity Northwest Yy.png file.png newfile.png


Here are the main explanations for the-gravity parameters:

-gravity Northwest pointing to the upper right corner
If the request is in the middle, the argument is center
If required in the lower-right corner, the parameter is southeast
Others follow the directions

After the synthesis effect is as follows:

Finally, the picture is cropped, the picture is divided into two parts, shaded parts left.png and other parts Right.png:

Copy Code code 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 picture, +x+y is the coordinate point of the original picture, the two sets of values to appear at least one group, can also exist. Alternatively, the command can use gravity to redefine the coordinate system.

The final results are as follows:

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.