Auto-fit image to a 1080p screen.

[dmonty]

I'm working on slideshow software for School Lobby TV displays 1080p. The trouble is getting end-users to resize photos to fit the screen before uploading. Can ImageMagick resize uploaded images as follows:
1) Detect image size.
2) Fit the largest dimention to screen size: either width or height.
3) Create a fuzzy background using the original image as filler.
- Enlarge background, blur, lighten, underlay on original.

Original Image:



e.g. padding the sides:



e.g. padding the top:

[fmw42]

I would say that it can be done, though there is no one function that will do it all.

You can resize an image to any specified size so that the larger dimension of the image is exact and the smaller one can be padded in many ways (simple color, extending the image, unfolding the image). See -resize and -virtual-pixel.

http://www.imagemagick.org/script/comma ... 5h5#resize
http://www.imagemagick.org/script/comma ... p#geometry
http://www.imagemagick.org/script/comma ... tual-pixel

See also my script, imageborder, below about doing various kinds of padding though not with resize. Also see my script aspectpad and aspect about resizing and either padding or cropping.

One can certainly enlarge the image, lighten, sharpen or blur and then compose the image on top of that background using -compose over -composite. See

http://www.imagemagick.org/Usage/compose/#compose
http://www.imagemagick.org/Usage/basics/#parenthesis
http://www.imagemagick.org/Usage/layers/#convert

If you have one example image and can tell me exactly what you want, I can probably put together a set of command lines to do that.

The only thing that IM cannot do is detect your screen size as it is not a GUI program. You will have to find your screen size by other API methods such as PHP and use that. But you can put IM commands into PHP via the exec() function or other APIs.

[dmonty]

If you have one example image and can tell me exactly what you want, I can probably put together a set of command lines to do that.

• The screens in the Schools are 1920x1080 (1080p). This will be the final resolution of the image.
• Students and Staff use all sorts of camera's and devices to take pictures so the input photo size would be auto-detected.
• I suspect most photos will resize Wx1080 keeping their aspect ratio and the width will have to be padded using the background texture described above. NOTE: there may be a rare exception where a photo may be extra wide and require top & bottom padding.

Here is some pseudo-code but it is a far cry from what I need it to do.

Code: Select all

convert -geometry x1080 ORIG.jpg FOREGROUND.jpg
convert -blur 2x3 -geometry 1920x ORIG.jpg BACKGROUND.jpg
# somehow center and crop the top&bottom of the background to 1920x1080.
# somehow lighten the image or overlay a 20% transparent white image on the background.
# overlay images
composite -gravity center FOREGROUND.jpg BACKGROUND.jpg

[fmw42]

This should do it. You may want to play with the -blur values. In IM -blur radiusxsigma, if you set radius=0, the radius will be determined automatically from the sigma. So I used -blur 0x5. But you can increase or decrease the sigma as desired. Also you can change the amount of white mixed with the background.

# first line -- read the image
# second line -- make a copy, blur it, resize it by width, crop the height so fits the screen size, colorize with white by 20%
# third line -- make a copy resize by height (so that width is less)
# fourth line -- delete the original and composite the resized image over the blurred image in the center.
convert 17cv28.jpg \
\( -clone 0 -blur 0x5 -resize 1920 -crop 1920x1080+0+0 +repage -fill white -colorize 20% \) \
\( -clone 0 -resize x1080 \) \
-delete 0 -gravity center -compose over -composite 17cv28_comp.jpg

http://www.fmwconcepts.com/misc_tests/r ... 8_comp.jpg

You may have an issue, if the aspect is much narrower. The command would need changing and you would need a test to check the aspect ratio of the image in comparison to the aspect ratio of the 1920x1080 display. But this gets you started.

[dmonty]

This should do it.

Awesome, just what I was looking for. Thanks for your help.

[dmonty]

You may have an issue, if the aspect is much narrower. The command would need changing and you would need a test to check the aspect ratio of the image in comparison to the aspect ratio of the 1920x1080 display. But this gets you started.

I'll throw a bunch of images at it over the next few days. Thanks again.

[anthony]

# first line -- read the image
# second line -- make a copy, blur it, resize it by width, crop the height so fits the screen size, colorize with white by 20%
# third line -- make a copy resize by height (so that width is less)
# fourth line -- delete the original and composite the resized image over the blurred image in the center.
convert 17cv28.jpg \
\( -clone 0 -blur 0x5 -resize 1920 -crop 1920x1080+0+0 +repage -fill white -colorize 20% \) \
\( -clone 0 -resize x1080 \) \
-delete 0 -gravity center -compose over -composite 17cv28_comp.jpg

I would use a non-aspect preserving resize for the blurred image... -resize 1920x1080\!
then overlay a resize image with aspect -resize 1920x1080
The crop is then not needed.

This that change it should then work fine for any image regardless of if it is it is too long or to short.

Code: Select all

convert 17cv28.jpg \
       \( -clone 0 -blur 0x5 -resize 1920x1080\! -fill white -colorize 20% \) \
       \( -clone 0 -resize 1920x1080 \) \
       -delete 0 -gravity center -composite \
       17cv28_comp.jpg