Browse Source

Rename RotateInside to RotateBounded

Former-commit-id: c2f8940d3852b524b66a9c1a402adc155c5efe2b
Former-commit-id: 5cc3f548c68cf825f0b04fbb14eb9e67529c9bdd
pull/17/head
James South 11 years ago
parent
commit
7a396b8dc9
  1. 5
      src/ImageProcessor.Playground/Program.cs
  2. 6
      src/ImageProcessor.UnitTests/ImageFactoryUnitTests.cs
  3. 1
      src/ImageProcessor.Web/Configuration/Resources/processing.config.transform
  4. 2
      src/ImageProcessor.Web/Helpers/CommonParameterParserUtility.cs
  5. 1
      src/ImageProcessor.Web/ImageProcessor.Web.csproj
  6. 106
      src/ImageProcessor.Web/Processors/RotateBounded.cs
  7. 19
      src/ImageProcessor/ImageFactory.cs
  8. 3
      src/ImageProcessor/ImageProcessor.csproj
  9. 20
      src/ImageProcessor/Imaging/Filters/Artistic/HalftoneFilter.cs
  10. 26
      src/ImageProcessor/Imaging/Helpers/ImageMaths.cs
  11. 30
      src/ImageProcessor/Imaging/RotateInsideLayer.cs
  12. 59
      src/ImageProcessor/Processors/RotateBounded.cs
  13. 381
      src/TestWebsites/MVC/Views/Home/Index.cshtml
  14. 1
      src/TestWebsites/MVC/config/imageprocessor/processing.config

5
src/ImageProcessor.Playground/Program.cs

@ -103,13 +103,14 @@ namespace ImageProcessor.PlayGround
//.Format(new PngFormat())
//.BackgroundColor(Color.Cyan)
//.ReplaceColor(Color.FromArgb(255, 223, 224), Color.FromArgb(121, 188, 255), 128)
.Resize(size)
//.Resize(size)
//.Resize(new ResizeLayer(size, ResizeMode.Max))
// .Resize(new ResizeLayer(size, ResizeMode.Stretch))
//.DetectEdges(new Laplacian3X3EdgeFilter(), true)
//.DetectEdges(new LaplacianOfGaussianEdgeFilter())
//.EntropyCrop()
.Halftone(true)
//.Halftone(true)
.RotateBounded(5, false)
//.Filter(MatrixFilters.Invert)
//.Contrast(50)
//.Filter(MatrixFilters.Comic)

6
src/ImageProcessor.UnitTests/ImageFactoryUnitTests.cs

