This project has moved and is read-only. For the latest updates, please go here.

add white bars/background wider than a portrait image (centering the photo)

Jan 6, 2016 at 3:10 PM
Edited Jan 6, 2016 at 3:10 PM
hey guys,

i've used imagemagick command line code for an asp.net site which converted a scripted batch set of images, but am currently working with the magick.net wrapper for c#.

basically what I am trying to achieve (and somewhat unsuccessfully at the time) is to add a basic white background that is of a fixed width, wider than the portrait image (which comes from an aws bucket, so url based), while centering the portrait image in the end result.

if anyone has any tips or suggestions, thank you in advance!
Jan 6, 2016 at 3:57 PM
Can you post your command line commands?
Jan 6, 2016 at 5:16 PM
the scenario i described in the beginning (command line reference) was for something different than i am attempting at this time.
Jan 7, 2016 at 11:57 AM
You can use the Extent method of MagickImage for this. Below is a simple example:
using (MagickImage portrait = new MagickImage("xc:red", 50, 100))
{
  portrait.Extent(250, 250, Gravity.Center, new MagickColor("white"));
}
Jan 7, 2016 at 2:10 PM
Thanks a bunch, I will give this a try. At the moment I am testing/debugging the use of DrawRectangle but I will give this a shot and get back to you.
Jan 7, 2016 at 3:14 PM
Edited Jan 7, 2016 at 3:14 PM
So the above example I couldn't get to work as it threw an error on the string "xc:red", but I think what it was suppose to do was create a red 'portrait sized' image with white bars 300px in width on each side, correct?

I have implemented the following for my case and I am not having much luck changing the image at all so I assume I am just doing something wrong...
Private static void ForceLetterbox(MagickImage image)
{
    Using (MagickImage portrait = new MagickImage(MagickColor.Transparent, image.Width, image.Height))
    {
          Portrait.Extent(300, 300, Gravity.Center, new MagickColor("White"));
          Image.Composite(portrait, Gravity.Center, CompositeOperator.DstIn);
    }
}
Sorry for the improper syntax/formatting, typed on a tiny keyboard...
Jan 7, 2016 at 3:28 PM
Your code should be changed to this:
private static void ForceLetterbox(MagickImage image)
{
  image.Extent(300, 300, Gravity.Center, new MagickColor("White"));
}
Or maybe I understand incorrectly what you want to accomplish.
Jan 7, 2016 at 7:34 PM
Edited Jan 7, 2016 at 7:39 PM
https://www.dropbox.com/s/sju8n9jkkdrvden/2016-01-07%2013.20.19.jpg?dl=0

This image ultimately, I would like centered and scaled appropriately within a resulting image of 1200 width, 629 height (or 1.91 aspect ratio).

The code you above, thank you, seems to just take my image and make it 300x300 piece of the image.

Sorry, I probably did not do a good job of describing my desired results, but basically I want to supply an image URL and if the height is greater than the width, then I want to center it on top of an IM white rectangle with a width of 1200 and a height of 629.
Jan 7, 2016 at 7:51 PM
Sorry I misread your question earlier. The extent method extents your image to the specified result. That means that if you want it to be 1200x629 you should specify that as the arguments for the extent method:
private static void ForceLetterbox(MagickImage image)
{
  image.Extent(1200 , 629, Gravity.Center, new MagickColor("White"));
}
Jan 7, 2016 at 8:09 PM
Ok, so this will take whatever image I pass in, and center it into a white rectangle?
Jan 7, 2016 at 8:18 PM
This code assumes that your input image is not larger then 1200x629. If you want to be able to handle larger images you should first resize it like this:
if (image.Width > 1200 || image.Height > 629)
  image.Resize(1200, 629);
This method will resize the image to fit inside a rectangle that is 1200x629. And after the resize you should extent to image to 1200x629.
Jan 7, 2016 at 8:51 PM
Edited Jan 7, 2016 at 8:52 PM
Thank you dude. How can I contribute to your project, donation wise? It's unreal to receive such nice support such as what you've provided me today. I havn't got it 100% perfect yet, but when I do, I will share the completed code and underlying pieces which we did not discuss here. All that aside, you're assistance got me closer and closer each time, and I would be happy to donate to the project or yourself if that's the case.

Open Source, Open Support, and I'm a happy camper today :)
Jan 7, 2016 at 9:10 PM
Edited Jan 7, 2016 at 9:34 PM
Thanks for considering to contribute to this project. You could get me something from my amazon wish list: http://www.amazon.co.uk/registry/wishlist/1C3TE3001VQZE. I also have a PayPal account if you prefer that, you can contact me through CodePlex to get my account information.
Jan 11, 2016 at 6:27 PM
I sure will! Check out your list and consider PayPal depending on how big your 'wishes' get. Haha. I am having one problem. The ultimate goal is for the sidebars to be white, or even transparent. Yet, while I was testing I was substituting (in image.Extent) the new MagickColor("White") for new MagickColor("Black") for better visibility on whether the code was working. Now, switching to White is not having an effect, it's the weirdest thing. Here is what I've tried so far...

Image.Extent(1200, 629, new MagickImage("White"))

Image.Extent(1200, 629, MagickImage.Transparent)

Image.Extent(1200, 629, Color.White)

So far they all continuously give me Black. Any ideas?
Jan 11, 2016 at 7:48 PM
Your code uses MagickImage instead of MagickColor but that is probably a typo. I am guessing you made some kind of mistake in your project. Could you share your class on something like dropbox so I can help you figure out what is going wrong?
Jan 11, 2016 at 7:52 PM
Oh I'm sorry, yes that was a typo. 'MagickColor("White"))' and 'MagickColor.Transparent'
Jan 11, 2016 at 8:36 PM
I see now what the problem is, AWS is returning me a cached image from testing. I shall reap load the image with the White alteration and let you know the results.
Jan 11, 2016 at 8:52 PM
That was my issue, thank you again :)