Merge pull request #46 from dustout/feature/20250525-add-grayscale-support

dustout · web-flow · commit 1765392aaa53 · 2025-05-25T20:25:26.000-06:00
Added grayscale support
diff --git a/CommonImageActions.AspNetCore/CommonImageActionsMiddleware.cs b/CommonImageActions.AspNetCore/CommonImageActionsMiddleware.cs
@@ -352,6 +352,12 @@ public static ImageActions ConvertQueryStringToImageActions(string queryString,
                 imageActions.Shape = shape;
             }
 
+            var isGrayscale = query["gray"] ?? query["g"];
+            if (Boolean.TryParse(isGrayscale, out var asIsGrayscale))
+            {
+                imageActions.IsGrayscale = asIsGrayscale;
+            }
+
             //add unofficial support for other interpretations of mode based on feedback
             //example: I like zoom, but others feel it should be call crop, so just fall back to zoom
             //         as a general catchall for any other interpretations
diff --git a/CommonImageActions.Core/ImageActionQueryBuilder.cs b/CommonImageActions.Core/ImageActionQueryBuilder.cs
@@ -67,6 +67,12 @@ public ImageActionQueryBuilder Text(string text)
             return this;
         }
 
+        public ImageActionQueryBuilder IsGrayscale(bool isGrayscale)
+        {
+            _actions.IsGrayscale = isGrayscale;
+            return this;
+        }
+
         public ImageActionQueryBuilder AsInitials(bool asInitials)
         {
             _actions.AsInitials = asInitials;
diff --git a/CommonImageActions.Core/ImageActions.cs b/CommonImageActions.Core/ImageActions.cs
@@ -51,6 +51,8 @@ public ImageActions(ImageActions defaults)
 
         public bool? ChooseImageColorFromTextValue { get; set; }
 
+        public bool? IsGrayscale { get; set; }
+
         public SKEncodedImageFormat? Format { get; set; }
 
         public ImageMode? Mode { get; set; }
diff --git a/CommonImageActions.Core/ImageProcessor.cs b/CommonImageActions.Core/ImageProcessor.cs
@@ -237,7 +237,7 @@ public static SKData EncodeSkiaImage(SKImage newImage, ImageActions imageActions
 
                     var a = new SKPath();
                     a.AddCircle(centerX, centerY, radius);
-                    canvas.ClipPath(a, antialias:true);
+                    canvas.ClipPath(a, antialias: true);
                 }
                 else if (imageActions.Shape == ImageShape.Ellipse)
                 {
@@ -246,7 +246,7 @@ public static SKData EncodeSkiaImage(SKImage newImage, ImageActions imageActions
                     var centerY = imageActions.Height.Value / 2;
                     var r = GetSKRectByWidthAndHeight(0, 0, imageActions.Width.Value, imageActions.Height.Value);
                     a.AddOval(r);
-                    canvas.ClipPath(a, antialias:true);
+                    canvas.ClipPath(a, antialias: true);
                 }
                 else if (imageActions.Shape == ImageShape.RoundedRectangle)
                 {
@@ -261,7 +261,7 @@ public static SKData EncodeSkiaImage(SKImage newImage, ImageActions imageActions
                     {
                         a.AddRoundRect(r, CornerRadius, CornerRadius);
                     }
-                    canvas.ClipPath(a, antialias:true);
+                    canvas.ClipPath(a, antialias: true);
                 }
             }
 
@@ -321,9 +321,20 @@ public static SKData EncodeSkiaImage(SKImage newImage, ImageActions imageActions
 
             var imagePaint = new SKPaint
             {
-                FilterQuality = SKFilterQuality.High
+                FilterQuality = SKFilterQuality.High,
             };
 
+            if(imageActions.IsGrayscale.HasValue && imageActions.IsGrayscale == true)
+            {
+                imagePaint.ColorFilter = SKColorFilter.CreateColorMatrix(new float[]
+                {
+                    0.3f, 0.59f, 0.11f, 0, 0,
+                    0.3f, 0.59f, 0.11f, 0, 0,
+                    0.3f, 0.59f, 0.11f, 0, 0,
+                    0,    0,    0,    1, 0
+                });
+            }
+            
             //write to the canvas
             switch (imageActions.Mode)
             {
@@ -335,7 +346,7 @@ public static SKData EncodeSkiaImage(SKImage newImage, ImageActions imageActions
                     if (isOddRotation)
                     {
                         var drawRect = GetSKRectByWidthAndHeight(rotationOffsetX, rotationOffsetY, imageActions.Height.Value, imageActions.Width.Value);
-                        canvas.DrawImage(newImage, drawRect, paint:imagePaint);
+                        canvas.DrawImage(newImage, drawRect, paint: imagePaint);
                     }
                     else
                     {
@@ -357,7 +368,7 @@ public static SKData EncodeSkiaImage(SKImage newImage, ImageActions imageActions
                     var fitOffsetY = (imageActions.Height.Value - fitScaledHeight) / 2f;
                     var drawRect2 = GetSKRectByWidthAndHeight(fitOffsetX, fitOffsetY, fitScaledWidth, fitScaledHeight);
 
-                    canvas.DrawImage(newImage, drawRect2);
+                    canvas.DrawImage(newImage, drawRect2, paint: imagePaint);
                     break;
 
                 //zoom in and fill canvas while maintaing aspect ratio
diff --git a/CommonImageActions.Pdf/PdfActionQueryBuilder.cs b/CommonImageActions.Pdf/PdfActionQueryBuilder.cs
@@ -109,6 +109,12 @@ public PdfActionQueryBuilder Height(int height)
             return this;
         }
 
+        public PdfActionQueryBuilder IsGrayscale(bool isGrayscale)
+        {
+            _actions.IsGrayscale = isGrayscale;
+            return this;
+        }
+
         public PdfActionQueryBuilder Page(int page)
         {
             _actions.Page = page;
diff --git a/CommonImageActions.SampleAspnetCoreProject/wwwroot/index.html b/CommonImageActions.SampleAspnetCoreProject/wwwroot/index.html
@@ -210,6 +210,23 @@ <h5 class="card-title">Page 2</h5>
             </div>
         </div>
 
+        <div class="mb-5">
+            <h2>Grayscale</h2>
+            <div class="row">
+
+                <div class="card m-2" style="width: 18rem;">
+                    <div class="card-body text-center">
+                        <p>
+                            <img src="/test/thumbsUp.jpg?w=100&g=true">
+                        </p>
+                        <h5 class="card-title">Grayscale</h5>
+                        <code>/test/thumbsUp.jpg?w=100&g=true</code>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+
         <div class="mb-5">
             <h2>JPEG EXIF</h2>
             <div class="row">
diff --git a/README.md b/README.md
@@ -155,6 +155,7 @@ app.UseCommonImageActions(
 |  ------------- | ------------- | ------------- |
 | width, w  | Integer | Set the width of the image |
 | height, h | Integer | Set the height of the image |
+| gray, g | Boolean | When true set image to grayscale |
 | mode, m | Max, Fit, Zoom, Stretch | **Max**: If both width and height are present then the image will be resized to the max of whatever parameter, and the width will scale accordingly. <br> **Fit**: When both width and height are present fit the image into the container without adjusting the ratio.  <br> **Zoom**: When both width and height are present zoom the image in to fill the space. <br> **Stretch** (default): When both width and height are present stretch the image to fit the container. |
 | shape, s | Circle, Ellipse, RoundedRectangle  | Mask out the image to be of a certain shape. |
 | corner, cr | Integer | The corner radius when shape is RoundedRectangle. Default is 10. |

Original file line number	Diff line number	Diff line change
`@@ -67,6 +67,12 @@ public ImageActionQueryBuilder Text(string text)`
`67`	`67`	`return this;`
`68`	`68`	`}`
`69`	`69`
	`70`	`+ public ImageActionQueryBuilder IsGrayscale(bool isGrayscale)`
	`71`	`+ {`
	`72`	`+ _actions.IsGrayscale = isGrayscale;`
	`73`	`+ return this;`
	`74`	`+ }`
	`75`	`+`
`70`	`76`	`public ImageActionQueryBuilder AsInitials(bool asInitials)`
`71`	`77`	`{`
`72`	`78`	`_actions.AsInitials = asInitials;`
Original file line number	Diff line number	Diff line change
`@@ -237,7 +237,7 @@ public static SKData EncodeSkiaImage(SKImage newImage, ImageActions imageActions`
`237`	`237`
`238`	`238`	`var a = new SKPath();`
`239`	`239`	`a.AddCircle(centerX, centerY, radius);`
`240`		`- canvas.ClipPath(a, antialias:true);`
	`240`	`+ canvas.ClipPath(a, antialias: true);`
`241`	`241`	`}`
`242`	`242`	`else if (imageActions.Shape == ImageShape.Ellipse)`
`243`	`243`	`{`
`@@ -246,7 +246,7 @@ public static SKData EncodeSkiaImage(SKImage newImage, ImageActions imageActions`
`246`	`246`	`var centerY = imageActions.Height.Value / 2;`
`247`	`247`	`var r = GetSKRectByWidthAndHeight(0, 0, imageActions.Width.Value, imageActions.Height.Value);`
`248`	`248`	`a.AddOval(r);`
`249`		`- canvas.ClipPath(a, antialias:true);`
	`249`	`+ canvas.ClipPath(a, antialias: true);`
`250`	`250`	`}`
`251`	`251`	`else if (imageActions.Shape == ImageShape.RoundedRectangle)`
`252`	`252`	`{`
`@@ -261,7 +261,7 @@ public static SKData EncodeSkiaImage(SKImage newImage, ImageActions imageActions`
`261`	`261`	`{`
`262`	`262`	`a.AddRoundRect(r, CornerRadius, CornerRadius);`
`263`	`263`	`}`
`264`		`- canvas.ClipPath(a, antialias:true);`
	`264`	`+ canvas.ClipPath(a, antialias: true);`
`265`	`265`	`}`
`266`	`266`	`}`
`267`	`267`
`@@ -321,9 +321,20 @@ public static SKData EncodeSkiaImage(SKImage newImage, ImageActions imageActions`
`321`	`321`
`322`	`322`	`var imagePaint = new SKPaint`
`323`	`323`	`{`
`324`		`- FilterQuality = SKFilterQuality.High`
	`324`	`+ FilterQuality = SKFilterQuality.High,`
`325`	`325`	`};`
`326`	`326`
	`327`	`+ if(imageActions.IsGrayscale.HasValue && imageActions.IsGrayscale == true)`
	`328`	`+ {`
	`329`	`+ imagePaint.ColorFilter = SKColorFilter.CreateColorMatrix(new float[]`
	`330`	`+ {`
	`331`	`+ 0.3f, 0.59f, 0.11f, 0, 0,`
	`332`	`+ 0.3f, 0.59f, 0.11f, 0, 0,`
	`333`	`+ 0.3f, 0.59f, 0.11f, 0, 0,`
	`334`	`+ 0, 0, 0, 1, 0`
	`335`	`+ });`
	`336`	`+ }`
	`337`	`+`
`327`	`338`	`//write to the canvas`
`328`	`339`	`switch (imageActions.Mode)`
`329`	`340`	`{`
`@@ -335,7 +346,7 @@ public static SKData EncodeSkiaImage(SKImage newImage, ImageActions imageActions`
`335`	`346`	`if (isOddRotation)`
`336`	`347`	`{`
`337`	`348`	`var drawRect = GetSKRectByWidthAndHeight(rotationOffsetX, rotationOffsetY, imageActions.Height.Value, imageActions.Width.Value);`
`338`		`- canvas.DrawImage(newImage, drawRect, paint:imagePaint);`
	`349`	`+ canvas.DrawImage(newImage, drawRect, paint: imagePaint);`
`339`	`350`	`}`
`340`	`351`	`else`
`341`	`352`	`{`
`@@ -357,7 +368,7 @@ public static SKData EncodeSkiaImage(SKImage newImage, ImageActions imageActions`
`357`	`368`	`var fitOffsetY = (imageActions.Height.Value - fitScaledHeight) / 2f;`
`358`	`369`	`var drawRect2 = GetSKRectByWidthAndHeight(fitOffsetX, fitOffsetY, fitScaledWidth, fitScaledHeight);`
`359`	`370`
`360`		`- canvas.DrawImage(newImage, drawRect2);`
	`371`	`+ canvas.DrawImage(newImage, drawRect2, paint: imagePaint);`
`361`	`372`	`break;`
`362`	`373`
`363`	`374`	`//zoom in and fill canvas while maintaing aspect ratio`
Original file line number	Diff line number	Diff line change
`@@ -109,6 +109,12 @@ public PdfActionQueryBuilder Height(int height)`
`109`	`109`	`return this;`
`110`	`110`	`}`
`111`	`111`
	`112`	`+ public PdfActionQueryBuilder IsGrayscale(bool isGrayscale)`
	`113`	`+ {`
	`114`	`+ _actions.IsGrayscale = isGrayscale;`
	`115`	`+ return this;`
	`116`	`+ }`
	`117`	`+`
`112`	`118`	`public PdfActionQueryBuilder Page(int page)`
`113`	`119`	`{`
`114`	`120`	`_actions.Page = page;`