@ -17,7 +17,6 @@ namespace ImageProcessor.UnitTests
using ImageProcessor.Imaging;
using ImageProcessor.Imaging.Filters.EdgeDetection;
using ImageProcessor.Imaging.Filters.Photo;
using ImageProcessor.Imaging.Formats;
using NUnit.Framework;
@ -133,7 +132,6 @@ namespace ImageProcessor.UnitTests
imageFactory.Image,
"because the alpha operation should have been applied on {0}",
imageFactory.ImagePath);
}
}
@ -475,7 +473,7 @@ namespace ImageProcessor.UnitTests
foreach (ImageFactory imageFactory in this.ListInputImages())
{
Image original = (Image)imageFactory.Image.Clone();
imageFactory.RotateInside(new RotateInsideLayer { Angle = 45, KeepImageDimensions = true });
imageFactory.RotateBounded(45, true);
imageFactory.Image.Width.Should().Be(original.Width, "because the rotated image dimensions should not have changed");
imageFactory.Image.Height.Should().Be(original.Height, "because the rotated image dimensions should not have changed");
@ -491,7 +489,7 @@ namespace ImageProcessor.UnitTests
foreach (ImageFactory imageFactory in this.ListInputImages())
{
Image original = (Image)imageFactory.Image.Clone();
imageFactory.RotateInside(new RotateInsideLayer { Angle = 45, KeepImageDimensions = false });
imageFactory.RotateBounded(45);
imageFactory.Image.Width.Should().NotBe(original.Width, "because the rotated image dimensions should have changed");
imageFactory.Image.Height.Should().NotBe(original.Height, "because the rotated image dimensions should have changed");

1
src/ImageProcessor.Web/Configuration/Resources/processing.config.transform

@ -50,6 +50,7 @@
</settings>
</plugin>
<plugin name="Rotate" type="ImageProcessor.Web.Processors.Rotate, ImageProcessor.Web"/>
<plugin name="RotateBounded" type="ImageProcessor.Web.Processors.RotateBounded, ImageProcessor.Web"/>
<plugin name="RoundedCorners" type="ImageProcessor.Web.Processors.RoundedCorners, ImageProcessor.Web"/>
<plugin name="Saturation" type="ImageProcessor.Web.Processors.Saturation, ImageProcessor.Web"/>
<plugin name="Tint" type="ImageProcessor.Web.Processors.Tint, ImageProcessor.Web"/>

2
src/ImageProcessor.Web/Helpers/CommonParameterParserUtility.cs

@ -39,7 +39,7 @@ namespace ImageProcessor.Web.Helpers
/// <summary>
/// The regular expression to search strings for angles.
/// </summary>
private static readonly Regex AngleRegex = new Regex(@"(^(rotate|angle)|[^.](&,)?rotate|angle)(=|-)[^&|,]+", RegexOptions.Compiled);
private static readonly Regex AngleRegex = new Regex(@"(^(rotate(bounded)?|angle)|[^.](&,)?rotate(bounded)?|angle)(=|-)[^&|,]+", RegexOptions.Compiled);
/// <summary>
/// The regular expression to search strings for values between 1 and 100.

1
src/ImageProcessor.Web/ImageProcessor.Web.csproj

@ -61,6 +61,7 @@
<Compile Include="Processors\Overlay.cs" />
<Compile Include="Processors\Pixelate.cs" />
<Compile Include="Processors\ReplaceColor.cs" />
<Compile Include="Processors\RotateBounded.cs" />
<Compile Include="Services\IImageService.cs" />
<Compile Include="Caching\MemCache.cs" />
<Compile Include="Caching\CacheIndexer.cs" />

106
src/ImageProcessor.Web/Processors/RotateBounded.cs

@ -0,0 +1,106 @@
// --------------------------------------------------------------------------------------------------------------------
// <copyright file="RotateBounded.cs" company="James South">
// Copyright (c) James South.
// Licensed under the Apache License, Version 2.0.
// </copyright>
// <summary>
// Encapsulates methods to rotate an image without expanding the canvas.
// </summary>
// --------------------------------------------------------------------------------------------------------------------
namespace ImageProcessor.Web.Processors
{
using System;
using System.Text.RegularExpressions;
using ImageProcessor.Processors;
using ImageProcessor.Web.Helpers;
/// <summary>
/// Encapsulates methods to rotate an image without expanding the canvas.
/// </summary>
public class RotateBounded : IWebGraphicsProcessor
{
/// <summary>
/// The regular expression to search strings for.
/// </summary>
private static readonly Regex QueryRegex = new Regex(@"rotatebounded=[^&]+", RegexOptions.Compiled);
/// <summary>
/// The regular expression to search for.
/// </summary>
private static readonly Regex BoundRegex = new Regex(@"rotatebounded.keepsize=true", RegexOptions.Compiled);
/// <summary>
/// Initializes a new instance of the <see cref="RotateBounded"/> class.
/// </summary>
public RotateBounded()
{
this.Processor = new ImageProcessor.Processors.RotateBounded();
}
#region IGraphicsProcessor Members
/// <summary>
/// Gets the regular expression to search strings for.
/// </summary>
public Regex RegexPattern
{
get
{
return QueryRegex;
}
}
/// <summary>
/// Gets the order in which this processor is to be used in a chain.
/// </summary>
public int SortOrder
{
get;
private set;
}
/// <summary>
/// Gets the associated graphics processor.
/// </summary>
public IGraphicsProcessor Processor { get; private set; }
/// <summary>
/// The position in the original string where the first character of the captured substring was found.
/// </summary>
/// <param name="queryString">
/// The query string to search.
/// </param>
/// <returns>
/// The zero-based starting position in the original string where the captured substring was found.
/// </returns>
public int MatchRegexIndex(string queryString)
{
int index = 0;
// Set the sort order to max to allow filtering.
this.SortOrder = int.MaxValue;
foreach (Match match in this.RegexPattern.Matches(queryString))
{
if (match.Success)
{
if (index == 0)
{
// Set the index on the first instance only.
this.SortOrder = match.Index;
float angle = CommonParameterParserUtility.ParseAngle(match.Value);
bool keepSize = BoundRegex.Match(queryString).Success;
Tuple<float, bool> rotateParams = new Tuple<float, bool>(angle, keepSize);
this.Processor.DynamicParameter = rotateParams;
}
index += 1;
}
}
return this.SortOrder;
}
#endregion
}
}

19
src/ImageProcessor/ImageFactory.cs

@ -896,17 +896,28 @@ namespace ImageProcessor
}
/// <summary>
/// Rotates the image inside its area; keeps the area straight.
/// Rotates the image without expanding the canvas to fit the image.
/// </summary>
/// <param name="rotateLayer">The rotation layer parameters.</param>
/// <param name="degrees">
/// The angle at which to rotate the image in degrees.
/// </param>
/// <param name="keepSize">
/// Whether to keep the original image dimensions.
/// <para>
/// If set to true, the image is zoomed to fit the bounding area.
/// </para>
/// <para>
/// If set to false, the area is cropped to fit the rotated image.
/// </para>
/// </param>
/// <returns>
/// The current instance of the <see cref="T:ImageProcessor.ImageFactory" /> class.
/// </returns>
public ImageFactory RotateInside(RotateInsideLayer rotateLayer)
public ImageFactory RotateBounded(float degrees, bool keepSize = false)
{
if (this.ShouldProcess)
{
RotateInside rotate = new RotateInside { DynamicParameter = rotateLayer };
RotateBounded rotate = new RotateBounded { DynamicParameter = new Tuple<float, bool>(degrees, keepSize) };
this.CurrentImageFormat.ApplyProcessor(rotate.ProcessImage, this);
}

3
src/ImageProcessor/ImageProcessor.csproj

@ -214,7 +214,6 @@
<Compile Include="Imaging\Filters\Photo\IMatrixFilter.cs" />
<Compile Include="Imaging\ResizeMode.cs" />
<Compile Include="Imaging\Resizer.cs" />
<Compile Include="Imaging\RotateInsideLayer.cs" />
<Compile Include="Imaging\RoundedCornerLayer.cs" />
<Compile Include="Imaging\TextLayer.cs" />
<Compile Include="Processors\Alpha.cs" />
@ -234,7 +233,7 @@
<Compile Include="Processors\Overlay.cs" />
<Compile Include="Processors\Pixelate.cs" />
<Compile Include="Processors\ReplaceColor.cs" />
<Compile Include="Processors\RotateInside.cs" />
<Compile Include="Processors\RotateBounded.cs" />
<Compile Include="Processors\RoundedCorners.cs" />
<Compile Include="Processors\Saturation.cs" />
<Compile Include="Processors\Flip.cs" />

20
src/ImageProcessor/Imaging/Filters/Artistic/HalftoneFilter.cs

@ -393,23 +393,9 @@ namespace ImageProcessor.Imaging.Filters.Artistic
foreach (float angle in angles)
{
double radians = ImageMaths.DegreesToRadians(angle);
double radiansSin = Math.Sin(radians);
double radiansCos = Math.Cos(radians);
double width1 = (height * radiansSin) + (width * radiansCos);
double height1 = (width * radiansSin) + (height * radiansCos);
// Find dimensions in the other direction
radiansSin = Math.Sin(-radians);
radiansCos = Math.Cos(-radians);
double width2 = (height * radiansSin) + (width * radiansCos);
double height2 = (width * radiansSin) + (height * radiansCos);
int maxW = Math.Max(maxWidth, Convert.ToInt32(Math.Max(Math.Abs(width1), Math.Abs(width2))));
int maxH = Math.Max(maxHeight, Convert.ToInt32(Math.Max(Math.Abs(height1), Math.Abs(height2))));
maxHeight = maxH;
maxWidth = maxW;
Size rotatedSize = ImageMaths.GetBoundingRotatedRectangle(width, height, angle).Size;
maxWidth = Math.Max(maxWidth, rotatedSize.Width);
maxHeight = Math.Max(maxHeight, rotatedSize.Height);
}
return new Rectangle(0, 0, maxWidth, maxHeight);

26
src/ImageProcessor/Imaging/Helpers/ImageMaths.cs

@ -109,24 +109,21 @@ namespace ImageProcessor.Imaging.Helpers
/// </summary>
/// <param name="width">The width of the image.</param>
/// <param name="height">The height of the image.</param>
/// <param name="angle">The angle of rotation.</param>
/// <param name="angleInDegrees">The angle of rotation.</param>
/// <returns>The new size of the image</returns>
public static Rectangle GetBoundingRotatedRectangle(int width, int height, float angle)
public static Rectangle GetBoundingRotatedRectangle(int width, int height, float angleInDegrees)
{
double widthAsDouble = width;
double heightAsDouble = height;
double radians = DegreesToRadians(angle);
double radians = DegreesToRadians(angleInDegrees);
double radiansSin = Math.Sin(radians);
double radiansCos = Math.Cos(radians);
double width1 = (heightAsDouble * radiansSin) + (widthAsDouble * radiansCos);
double height1 = (widthAsDouble * radiansSin) + (heightAsDouble * radiansCos);
double width1 = (height * radiansSin) + (width * radiansCos);
double height1 = (width * radiansSin) + (height * radiansCos);
// Find dimensions in the other direction
radiansSin = Math.Sin(-radians);
radiansCos = Math.Cos(-radians);
double width2 = (heightAsDouble * radiansSin) + (widthAsDouble * radiansCos);
double height2 = (widthAsDouble * radiansSin) + (heightAsDouble * radiansCos);
double width2 = (height * radiansSin) + (width * radiansCos);
double height2 = (width * radiansSin) + (height * radiansCos);
// Get the external vertex for the rotation
Rectangle result = new Rectangle(
@ -307,18 +304,19 @@ namespace ImageProcessor.Imaging.Helpers
}
/// <summary>
/// Calculates the zoom needed after the rotation.
/// Calculates the zoom needed after the rotation to ensure the canvas is covered
/// by the rotated image.
/// </summary>
/// <param name="imageWidth">Width of the image.</param>
/// <param name="imageHeight">Height of the image.</param>
/// <param name="angle">The angle.</param>
/// <param name="angleInDegrees">The angle in degrees.</param>
/// <remarks>
/// Based on <see href="http://math.stackexchange.com/questions/1070853/"/>
/// </remarks>
/// <returns>The zoom needed</returns>
public static float ZoomAfterRotation(int imageWidth, int imageHeight, float angle)
public static float ZoomAfterRotation(int imageWidth, int imageHeight, float angleInDegrees)
{
double radians = angle * Math.PI / 180d;
double radians = DegreesToRadians(angleInDegrees);
double radiansSin = Math.Sin(radians);
double radiansCos = Math.Cos(radians);

30
src/ImageProcessor/Imaging/RotateInsideLayer.cs

@ -1,30 +0,0 @@
// --------------------------------------------------------------------------------------------------------------------
// <copyright file="ImageLayer.cs" company="James South">
// Copyright (c) James South.
// Licensed under the Apache License, Version 2.0.
// </copyright>
// <summary>
// Encapsulates the properties required to add an rotation layer to an image.
// </summary>
// --------------------------------------------------------------------------------------------------------------------
namespace ImageProcessor.Imaging
{
/// <summary>
/// A rotation layer to apply an inside rotation to an image
/// </summary>
public class RotateInsideLayer
{
/// <summary>
/// Gets or sets the rotation angle.
/// </summary>
public float Angle { get; set; }
/// <summary>
/// Gets or sets a value indicating whether to keep the image dimensions.
/// If set to true, the image is zoomed inside the area.
/// If set to false, the area is resized to match the rotated image.
/// </summary>
public bool KeepImageDimensions { get; set; }
}
}

59
src/ImageProcessor/Processors/RotateInside.cs → src/ImageProcessor/Processors/RotateBounded.cs

@ -1,10 +1,10 @@
// --------------------------------------------------------------------------------------------------------------------
// <copyright file="Rotate.cs" company="James South">
// <copyright file="RotateBounded.cs" company="James South">
// Copyright (c) James South.
// Licensed under the Apache License, Version 2.0.
// </copyright>
// <summary>
// Encapsulates methods to rotate the inside of an image.
// Encapsulates the methods to rotate an image without expanding the canvas.
// </summary>
// --------------------------------------------------------------------------------------------------------------------
@ -15,12 +15,11 @@ namespace ImageProcessor.Processors
using System.Drawing;
using System.Drawing.Drawing2D;
using ImageProcessor.Common.Exceptions;
using ImageProcessor.Imaging;
/// <summary>
/// Encapsulates the methods to rotate the inside of an image
/// Encapsulates the methods to rotate an image without expanding the canvas.
/// </summary>
public class RotateInside : IGraphicsProcessor
public class RotateBounded : IGraphicsProcessor
{
/// <summary>
/// Gets or sets the DynamicParameter.
@ -50,10 +49,10 @@ namespace ImageProcessor.Processors
try
{
RotateInsideLayer rotateLayer = this.DynamicParameter;
Tuple<float, bool> rotateParams = this.DynamicParameter;
// Create a rotated image.
newImage = this.RotateImage(image, rotateLayer);
newImage = this.RotateImage(image, rotateParams.Item1, rotateParams.Item2);
image.Dispose();
image = newImage;
@ -74,20 +73,35 @@ namespace ImageProcessor.Processors
/// <summary>
/// Rotates the inside of an image to the given angle at the given position.
/// </summary>
/// <param name="image">The image to rotate</param>
/// <param name="rotateLayer">The rotation layer.</param>
/// <param name="image">
/// The image to rotate
/// </param>
/// <param name="angleInDegrees">
/// The angle in degrees.
/// </param>
/// <param name="keepSize">
/// Whether to keep the image dimensions.
/// <para>
/// If set to true, the image is zoomed to fit the bounding area.
/// </para>
/// <para>
/// If set to false, the area is cropped to fit the rotated image.
/// </para>
/// </param>
/// <remarks>
/// Based on the Rotate effect
/// </remarks>
/// <returns>The image rotated to the given angle at the given position.</returns>
private Bitmap RotateImage(Image image, RotateInsideLayer rotateLayer)
/// <returns>
/// The image rotated to the given angle at the given position.
/// </returns>
private Bitmap RotateImage(Image image, float angleInDegrees, bool keepSize)
{
Size newSize = new Size(image.Width, image.Height);
float zoom = Imaging.Helpers.ImageMaths.ZoomAfterRotation(image.Width, image.Height, rotateLayer.Angle);
float zoom = Imaging.Helpers.ImageMaths.ZoomAfterRotation(image.Width, image.Height, angleInDegrees);
// if we don't keep the image dimensions, calculate the new ones
if (!rotateLayer.KeepImageDimensions)
if (!keepSize)
{
newSize.Width = (int)(newSize.Width / zoom);
newSize.Height = (int)(newSize.Height / zoom);
@ -110,13 +124,13 @@ namespace ImageProcessor.Processors
graphics.PixelOffsetMode = PixelOffsetMode.HighQuality;
graphics.CompositingQuality = CompositingQuality.HighQuality;
if (rotateLayer.KeepImageDimensions)
if (keepSize)
{
// Put the rotation point in the "center" of the image
graphics.TranslateTransform(rotateAtX, rotateAtY);
// Rotate the image
graphics.RotateTransform(rotateLayer.Angle);
graphics.RotateTransform(angleInDegrees);
// Zooms the image to fit the area
graphics.ScaleTransform(zoom, zoom);
@ -129,21 +143,22 @@ namespace ImageProcessor.Processors
}
else
{
// calculate the difference between the center of the original image and the center of the new image
int diffX = (image.Width - newSize.Width) / 2;
int diffY = (image.Height - newSize.Height) / 2;
// Calculate the difference between the center of the original image and the center
// of the new image.
int x = (image.Width - newSize.Width) / 2;
int y = (image.Height - newSize.Height) / 2;
// Put the rotation point in the "center" of the old image
graphics.TranslateTransform(rotateAtX - diffX, rotateAtY - diffY);
graphics.TranslateTransform(rotateAtX - x, rotateAtY - y);
// Rotate the image
graphics.RotateTransform(rotateLayer.Angle);
graphics.RotateTransform(angleInDegrees);
// Move the image back
graphics.TranslateTransform(-(rotateAtX - diffX), -(rotateAtY - diffY));
graphics.TranslateTransform(-(rotateAtX - x), -(rotateAtY - y));
// Draw passed in image onto graphics object
graphics.DrawImage(image, new PointF(-diffX, -diffY));
graphics.DrawImage(image, new PointF(-x, -y));
}
}

381
src/TestWebsites/MVC/Views/Home/Index.cshtml

@ -7,22 +7,17 @@
<div class="row">
<div class="col-s-6">
<h2>Resized</h2>
<img src="/images/format.Penguins.jpg?width=302"/>
<img src="/images/format-Penguins.jpg?width=302" />
<img src="/remote.axd/ipcache.blob.core.windows.net/source/IMG_0671.JPG?width=302&filter=comic" />
@*<h3>Foreign language test.</h3>
<img src="/images/udendørs.jpg?width=300" />
<img src="/images/udendørs.jpg?preset=demo&filter=comic" />
<h3>Strange name</h3>
<img src="/images/falahill_design__160p.jpg?preset=demo" />*@
</div>
@*<div class="col-s-6">
<div class="col-s-6">
<h2>Cropped </h2>
<img src="/images/format-Penguins.jpg?crop=0,0,300,225" />
<h3>Cropped Percent</h3>
<img src="/images/format-Penguins.jpg?width=300&height300&crop=0.1,0.2,0.1,0.6&cropmode=percent" />
<img src="/images/bus.jpg?width=311" />
</div>*@
</div>
</div>
</section>
<section>
@ -34,191 +29,191 @@
</div>
</section>
@*<section>
<div class="row">
<h2>Resize Crop</h2>
<div class="col-s-4">
<img src="/images/format-Penguins.jpg?width=300&height=500&mode=crop" />
</div>
<div class="col-s-8">
<img src="/images/udendørs.jpg?width=600&height=250&mode=crop" />
<img src="/images/bus.jpg?width=311&height=250&mode=crop&center=0.2,0.7" />
</div>
</div>
</section>
<section>
<div class="row">
<h2>Resize Max</h2>
<div class="col-s-4">
<img src="/images/format-Penguins.jpg?width=300&height=500&mode=max" />
</div>
<div class="col-s-8">
<img src="/images/udendørs.jpg?width=600&height=250&mode=max" />
</div>
</div>
</section>
<section>
<div class="row">
<h2>Resize Max - No Upscale</h2>
<div class="col-s-4">
<img src="/images/format-Penguins-200.jpg?width=300&height=500&mode=max&upscale=false" />
</div>
<div class="col-s-8">
<img src="/images/udendørs-374.jpg?width=600&height=250&mode=max&upscale=false" />
</div>
</div>
</section>
<section>
<div class="row">
<h2>Resize Stretch</h2>
<div class="col-s-4">
<img src="/images/format-Penguins.jpg?width=300&height=500&mode=stretch" />
</div>
<div class="col-s-8">
<img src="/images/udendørs.jpg?width=600&height=250&mode=stretch" />
</div>
</div>
</section>
<section>
<h2>Filter</h2>
<div class="row">
<div class="col-s-6">
<h3>blackwhite</h3>
<img src="/images/format-Penguins.jpg?width=300&filter=blackwhite" />
</div>
<div class="col-s-6">
<h3>comic</h3>
<img src="/images/format-Penguins.jpg?width=300&filter=comic" />
</div>
</div>
<div class="row">
<div class="col-s-6">
<h3>lomograph</h3>
<img src="/images/format-Penguins.jpg?width=300&filter=lomograph" />
</div>
<div class="col-s-6">
<h3>greyscale</h3>
<img src="/images/format-Penguins.jpg?width=300&filter=greyscale" />
</div>
</div>
<div class="row">
<div class="col-s-6">
<h3>polaroid</h3>
<img src="/images/format-Penguins.jpg?width=300&filter=polaroid" />
</div>
<div class="col-s-6">
<h3>sepia</h3>
<img src="/images/format-Penguins.jpg?width=300&filter=sepia" />
</div>
</div>
<div class="row">
<div class="col-s-6">
<h3>gotham</h3>
<img src="/images/format-Penguins.jpg?width=300&filter=gotham" />
</div>
<div class="col-s-6">
<h3>hisatch</h3>
<img src="/images/format-Penguins.jpg?width=300&filter=hisatch" />
</div>
</div>
<div class="row">
<div class="col-s-6">
<h3>losatch</h3>
<img src="/images/format-Penguins.jpg?width=300&filter=losatch" />
</div>
</div>
</section>
<section>
<div class="row">
<div class="col-s-6">
<h2>Watermark</h2>
<img src="/images/format-Penguins.jpg?width=300&watermark=text-This+is+a+long+body+of+copy+that+should+wrap|color-fff|size-24|style-italic|opacity-100|position-100-100|shadow-true|font-arial" />
</div>
<div class="col-s-6">
<h2>Format</h2>
<img src="/images/format-Penguins.jpg?width=300&format=gif" />
</div>
</div>
</section>
<section>
<div class="row">
<div class="col-s-6">
<h2>Rotate</h2>
<img src="/images/format-Penguins.jpg?width=300&rotate=angle-54,bgcolor-fff" />
</div>
<div class="col-s-6">
<h2>Quality</h2>
<img src="/images/format-Penguins.jpg?width=300&quality=5" />
</div>
</div>
</section>
<section>
<div class="row">
<div class="col-s-6">
<h2>Alpha</h2>
<img src="/images/format-Penguins.jpg?width=300&format=png&alpha=50" />
</div>
<div class="col-s-6">
<h2>Remote</h2>
</div>
</div>
</section>
<section>
<div class="row">
<div class="col-s-6">
<h2>Flip - horizontal</h2>
<img src="/images/format-Penguins.jpg?width=300&flip=horizontal" />
</div>
<div class="col-s-6">
<h2>Flip - vertical</h2>
<img src="/images/format-Penguins.jpg?width=300&flip=vertical" />
</div>
</div>
</section>
<section>
<div class="row">
<div class="col-s-6">
<h2>Gaussian Blur</h2>
<img src="/images/format-Penguins.jpg?width=300&blur=11,sigma-1.5,threshold-10" />
</div>
<div class="col-s-6">
<h2>Gaussian Sharpen</h2>
<img src="/images/format-Penguins.jpg?width=300&sharpen=11,sigma-1.5,threshold-10" />
</div>
</div>
</section>
<section>
<div class="row">
<div class="col-s-6">
<h2>Tint rgba</h2>
<img src="/images/format-Penguins.jpg?width=300&tint=175,118,166,255" />
</div>
<div class="col-s-6">
<h2>Tint Hex</h2>
<img src="/images/format-Penguins.jpg?width=300&tint=af76a6" />
</div>
</div>
</section>*@
<div class="row">
<h2>Resize Crop</h2>
<div class="col-s-4">
<img src="/images/format-Penguins.jpg?width=300&height=500&mode=crop" />
</div>
<div class="col-s-8">
<img src="/images/udendørs.jpg?width=600&height=250&mode=crop" />
<img src="/images/bus.jpg?width=311&height=250&mode=crop&center=0.2,0.7" />
</div>
</div>
</section>
<section>
<div class="row">
<h2>Resize Max</h2>
<div class="col-s-4">
<img src="/images/format-Penguins.jpg?width=300&height=500&mode=max" />
</div>
<div class="col-s-8">
<img src="/images/udendørs.jpg?width=600&height=250&mode=max" />
</div>
</div>
</section>
<section>
<div class="row">
<h2>Resize Max - No Upscale</h2>
<div class="col-s-4">
<img src="/images/format-Penguins-200.jpg?width=300&height=500&mode=max&upscale=false" />
</div>
<div class="col-s-8">
<img src="/images/udendørs-374.jpg?width=600&height=250&mode=max&upscale=false" />
</div>
</div>
</section>
<section>
<div class="row">
<h2>Resize Stretch</h2>
<div class="col-s-4">
<img src="/images/format-Penguins.jpg?width=300&height=500&mode=stretch" />
</div>
<div class="col-s-8">
<img src="/images/udendørs.jpg?width=600&height=250&mode=stretch" />
</div>
</div>
</section>
<section>
<h2>Filter</h2>
<div class="row">
<div class="col-s-6">
<h3>blackwhite</h3>
<img src="/images/format-Penguins.jpg?width=300&filter=blackwhite" />
</div>
<div class="col-s-6">
<h3>comic</h3>
<img src="/images/format-Penguins.jpg?width=300&filter=comic" />
</div>
</div>
<div class="row">
<div class="col-s-6">
<h3>lomograph</h3>
<img src="/images/format-Penguins.jpg?width=300&filter=lomograph" />
</div>
<div class="col-s-6">
<h3>greyscale</h3>
<img src="/images/format-Penguins.jpg?width=300&filter=greyscale" />
</div>
</div>
<div class="row">
<div class="col-s-6">
<h3>polaroid</h3>
<img src="/images/format-Penguins.jpg?width=300&filter=polaroid" />
</div>
<div class="col-s-6">
<h3>sepia</h3>
<img src="/images/format-Penguins.jpg?width=300&filter=sepia" />
</div>
</div>
<div class="row">
<div class="col-s-6">
<h3>gotham</h3>
<img src="/images/format-Penguins.jpg?width=300&filter=gotham" />
</div>
<div class="col-s-6">
<h3>hisatch</h3>
<img src="/images/format-Penguins.jpg?width=300&filter=hisatch" />
</div>
</div>
<div class="row">
<div class="col-s-6">
<h3>losatch</h3>
<img src="/images/format-Penguins.jpg?width=300&filter=losatch" />
</div>
</div>
</section>
<section>
<div class="row">
<div class="col-s-6">
<h2>Watermark</h2>
<img src="/images/format-Penguins.jpg?width=300&watermark=text-This+is+a+long+body+of+copy+that+should+wrap|color-fff|size-24|style-italic|opacity-100|position-100-100|shadow-true|font-arial" />
</div>
<div class="col-s-6">
<h2>Format</h2>
<img src="/images/format-Penguins.jpg?width=300&format=gif" />
</div>
</div>
</section>
<section>
<div class="row">
<div class="col-s-6">
<h2>Rotate</h2>
<img src="/images/format-Penguins.jpg?width=300&rotate=angle-54,bgcolor-fff" />
</div>
<div class="col-s-6">
<h2>Quality</h2>
<img src="/images/format-Penguins.jpg?width=300&quality=5" />
</div>
</div>
</section>
<section>
<div class="row">
<div class="col-s-6">
<h2>Alpha</h2>
<img src="/images/format-Penguins.jpg?width=300&format=png&alpha=50" />
</div>
<div class="col-s-6">
<h2>Remote</h2>
</div>
</div>
</section>
<section>
<div class="row">
<div class="col-s-6">
<h2>Flip - horizontal</h2>
<img src="/images/format-Penguins.jpg?width=300&flip=horizontal" />
</div>
<div class="col-s-6">
<h2>Flip - vertical</h2>
<img src="/images/format-Penguins.jpg?width=300&flip=vertical" />
</div>
</div>
</section>
<section>
<div class="row">
<div class="col-s-6">
<h2>Gaussian Blur</h2>
<img src="/images/format-Penguins.jpg?width=300&blur=11,sigma-1.5,threshold-10" />
</div>
<div class="col-s-6">
<h2>Gaussian Sharpen</h2>
<img src="/images/format-Penguins.jpg?width=300&sharpen=11,sigma-1.5,threshold-10" />
</div>
</div>
</section>
<section>
<div class="row">
<div class="col-s-6">
<h2>Tint rgba</h2>
<img src="/images/format-Penguins.jpg?width=300&tint=175,118,166,255" />
</div>
<div class="col-s-6">
<h2>Tint Hex</h2>
<img src="/images/format-Penguins.jpg?width=300&tint=af76a6" />
</div>
</div>
</section>*@
</article>
@*<article>
<h1>Color Profiles</h1>
<section>
<div class="row">
<div class="col-s-6">
<h2>CMYK resized jpg</h2>
<img src="/images/cmyk.jpg?width=400" />
</div>
<h1>Color Profiles</h1>
<section>
<div class="row">
<div class="col-s-6">
<h2>CMYK resized jpg</h2>
<img src="/images/cmyk.jpg?width=400" />
</div>
<div class="col-s-6">
<h2>sRGB resized jpg</h2>
<img src="/images/srgb.jpg?width=400" />
</div>
</div>
</section>
<section>
<div class="row">
<h2>Rounding</h2>
<img src="/Images/header_1.jpg?crop=0-43-683-200&width=750&height=220" />
<img src="/Images/header_1.jpg?width=750&crop=0-48-750-220" />
</div>
</section>
</article>*@
<div class="col-s-6">
<h2>sRGB resized jpg</h2>
<img src="/images/srgb.jpg?width=400" />
</div>
</div>
</section>
<section>
<div class="row">
<h2>Rounding</h2>
<img src="/Images/header_1.jpg?crop=0-43-683-200&width=750&height=220" />
<img src="/Images/header_1.jpg?width=750&crop=0-48-750-220" />
</div>
</section>
</article>*@

1
src/TestWebsites/MVC/config/imageprocessor/processing.config

@ -50,6 +50,7 @@
</settings>
</plugin>
<plugin name="Rotate" type="ImageProcessor.Web.Processors.Rotate, ImageProcessor.Web"/>
<plugin name="RotateBounded" type="ImageProcessor.Web.Processors.RotateBounded, ImageProcessor.Web"/>
<plugin name="RoundedCorners" type="ImageProcessor.Web.Processors.RoundedCorners, ImageProcessor.Web"/>
<plugin name="Saturation" type="ImageProcessor.Web.Processors.Saturation, ImageProcessor.Web"/>
<plugin name="Tint" type="ImageProcessor.Web.Processors.Tint, ImageProcessor.Web"/>

Loading…
Cancel
Save