Fix alpha bleeding when smooth-scaling images

After loading for example PNGs with an alpha, prefer passing it to
renderers as pre-multiplied alpha, so that nearby transparent pixels
(r=g=b=a=0) don't contribute anything as pre-multiplication will zero
out their r/g/b.

Fixes #10469

For the screenshot tests, smooth scaling is disabled because it results
in different rendering between macOS and Linux on Skia with
pre-multiplied alpha.

Author: tronical

internal/core/graphics/image/cache.rs

@@ -156,13 +156,21 @@ impl ImageCache {
 }
 
 fn dynamic_image_to_shared_image_buffer(dynamic_image: image::DynamicImage) -> SharedImageBuffer {
+    use rgb::AsPixels;
+
     if dynamic_image.color().has_alpha() {
         let rgba8image = dynamic_image.to_rgba8();
-        SharedImageBuffer::RGBA8(SharedPixelBuffer::clone_from_slice(
-            rgba8image.as_raw(),
-            rgba8image.width(),
-            rgba8image.height(),
-        ))
+        // Prefer pre-multiplied alpha so that smooth-scaling won't bleed the alpha when blending
+        // in the renderers.
+        SharedImageBuffer::RGBA8Premultiplied(SharedPixelBuffer {
+            width: rgba8image.width(),
+            height: rgba8image.height(),
+            data: rgba8image
+                .as_pixels()
+                .into_iter()
+                .map(|pixel| Image::rgba_to_premultiplied_rgba(*pixel))
+                .collect(),
+        })
     } else {
         let rgb8image = dynamic_image.to_rgb8();
         SharedImageBuffer::RGB8(SharedPixelBuffer::clone_from_slice(

tests/screenshots/cases/image/border-image-repeat.slint

@@ -13,13 +13,15 @@ export component TestCase inherits Window {
            vertical-alignment: bottom;
            horizontal-tiling: repeat;
            horizontal-alignment: center;
+           image-rendering: pixelated;
         }
         Image {
             source: @image-url("border-image.png", nine-slice(6 5));
             vertical-tiling: round;
             vertical-alignment: bottom;
             horizontal-tiling: round;
             horizontal-alignment: center;
+            image-rendering: pixelated;
         }
      }
 }

tests/screenshots/cases/image/border-image.slint

@@ -8,17 +8,20 @@ export component TestCase inherits Window {
     height: 64px;
     GridLayout {
         Image {
-           source: @image-url("border-image.png", nine-slice(6));
+            source: @image-url("border-image.png", nine-slice(6));
             colspan: 2;
+            image-rendering: pixelated;
         }
         Image {
             source: @image-url("border-image.png", nine-slice(6 0));
             row: 1;
             width: 50%;
             height: 50%;
+            image-rendering: pixelated;
         }
         Image {
             source: @image-url("border-image.png", nine-slice(5 6 2 0));
+            image-rendering: pixelated;
         }
      }
 }

tests/screenshots/cases/image/border-image2.slint

@@ -16,9 +16,11 @@ export component TestCase inherits Window {
             Image {
                 // The border is bigger than the image
                 source: @image-url("border-image-rect.png", nine-slice(50 2));
+                image-rendering: pixelated;
             }
             Image {
                 source: @image-url("border-image-rect.png", nine-slice(1 0));
+                image-rendering: pixelated;
             }
         }
     }

tests/screenshots/cases/image/image-repeat.slint

@@ -15,6 +15,7 @@ export component TestCase inherits Window {
                 vertical-alignment: top;
                 horizontal-alignment: center;
                 vertical-tiling: repeat;
+                image-rendering: pixelated;
             }
 
             Image {
@@ -24,6 +25,7 @@ export component TestCase inherits Window {
                 horizontal-alignment: left;
                 vertical-tiling: repeat;
                 horizontal-tiling: repeat;
+                image-rendering: pixelated;
             }
 
             Image {
@@ -33,6 +35,7 @@ export component TestCase inherits Window {
                 horizontal-alignment: right;
                 opacity: 0.5;
                 horizontal-tiling: repeat;
+                image-rendering: pixelated;
             }
 
             Image {
@@ -42,6 +45,7 @@ export component TestCase inherits Window {
                 horizontal-alignment: right;
                 vertical-tiling: round;
                 horizontal-tiling: round;
+                image-rendering: pixelated;
             }
         }
 
@@ -54,6 +58,7 @@ export component TestCase inherits Window {
                 horizontal-alignment: right;
                 vertical-tiling: repeat;
                 horizontal-tiling: round;
+                image-rendering: pixelated;
             }
 
             Image {
@@ -63,6 +68,7 @@ export component TestCase inherits Window {
                 horizontal-alignment: left;
                 vertical-tiling: round;
                 width: 15%;
+                image-rendering: pixelated;
             }
 
             Image {
@@ -71,6 +77,7 @@ export component TestCase inherits Window {
                 vertical-alignment: center;
                 horizontal-alignment: left;
                 horizontal-tiling: round;
+                image-rendering: pixelated;
             }
 
             Image {
@@ -87,6 +94,8 @@ export component TestCase inherits Window {
 
                 vertical-tiling: repeat;
                 horizontal-tiling: round;
+
+                image-rendering: pixelated;
             }
         }
     }