-
Notifications
You must be signed in to change notification settings - Fork 1
Imaging
theonlylawislove edited this page Feb 18, 2013
·
22 revisions
The layout builder is responsible for building the canvas/image dimensions based on some parameters.
- Width/Height - Sets the desired height/width of the image. The only instance the resulting image will be smaller is if the original source image is smaller. Set Scale=Both to upscale these images and ensure the output always matches 'width' and 'height'. If both width and height are specified, the image will be 'letterboxed' to match the desired aspect ratio. Change the Mode property to adjust this behavior.
- MaxWidth/MaxHeight - Sets the maximum desired width/height of the image. The image may be smaller than this value to maintain aspect ratio when both maxwidth and maxheight are specified.
-
Mode - How to resolve aspect ratio differences between the requested size and the original image's size. The default is "none".
- mode=none = If width/height are specified , mode=pad will be used. If maxwidth/maxheight are used, mode=max will be used.
- mode=max = Width and height are considered maximum values. The resulting image may be smaller to maintain its aspect ratio. The image may also be smaller if the source image is smaller
- mode=pad = Width and height are considered exact values - padding is used if there is an aspect ratio difference. Use anchor to override the MiddleCenter default.
- mode=crop = Width and height are considered exact values - cropping is used if there is an aspect ratio difference. Use anchor to override the MiddleCenter default.
- mode=stretch = Width and height are considered exact values - if there is an aspect ratio difference, the image is stretched.
-
Anchor - Determines where the image will be anchored if there is padding or cropping. The default is "middleCenter".
- anchor=topLeft - Content is vertically aligned at the top, and horizontally aligned on the left.
- anchor=topCenter - Content is vertically aligned at the top, and horizontally aligned at the center.
- anchor=topRight - Content is vertically aligned at the top, and horizontally aligned on the right.
- anchor=middleLeft - Content is vertically aligned in the middle, and horizontally aligned onthe left.
- anchor=middleCenter - Content is vertically aligned in the middle, and horizontally aligned at the center.
- anchor=middleRight - Content is vertically aligned in the middle, and horizontally aligned on the right.
- anchor=bottomLeft - Content is vertically aligned at the bottom, and horizontally aligned on the left.
- anchor=bottomCenter - Content is vertically aligned at the bottom, and horizontally aligned at the center.
- anchor=bottomRight - Content is vertically aligned at the bottom, and horizontally aligned on the right.
-
Scale - Controls whether the image is allowed to upscale, downscale, both, or if only the canvas gets to be upscaled.
- scale=down - The default. Only downsamples images - never enlarges. If an image is smaller than 'width' and 'height', the image coordinates are used instead.
- scale=up - Only upscales (zooms) images - never downsamples. If an image is larger than 'width' and 'height', the image coordinates are used instead.
- scale=both - Upscales and downscales images according to 'width' and 'height'.
- scale=canvas - When the image is smaller than the requested size, padding is added instead of stretching the image.
Based on these values, you will get an ImageLayout object that contains the canvas size and the destination of the image (floating rectangle).
Separating the layout building of the image from the actual re-sizing allows use to reuse this logic on problems such as PDF building.
IImageLayoutBuilder imageLayoutBuilder = Noodle.EngineContext.Resolve<IImageLayoutBuilder>();
var sourceSize = new Size(100, 150);
var resizeSettings = new ResizeSettings("width=200&height=200&mode=fit");
ImageLayout layout = imageLayoutBuilder.BuildLayout(sourceSize, resizeSettings);
The image manipulator will re-size an actual image using the logic contained in the IImageManipulator. The result is a Bitmap object that can be with as you please. The first parameter is an object which can be a string a string (image path), Image, Bitmap, VirtualFile or byte array.
IImageManipulator imageManipulator = Noodle.EngineContext.Resolve<IImageManipulator>();
Bitmap resized = imageManipulator.Resize("c:\image.jpg", new ResizeSettings("width=200&height=200&mode=fit"));