refactor: Use image package to resize images

This commit is contained in:
Krille Fear 2021-11-20 16:54:18 +01:00
parent c5f084db87
commit b44f309151
8 changed files with 64 additions and 148 deletions

View file

@ -297,12 +297,11 @@ class ChatDetailsController extends State<ChatDetails> {
MatrixFile file; MatrixFile file;
if (PlatformInfos.isMobile) { if (PlatformInfos.isMobile) {
final result = await ImagePicker().pickImage( final result = await ImagePicker().pickImage(
source: action == AvatarAction.camera source: action == AvatarAction.camera
? ImageSource.camera ? ImageSource.camera
: ImageSource.gallery, : ImageSource.gallery,
imageQuality: 50, imageQuality: 50,
maxWidth: 1600, );
maxHeight: 1600);
if (result == null) return; if (result == null) return;
file = MatrixFile( file = MatrixFile(
bytes: await result.readAsBytes(), bytes: await result.readAsBytes(),

View file

@ -26,12 +26,11 @@ class _SendFileDialogState extends State<SendFileDialog> {
bool origImage = false; bool origImage = false;
bool _isSending = false; bool _isSending = false;
static const maxWidth = 1600;
Future<void> _send() async { Future<void> _send() async {
var file = widget.file; var file = widget.file;
if (file is MatrixImageFile && !origImage) { if (file is MatrixImageFile && !origImage) {
try { try {
file = await resizeImage(file, max: maxWidth); file = await file.resizeImage();
} catch (e) { } catch (e) {
// couldn't resize // couldn't resize
} }

View file

@ -79,12 +79,11 @@ class SettingsController extends State<Settings> {
MatrixFile file; MatrixFile file;
if (PlatformInfos.isMobile) { if (PlatformInfos.isMobile) {
final result = await ImagePicker().pickImage( final result = await ImagePicker().pickImage(
source: action == AvatarAction.camera source: action == AvatarAction.camera
? ImageSource.camera ? ImageSource.camera
: ImageSource.gallery, : ImageSource.gallery,
imageQuality: 50, imageQuality: 50,
maxWidth: 1600, );
maxHeight: 1600);
if (result == null) return; if (result == null) return;
file = MatrixFile( file = MatrixFile(
bytes: await result.readAsBytes(), bytes: await result.readAsBytes(),

View file

@ -198,8 +198,6 @@ class EmotesSettingsController extends State<EmotesSettings> {
}); });
} }
static const maxImageWidth = 1600;
void imagePickerAction( void imagePickerAction(
ValueNotifier<ImagePackImageContent> controller) async { ValueNotifier<ImagePackImageContent> controller) async {
final result = final result =
@ -210,7 +208,7 @@ class EmotesSettingsController extends State<EmotesSettings> {
name: result.fileName, name: result.fileName,
); );
try { try {
file = await resizeImage(file, max: maxImageWidth); file = await file.resizeImage(calcBlurhash: false);
} catch (_) { } catch (_) {
// do nothing // do nothing
} }

View file

@ -1,126 +1,49 @@
//@dart=2.12
import 'dart:math' as math;
import 'dart:typed_data'; import 'dart:typed_data';
import 'dart:ui';
import 'package:flutter/foundation.dart';
import 'package:blurhash_dart/blurhash_dart.dart';
import 'package:image/image.dart';
import 'package:matrix/matrix.dart'; import 'package:matrix/matrix.dart';
import 'package:native_imaging/native_imaging.dart' as native;
import 'run_in_background.dart'; extension ResizeImage on MatrixFile {
static const int max = 1200;
static const int quality = 20;
const int defaultMax = 800; Future<MatrixImageFile> resizeImage({bool calcBlurhash = true}) async {
final bytes = await compute<Uint8List, Uint8List>(resizeBytes, this.bytes);
Future<MatrixImageFile> resizeImage(MatrixImageFile file, final blurhash = calcBlurhash
{int max = defaultMax}) async { ? await compute<Uint8List, BlurHash>(createBlurHash, bytes)
// we want to resize the image in a separate isolate, because otherwise that can : null;
// freeze up the UI a bit return MatrixImageFile(
bytes: bytes,
// we can't do width / height fetching in a separate isolate, as that may use the UI stuff name: '${name.split('.').first}_thumbnail_$max.jpg',
blurhash: blurhash?.hash,
// somehow doing native.init twice fixes it for linux desktop? );
// TODO: once native imaging is on sound null safety the errors are consistent and
// then we can properly handle this instead
// https://gitlab.com/famedly/company/frontend/libraries/native_imaging/-/issues/5
try {
await native.init();
} catch (_) {
await native.init();
} }
_IsolateArgs args;
try {
final nativeImg = native.Image();
await nativeImg.loadEncoded(file.bytes);
file.width = nativeImg.width;
file.height = nativeImg.height;
args = _IsolateArgs(
width: file.width, height: file.height, bytes: file.bytes, max: max);
nativeImg.free();
} on UnsupportedError {
final dartCodec = await instantiateImageCodec(file.bytes);
final dartFrame = await dartCodec.getNextFrame();
file.width = dartFrame.image.width;
file.height = dartFrame.image.height;
final rgbaData = await dartFrame.image.toByteData();
final rgba = Uint8List.view(
rgbaData.buffer, rgbaData.offsetInBytes, rgbaData.lengthInBytes);
dartFrame.image.dispose();
dartCodec.dispose();
args = _IsolateArgs(
width: file.width, height: file.height, bytes: rgba, max: max);
}
final res = await runInBackground(_isolateFunction, args);
file.blurhash = res.blurhash;
final thumbnail = MatrixImageFile(
bytes: res.jpegBytes,
name: file.name != null
? 'scaled_' + file.name.split('.').first + '.jpg'
: 'thumbnail.jpg',
mimeType: 'image/jpeg',
width: res.width,
height: res.height,
blurhash: res.blurhash,
);
// only return the thumbnail if the size actually decreased
return thumbnail.size >= file.size ||
thumbnail.width >= file.width ||
thumbnail.height >= file.height
? file
: thumbnail;
} }
class _IsolateArgs { Future<BlurHash> createBlurHash(Uint8List file) async {
final int width; final image = decodeImage(file)!;
final int height; return BlurHash.encode(image, numCompX: 4, numCompY: 3);
final Uint8List bytes;
final int max;
final String name;
_IsolateArgs({this.width, this.height, this.bytes, this.max, this.name});
} }
class _IsolateResponse { Future<Uint8List> resizeBytes(Uint8List file) async {
final String blurhash; final image = decodeImage(file)!;
final Uint8List jpegBytes;
final int width; // Is file already smaller than max? Then just return.
final int height; if (math.max(image.width, image.height) <= ResizeImage.max) {
_IsolateResponse({this.blurhash, this.jpegBytes, this.width, this.height}); return file;
} }
Future<_IsolateResponse> _isolateFunction(_IsolateArgs args) async { // Use the larger side to resize.
// Hack for desktop, see above why final useWidth = image.width >= image.height;
try { final thumbnail = useWidth
await native.init(); ? copyResize(image, width: ResizeImage.max)
} catch (_) { : copyResize(image, height: ResizeImage.max);
await native.init();
} return Uint8List.fromList(encodeJpg(thumbnail, quality: ResizeImage.quality));
var nativeImg = native.Image();
try {
await nativeImg.loadEncoded(args.bytes);
} on UnsupportedError {
nativeImg.loadRGBA(args.width, args.height, args.bytes);
}
if (args.width > args.max || args.height > args.max) {
var w = args.max, h = args.max;
if (args.width > args.height) {
h = args.max * args.height ~/ args.width;
} else {
w = args.max * args.width ~/ args.height;
}
final scaledImg = nativeImg.resample(w, h, native.Transform.lanczos);
nativeImg.free();
nativeImg = scaledImg;
}
final jpegBytes = await nativeImg.toJpeg(75);
final blurhash = nativeImg.toBlurhash(3, 3);
final ret = _IsolateResponse(
blurhash: blurhash,
jpegBytes: jpegBytes,
width: nativeImg.width,
height: nativeImg.height);
nativeImg.free();
return ret;
} }

View file

@ -31,7 +31,7 @@ extension RoomSendFileExtension on Room {
MatrixFile thumbnail; MatrixFile thumbnail;
try { try {
if (file is MatrixImageFile) { if (file is MatrixImageFile) {
thumbnail = await resizeImage(file); thumbnail = await file.resizeImage();
if (thumbnail.size > file.size ~/ 2) { if (thumbnail.size > file.size ~/ 2) {
thumbnail = null; thumbnail = null;

View file

@ -92,6 +92,13 @@ packages:
url: "https://pub.dartlang.org" url: "https://pub.dartlang.org"
source: hosted source: hosted
version: "2.0.0" version: "2.0.0"
blurhash_dart:
dependency: "direct main"
description:
name: blurhash_dart
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.0"
boolean_selector: boolean_selector:
dependency: transitive dependency: transitive
description: description:
@ -189,7 +196,7 @@ packages:
name: cross_file name: cross_file
url: "https://pub.dartlang.org" url: "https://pub.dartlang.org"
source: hosted source: hosted
version: "0.3.1+3" version: "0.3.2"
crypto: crypto:
dependency: transitive dependency: transitive
description: description:
@ -652,7 +659,7 @@ packages:
source: hosted source: hosted
version: "4.0.0" version: "4.0.0"
image: image:
dependency: transitive dependency: "direct main"
description: description:
name: image name: image
url: "https://pub.dartlang.org" url: "https://pub.dartlang.org"
@ -664,14 +671,14 @@ packages:
name: image_picker name: image_picker
url: "https://pub.dartlang.org" url: "https://pub.dartlang.org"
source: hosted source: hosted
version: "0.8.4+2" version: "0.8.4+4"
image_picker_for_web: image_picker_for_web:
dependency: transitive dependency: transitive
description: description:
name: image_picker_for_web name: image_picker_for_web
url: "https://pub.dartlang.org" url: "https://pub.dartlang.org"
source: hosted source: hosted
version: "2.1.2" version: "2.1.4"
image_picker_platform_interface: image_picker_platform_interface:
dependency: transitive dependency: transitive
description: description:
@ -821,15 +828,6 @@ packages:
url: "https://pub.dartlang.org" url: "https://pub.dartlang.org"
source: hosted source: hosted
version: "1.0.2" version: "1.0.2"
native_imaging:
dependency: "direct main"
description:
path: "."
ref: HEAD
resolved-ref: b3239a12a61a31efb8d02d3d665f2041be6651d6
url: "https://gitlab.com/famedly/libraries/native_imaging.git"
source: git
version: "0.0.1"
nested: nested:
dependency: transitive dependency: transitive
description: description:

View file

@ -10,6 +10,7 @@ dependencies:
adaptive_dialog: ^1.1.0 adaptive_dialog: ^1.1.0
adaptive_theme: ^2.2.0 adaptive_theme: ^2.2.0
audioplayers: ^0.20.1 audioplayers: ^0.20.1
blurhash_dart: ^1.1.0
cached_network_image: ^3.1.0 cached_network_image: ^3.1.0
chewie: ^1.2.2 chewie: ^1.2.2
cupertino_icons: any cupertino_icons: any
@ -42,14 +43,13 @@ dependencies:
future_loading_dialog: ^0.2.1 future_loading_dialog: ^0.2.1
geolocator: ^7.6.2 geolocator: ^7.6.2
hive_flutter: ^1.1.0 hive_flutter: ^1.1.0
image: ^3.0.8
image_picker: ^0.8.4+2 image_picker: ^0.8.4+2
intl: any intl: any
localstorage: ^4.0.0+1 localstorage: ^4.0.0+1
lottie: ^1.2.1 lottie: ^1.2.1
matrix: ^0.7.0-nullsafety.6 matrix: ^0.7.0-nullsafety.6
matrix_link_text: ^1.0.2 matrix_link_text: ^1.0.2
native_imaging:
git: https://gitlab.com/famedly/libraries/native_imaging.git
open_noti_settings: ^0.2.0 open_noti_settings: ^0.2.0
package_info_plus: ^1.2.1 package_info_plus: ^1.2.1
path_provider: ^2.0.5 path_provider: ^2.0.5