Fix blur on transparent images (#1315)

* Fix blur with transparent pixels

(cherry picked from commit 3cd49fd)

* make it a node test cause of snapshot

packages/jimp/src/__snapshots__/callbacks.test.ts.snap

@@ -17,15 +17,15 @@ FF-00-00⁷ᶠ 00-FF-00⁷ᶠ 00-00-FF⁷ᶠ
 exports[`Callbacks > with blur 1`] = `
 Visualization:
 
-7▩▵
-F0F
-2B4
+▩▴4
+C◆▴
+1 ◆
 
 Data:
 
-AA-94-3Fᶠ¹ 7E-7E-7Eᶠ¹ 54-69-BFᶠ¹
-9B-C2-52ᵈ⁴ 85-A7-85ᵈ⁴ 6E-8B-B6ᵈ⁴
-88-00-6Cᵇ⁷ 8C-DC-8Cᵇ⁷ 92-B7-ACᵇ⁷
+97-83-38ᶠ¹ 71-71-71ᶠ¹ 4B-5E-A9ᶠ¹
+97-83-38ᵈ⁴ 71-71-71ᵈ⁴ 4B-5E-A9ᵈ⁴
+97-83-38ᵇ⁷ 71-71-71ᵇ⁷ 4B-5E-A9ᵇ⁷
 `;
 
 exports[`Callbacks > with brightness 1`] = `

plugins/plugin-blur/package.json

@@ -5,20 +5,23 @@
   "scripts": {
     "lint": "eslint .",
     "test": "vitest",
-    "test:browser": "vitest --config vitest.config.browser.mjs",
     "build": "tshy",
     "dev": "tshy --watch",
     "clean": "rm -rf node_modules .tshy .tshy-build dist .turbo"
   },
   "author": "Andrew Lisowski <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "@jimp/types": "workspace:*"
+    "@jimp/core": "workspace:*",
+    "@jimp/utils": "workspace:*"
   },
   "devDependencies": {
     "@jimp/config-eslint": "workspace:*",
     "@jimp/config-typescript": "workspace:*",
     "@jimp/config-vitest": "workspace:*",
+    "@jimp/js-png": "workspace:*",
+    "@jimp/test-utils": "workspace:*",
+    "@jimp/types": "workspace:*",
     "@vitest/browser": "^1.4.0",
     "eslint": "^8.57.0",
     "tshy": "^3.0.2",

plugins/plugin-blur/src/index.node.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, test } from "vitest";
+import { createJimp } from "@jimp/core";
+import { getTestImagePath } from "@jimp/test-utils";
+import "@jimp/test-utils/image-snapshot";
+import png from "@jimp/js-png";
+
+import * as blur from "./index.js";
+
+const Jimp = createJimp({ formats: [png], plugins: [blur.methods] });
+
+describe("hasAlpha", () => {
+  test("image with alpha", async () => {
+    const image = await Jimp.read(getTestImagePath("dice.png"));
+    const output = await image.blur(16).getBuffer("image/png");
+    expect(output).toMatchImageSnapshot();
+  });
+});

plugins/plugin-blur/src/index.ts

@@ -1,5 +1,6 @@
 import { mulTable, shgTable } from "./blur-tables.js";
 import { JimpClass } from "@jimp/types";
+import { limit255 } from "@jimp/utils";
 
 /*
     Superfast Blur (0.5)
@@ -145,24 +146,10 @@ export const methods = {
         yi = x << 2;
 
         for (y = 0; y < image.bitmap.height; y++) {
-          pa = (asum * mulSum) >>> shgSum;
-          image.bitmap.data[yi + 3] = pa;
-
-          // normalize alpha
-          if (pa > 255) {
-            image.bitmap.data[yi + 3] = 255;
-          }
-
-          if (pa > 0) {
-            pa = 255 / pa;
-            image.bitmap.data[yi] = ((rsum * mulSum) >>> shgSum) * pa;
-            image.bitmap.data[yi + 1] = ((gsum * mulSum) >>> shgSum) * pa;
-            image.bitmap.data[yi + 2] = ((bsum * mulSum) >>> shgSum) * pa;
-          } else {
-            image.bitmap.data[yi + 2] = 0;
-            image.bitmap.data[yi + 1] = 0;
-            image.bitmap.data[yi] = 0;
-          }
+          image.bitmap.data[yi] = limit255((rsum * mulSum) >>> shgSum);
+          image.bitmap.data[yi + 1] = limit255((gsum * mulSum) >>> shgSum);
+          image.bitmap.data[yi + 2] = limit255((bsum * mulSum) >>> shgSum);
+          image.bitmap.data[yi + 3] = limit255((asum * mulSum) >>> shgSum);
 
           if (x === 0) {
             vmin[y] = ((p = y + rad1) < hm ? p : hm) * image.bitmap.width;

plugins/plugin-shadow/src/__snapshots__/index.test.ts.snap

@@ -4,20 +4,20 @@ exports[`Shadow > creates a shadow 1`] = `
 Visualization:
 
           
- ▪▫▦▾8F▥  
-88F▵▿E▾▦F 
-6▵02▪7▪▫▹E
-C0▰▥8665◇▹
-817◇▴8◆15C
-▱3▾▱▿4C▩7■
+ 0▱▥1▪◇▫  
+▪ED▥93F5▫ 
+▰C7▸◇▥▵□A1
+F◇▦▾2A651▫
+◆■B■■3F6▰▰
+E▱▥!▸0■D6▫
 
 Data:
 
 00-00-00⁰⁰ 00-00-00⁰⁰ 00-00-00⁰⁰ 00-00-00⁰⁰ 00-00-00⁰⁰ 00-00-00⁰⁰ 00-00-00⁰⁰ 00-00-00⁰⁰ 00-00-00⁰⁰ 00-00-00⁰⁰
-00-00-00⁰⁰ A4-A4-3F⁰² 03-03-2F⁰ᵇ 35-35-34¹⁷ E5-E5-06ᶠᶠ F1-F1-06ᶠᶠ 5B-5B-3A¹² 2C-2C-37⁰⁶ 00-00-00⁰⁰ 00-00-00⁰⁰
-8F-8F-55⁰² C2-C2-55⁰ᵃ 3A-3A-59¹ᶜ D2-D2-10ᶠᶠ 76-76-72ᶠᶠ 80-80-74ᶠᶠ E6-E6-0Eᶠᶠ A8-A8-5B¹³ D2-D2-3F⁰⁵ 00-00-00⁰⁰
-5F-5F-3F⁰⁸ 81-81-5C¹ᵃ ED-ED-15ᶠᶠ 83-83-73ᶠᶠ 5E-5E-6Eᶠᶠ 67-67-6Fᶠᶠ 9C-9C-74ᶠᶠ DC-DC-0Eᶠᶠ ED-ED-3F¹⁰ 0E-0E-00⁰⁴
-1E-1E-4C⁰ᵉ DE-DE-59²ᵃ BC-BC-5F⁵⁴ 86-86-2Eᶠᶠ AF-AF-6Cᶠᶠ B3-B3-6Cᶠᶠ A6-A6-27ᶠᶠ 4D-4D-4F⁴³ E7-E7-3E¹ᶜ E9-E9-00⁰⁷
-AE-AE-4A¹⁰ 5E-5E-56²ᶠ 8A-8A-5E⁵ᶜ EF-EF-5E⁸⁷ D5-D5-3Bᶠᶠ DD-DD-38ᶠᶠ 16-16-5A⁷ᵃ 07-07-4E⁴ᵃ 16-16-3B²⁰ EE-EE-00⁰⁹
-77-77-3E⁰ᵇ F7-F7-53²⁴ FE-FE-5C⁴ᵃ 2A-2A-5C⁷³ E9-E9-5A⁸ᵇ F5-F5-5A⁸⁶ 62-62-57⁶⁶ AE-AE-4E³ᵃ 5B-5B-34¹⁷ B0-B0-00⁰⁶
+00-00-00⁰⁰ 04-04-00⁰² 0F-0F-00⁰ᵇ 20-20-02¹⁷ E4-E4-00ᶠᶠ E5-E5-00ᶠᶠ 18-18-01¹² 09-09-00⁰⁶ 00-00-00⁰⁰ 00-00-00⁰⁰
+03-03-00⁰² 0D-0D-01⁰ᵃ 22-22-05¹ᶜ D8-D8-02ᶠᶠ 73-73-63ᶠᶠ 72-72-64ᶠᶠ DD-DD-01ᶠᶠ 18-18-03¹³ 07-07-00⁰⁵ 00-00-00⁰⁰
+0B-0B-00⁰⁸ 20-20-05¹ᵃ D4-D4-03ᶠᶠ 75-75-5Dᶠᶠ 7C-7C-59ᶠᶠ 7A-7A-5Aᶠᶠ 73-73-60ᶠᶠ DB-DB-01ᶠᶠ 16-16-02¹⁰ 06-06-00⁰⁴
+13-13-01⁰ᵉ 33-33-08²ᵃ 5D-5D-1A⁵⁴ C0-C0-19ᶠᶠ 89-89-5Dᶠᶠ 87-87-5Cᶠᶠ C2-C2-12ᶠᶠ 4E-4E-11⁴³ 25-25-04¹ᶜ 0B-0B-00⁰⁷
+16-16-01¹⁰ 3A-3A-0A²ᶠ 65-65-1D⁵ᶜ 87-87-3A⁸⁷ BE-BE-30ᶠᶠ BE-BE-2Bᶠᶠ 7F-7F-2F⁷ᵃ 56-56-14⁴ᵃ 2A-2A-04²⁰ 0D-0D-00⁰⁹
+0F-0F-01⁰ᵇ 2C-2C-07²⁴ 54-54-16⁴ᵃ 78-78-2D⁷³ 8B-8B-3C⁸ᵇ 87-87-38⁸⁶ 6E-6E-24⁶⁶ 45-45-0F³ᵃ 1E-1E-03¹⁷ 09-09-00⁰⁶
 `;