CanvasKit Image downscaling is poor quality compared to HTML and Native #135655
Description
Is there an existing issue for this?
- I have searched the existing issues
- I have read the guide to filing a bug
Steps to reproduce
In CanvasKit when downscaling an image the quality is really poor compared to the output from the HTML renderer and Native, especially on 1080p and below screen resolution. I think this is different than the other related Canvaskit renderer bugs as it clearly shows the difference in the output.
I tried a number of different things around filters and nothing appears to help. Is there a setting I'm missing?
*Second observation, the aspect ratio / spacing is somehow different compared to the iPhone emulator?
Expected results
Smoothly downsized images that are legible
Actual results
Very jagged and faded detail, this is on a 3440x1440p monitor. In particular it is the bottom line size that I'm having difficulty with.
As you can see on the last line, the 30 is not legible for the Canvaskit renderer.
And for the smallest zipper image the details are smoothed nicely for the Native and HTML renderers but not for the Canvaskit
Code sample
Code sample
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.network(
'https://raw.githubusercontent.com/zambetpentru/flutter_89037_video_exit_fullscreen_black_image/82d06d5a5c5004793c2711a4445a3249b85b4fc7/72420_010002_180_PA.jpg',
width: 450,
),
Image.network(
'https://raw.githubusercontent.com/zambetpentru/flutter_89037_video_exit_fullscreen_black_image/82d06d5a5c5004793c2711a4445a3249b85b4fc7/72420_010002_180_PA.jpg',
width: 250,
),
Image.network(
'https://raw.githubusercontent.com/zambetpentru/flutter_89037_video_exit_fullscreen_black_image/82d06d5a5c5004793c2711a4445a3249b85b4fc7/72420_010002_180_PA.jpg',
width: 150,
),
Image.network(
'https://raw.githubusercontent.com/zambetpentru/flutter_89037_video_exit_fullscreen_black_image/82d06d5a5c5004793c2711a4445a3249b85b4fc7/72420_010002_180_PA.jpg',
width: 100,
),
Center(
child: SizedBox(
height: 64,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.network(
'https://raw.githubusercontent.com/zambetpentru/flutter_89037_video_exit_fullscreen_black_image/82d06d5a5c5004793c2711a4445a3249b85b4fc7/B1.jpg',
),
Image.network(
'https://raw.githubusercontent.com/zambetpentru/flutter_89037_video_exit_fullscreen_black_image/82d06d5a5c5004793c2711a4445a3249b85b4fc7/W30.jpg',
),
Image.network(
'https://raw.githubusercontent.com/zambetpentru/flutter_89037_video_exit_fullscreen_black_image/82d06d5a5c5004793c2711a4445a3249b85b4fc7/CNO.jpg',
),
],
),
),
),
Center(
child: SizedBox(
height: 48,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.network(
'https://raw.githubusercontent.com/zambetpentru/flutter_89037_video_exit_fullscreen_black_image/82d06d5a5c5004793c2711a4445a3249b85b4fc7/B1.jpg',
),
Image.network(
'https://raw.githubusercontent.com/zambetpentru/flutter_89037_video_exit_fullscreen_black_image/82d06d5a5c5004793c2711a4445a3249b85b4fc7/W30.jpg',
),
Image.network(
'https://raw.githubusercontent.com/zambetpentru/flutter_89037_video_exit_fullscreen_black_image/82d06d5a5c5004793c2711a4445a3249b85b4fc7/CNO.jpg',
),
],
),
),
),
Center(
child: SizedBox(
height: 24,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.network(
'https://raw.githubusercontent.com/zambetpentru/flutter_89037_video_exit_fullscreen_black_image/82d06d5a5c5004793c2711a4445a3249b85b4fc7/B1.jpg',
),
Image.network(
'https://raw.githubusercontent.com/zambetpentru/flutter_89037_video_exit_fullscreen_black_image/82d06d5a5c5004793c2711a4445a3249b85b4fc7/W30.jpg',
),
Image.network(
'https://raw.githubusercontent.com/zambetpentru/flutter_89037_video_exit_fullscreen_black_image/82d06d5a5c5004793c2711a4445a3249b85b4fc7/CNO.jpg',
),
],
),
),
),
Center(
child: SizedBox(
height: 16,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.network(
'https://raw.githubusercontent.com/zambetpentru/flutter_89037_video_exit_fullscreen_black_image/82d06d5a5c5004793c2711a4445a3249b85b4fc7/B1.jpg',
),
Image.network(
'https://raw.githubusercontent.com/zambetpentru/flutter_89037_video_exit_fullscreen_black_image/82d06d5a5c5004793c2711a4445a3249b85b4fc7/W30.jpg',
),
Image.network(
'https://raw.githubusercontent.com/zambetpentru/flutter_89037_video_exit_fullscreen_black_image/82d06d5a5c5004793c2711a4445a3249b85b4fc7/CNO.jpg',
),
],
),
),
),
],
),
),
);
}
}
Screenshots or Video
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output
[!] Flutter (Channel stable, 3.13.4, on macOS 13.3.1 22E261 darwin-arm64, locale en-GB)
! Warning: `flutter` on your path resolves to /Users/omega/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /users/omega/flutter.
Consider adding /users/omega/flutter/bin to the front of your path.
! Warning: `dart` on your path resolves to /Users/omega/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /users/omega/flutter. Consider
adding /users/omega/flutter/bin to the front of your path.
[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.82.2)
[✓] Connected device (3 available)
[✓] Network resources