fix: align the imageSmoothingQuality behavior with chrome (#942)

- Close #871

__test__/index.spec.ts

@@ -1,6 +1,8 @@
+import { join } from 'node:path'
+
 import ava, { TestFn } from 'ava'
 
-import { createCanvas, Path2D, Canvas, SKRSContext2D, DOMMatrix } from '../index'
+import { createCanvas, Path2D, Canvas, SKRSContext2D, DOMMatrix, loadImage } from '../index'
 
 import { snapshotImage } from './image-snapshot'
 
@@ -54,12 +56,17 @@ test('imageSmoothingEnabled state should be ok', (t) => {
   t.is(ctx.imageSmoothingEnabled, false)
 })
 
-test('imageSmoothingQuality state should be ok', (t) => {
-  const { ctx } = t.context
-  t.is(ctx.imageSmoothingQuality, 'low')
-  ctx.imageSmoothingQuality = 'high'
-  t.is(ctx.imageSmoothingQuality, 'high')
-})
+for (const quality of ['low', 'medium', 'high'] as const) {
+  test(`draw-image-quality-${quality}`, async (t) => {
+    const { ctx } = t.context
+    ctx.imageSmoothingEnabled = true
+    ctx.imageSmoothingQuality = quality
+    t.is(ctx.imageSmoothingQuality, quality)
+    const image = await loadImage(join(__dirname, 'fixtures', 'filter-drop-shadow.jpeg'))
+    ctx.drawImage(image, 0, 0, 426, 322)
+    await snapshotImage(t)
+  })
+}
 
 test('lineCap state should be ok', (t) => {
   const { ctx } = t.context
@@ -183,12 +190,12 @@ test('composition-destination-in', async (t) => {
   ctx.fillStyle = 'red'
   ctx.fillRect(0, 0, 300, 300)
   ctx.save()
-  ctx.globalCompositeOperation = 'destination-in';
-  ctx.fillStyle = 'green';
-  ctx.beginPath();
-  ctx.arc(150, 150, 100, 0, Math.PI * 2);
-  ctx.closePath();
-  ctx.fill();
+  ctx.globalCompositeOperation = 'destination-in'
+  ctx.fillStyle = 'green'
+  ctx.beginPath()
+  ctx.arc(150, 150, 100, 0, Math.PI * 2)
+  ctx.closePath()
+  ctx.fill()
   ctx.restore()
 
   await snapshotImage(t, t.context, 'png')
@@ -201,12 +208,12 @@ test('composition-source-in', async (t) => {
   ctx.fillStyle = 'red'
   ctx.fillRect(0, 0, 300, 300)
   ctx.save()
-  ctx.globalCompositeOperation = 'source-in';
-  ctx.fillStyle = 'green';
-  ctx.beginPath();
-  ctx.arc(150, 150, 100, 0, Math.PI * 2);
-  ctx.closePath();
-  ctx.fill();
+  ctx.globalCompositeOperation = 'source-in'
+  ctx.fillStyle = 'green'
+  ctx.beginPath()
+  ctx.arc(150, 150, 100, 0, Math.PI * 2)
+  ctx.closePath()
+  ctx.fill()
   ctx.restore()
 
   await snapshotImage(t, t.context, 'png')

skia-c/skia_c.cpp

@@ -44,15 +44,16 @@ extern "C"
     }
   }
 
+  // https://source.chromium.org/chromium/chromium/src/+/refs/tags/131.0.6778.9:cc/paint/paint_flags.cc;l=171
   static SkSamplingOptions SamplingOptionsFromFQ(int fq)
   {
     switch (fq)
     {
     case 3:
-      return SkSamplingOptions(SkCubicResampler{1 / 3.0f, 1 / 3.0f});
+      return SkSamplingOptions(SkCubicResampler::Mitchell());
     case 2:
       return SkSamplingOptions(SkFilterMode::kLinear,
-                               SkMipmapMode::kNearest);
+                              SkMipmapMode::kNearest);
     case 1:
       return SkSamplingOptions(SkFilterMode::kLinear, SkMipmapMode::kNone);
     case 0: