mirror of
https://github.com/inventree/inventree-app.git
synced 2025-07-01 19:30:44 +00:00
feat: add image cropping functionality with custom aspect ratios (#638)
* feat: add image cropping functionality with custom aspect ratios * Update release notes
This commit is contained in:
Ben Hagen
GitHub
169
lib/widget/part/image_cropper.dart
Normal file
169
lib/widget/part/image_cropper.dart
Normal file
@ -0,0 +1,169 @@
|
||||
import "dart:typed_data";
|
||||
import "package:custom_image_crop/custom_image_crop.dart";
|
||||
import "package:flutter/material.dart";
|
||||
import "package:flutter_tabler_icons/flutter_tabler_icons.dart";
|
||||
import "package:inventree/l10.dart";
|
||||
|
||||
/// Widget for displaying the image cropper UI
|
||||
class ImageCropperWidget extends StatefulWidget {
|
||||
const ImageCropperWidget({Key? key, required this.imageBytes})
|
||||
: super(key: key);
|
||||
|
||||
final Uint8List imageBytes;
|
||||
|
||||
@override
|
||||
State<ImageCropperWidget> createState() => _ImageCropperWidgetState();
|
||||
}
|
||||
|
||||
class _ImageCropperWidgetState extends State<ImageCropperWidget> {
|
||||
final cropController = CustomImageCropController();
|
||||
|
||||
// Define fixed ratio objects so they are the same instances for comparison
|
||||
static final _ratioSquare = Ratio(width: 1, height: 1);
|
||||
static final _ratio4x3 = Ratio(width: 4, height: 3);
|
||||
static final _ratio16x9 = Ratio(width: 16, height: 9);
|
||||
static final _ratio3x2 = Ratio(width: 3, height: 2);
|
||||
|
||||
var _aspectRatio = _ratioSquare;
|
||||
var _isCropping = false;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: [
|
||||
DropdownButton<Ratio>(
|
||||
value: _aspectRatio,
|
||||
items: [
|
||||
DropdownMenuItem(
|
||||
value: _ratioSquare,
|
||||
child: Text(L10().aspectRatioSquare),
|
||||
),
|
||||
DropdownMenuItem(
|
||||
value: _ratio4x3,
|
||||
child: Text(L10().aspectRatio4x3),
|
||||
),
|
||||
DropdownMenuItem(
|
||||
value: _ratio16x9,
|
||||
child: Text(L10().aspectRatio16x9),
|
||||
),
|
||||
DropdownMenuItem(
|
||||
value: _ratio3x2,
|
||||
child: Text(L10().aspectRatio3x2),
|
||||
),
|
||||
],
|
||||
onChanged: (value) {
|
||||
if (value != null) {
|
||||
setState(() {
|
||||
_aspectRatio = value;
|
||||
});
|
||||
}
|
||||
},
|
||||
),
|
||||
|
||||
// Reset button - returns the image to its default state
|
||||
IconButton(
|
||||
icon: Icon(TablerIcons.refresh),
|
||||
onPressed: () => cropController.reset(),
|
||||
tooltip: "Reset",
|
||||
),
|
||||
|
||||
// Zoom out button - scales to 75% of current size
|
||||
IconButton(
|
||||
icon: Icon(TablerIcons.zoom_out),
|
||||
onPressed: () =>
|
||||
cropController.addTransition(CropImageData(scale: 0.75)),
|
||||
tooltip: "Zoom Out",
|
||||
),
|
||||
|
||||
// Zoom in button - scales to 133% of current size
|
||||
IconButton(
|
||||
icon: Icon(TablerIcons.zoom_in),
|
||||
onPressed: () =>
|
||||
cropController.addTransition(CropImageData(scale: 1.33)),
|
||||
tooltip: "Zoom In",
|
||||
),
|
||||
|
||||
// Rotate button
|
||||
IconButton(
|
||||
icon: Icon(TablerIcons.rotate),
|
||||
onPressed: () =>
|
||||
cropController.addTransition(CropImageData(angle: 90)),
|
||||
tooltip: L10().rotateClockwise,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: CustomImageCrop(
|
||||
cropController: cropController,
|
||||
image: MemoryImage(widget.imageBytes),
|
||||
shape: CustomCropShape.Ratio,
|
||||
ratio: _aspectRatio,
|
||||
forceInsideCropArea: true,
|
||||
overlayColor: Colors.black.withAlpha(128),
|
||||
backgroundColor: Colors.black.withAlpha(64),
|
||||
),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: [
|
||||
TextButton(
|
||||
onPressed: () {
|
||||
Navigator.of(context).pop();
|
||||
},
|
||||
child: Text(L10().cancel),
|
||||
),
|
||||
ElevatedButton(
|
||||
onPressed: _isCropping
|
||||
? null
|
||||
: () async {
|
||||
setState(() {
|
||||
_isCropping = true;
|
||||
});
|
||||
|
||||
try {
|
||||
// Crop the image
|
||||
final image = await cropController.onCropImage();
|
||||
if (!mounted) return;
|
||||
if (image != null) {
|
||||
Navigator.of(context).pop(image.bytes);
|
||||
} else {
|
||||
setState(() {
|
||||
_isCropping = false;
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
if (!mounted) return;
|
||||
setState(() {
|
||||
_isCropping = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
child: _isCropping
|
||||
? SizedBox(
|
||||
width: 20,
|
||||
height: 20,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 2.0,
|
||||
color: Colors.white,
|
||||
),
|
||||
)
|
||||
: Text(L10().crop),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,14 +1,16 @@
|
||||
import "dart:io";
|
||||
import "dart:typed_data";
|
||||
|
||||
import "package:flutter/material.dart";
|
||||
import "package:path_provider/path_provider.dart" as path_provider;
|
||||
import "package:flutter_tabler_icons/flutter_tabler_icons.dart";
|
||||
|
||||
import "package:inventree/api.dart";
|
||||
import "package:inventree/inventree/part.dart";
|
||||
import "package:inventree/l10.dart";
|
||||
import "package:inventree/widget/fields.dart";
|
||||
import "package:inventree/widget/part/image_cropper.dart";
|
||||
import "package:inventree/widget/refreshable_state.dart";
|
||||
import "package:inventree/widget/snacks.dart";
|
||||
import "package:inventree/l10.dart";
|
||||
|
||||
class PartImageWidget extends StatefulWidget {
|
||||
const PartImageWidget(this.part, {Key? key}) : super(key: key);
|
||||
@ -32,37 +34,137 @@ class _PartImageState extends RefreshableState<PartImageWidget> {
|
||||
@override
|
||||
String getAppBarTitle() => part.fullname;
|
||||
|
||||
Future<void> _processImageWithCropping(File imageFile) async {
|
||||
try {
|
||||
Uint8List imageBytes = await imageFile.readAsBytes();
|
||||
|
||||
// Show the cropping dialog
|
||||
final Uint8List? croppedBytes = await showDialog<Uint8List>(
|
||||
context: context,
|
||||
barrierDismissible: false,
|
||||
builder: (context) => Dialog(
|
||||
insetPadding: const EdgeInsets.all(16),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
L10().cropImage,
|
||||
style: Theme.of(context).textTheme.titleLarge,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Expanded(child: ImageCropperWidget(imageBytes: imageBytes)),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
if (croppedBytes != null) {
|
||||
imageBytes = croppedBytes;
|
||||
}
|
||||
|
||||
// Save cropped bytes to a proper temporary file for upload
|
||||
final tempDir = await path_provider.getTemporaryDirectory();
|
||||
final timestamp = DateTime.now().millisecondsSinceEpoch;
|
||||
final tempFile = File("${tempDir.path}/cropped_image_$timestamp.jpg");
|
||||
await tempFile.writeAsBytes(imageBytes);
|
||||
|
||||
// Upload the cropped file
|
||||
final result = await part.uploadImage(tempFile);
|
||||
|
||||
// Delete temporary file
|
||||
if (await tempFile.exists()) {
|
||||
await tempFile.delete().catchError((_) => tempFile);
|
||||
}
|
||||
|
||||
if (!result) {
|
||||
showSnackIcon(L10().uploadFailed, success: false);
|
||||
} else {
|
||||
showSnackIcon(L10().uploadSuccess, success: true);
|
||||
}
|
||||
|
||||
refresh(context);
|
||||
} catch (e) {
|
||||
showSnackIcon("${L10().error}: $e", success: false);
|
||||
}
|
||||
}
|
||||
|
||||
// Delete the current part image
|
||||
Future<void> _deleteImage() async {
|
||||
// Confirm deletion with user
|
||||
final bool confirm =
|
||||
await showDialog(
|
||||
context: context,
|
||||
builder: (BuildContext context) => AlertDialog(
|
||||
title: Text(L10().deleteImage),
|
||||
content: Text(L10().deleteImageConfirmation),
|
||||
actions: [
|
||||
TextButton(
|
||||
child: Text(L10().cancel),
|
||||
onPressed: () => Navigator.of(context).pop(false),
|
||||
),
|
||||
TextButton(
|
||||
child: Text(L10().delete),
|
||||
onPressed: () => Navigator.of(context).pop(true),
|
||||
),
|
||||
],
|
||||
),
|
||||
) ??
|
||||
false;
|
||||
|
||||
if (confirm) {
|
||||
final APIResponse response = await InvenTreeAPI().patch(
|
||||
part.url,
|
||||
body: {"image": null},
|
||||
);
|
||||
|
||||
if (response.successful()) {
|
||||
showSnackIcon(L10().deleteSuccess, success: true);
|
||||
} else {
|
||||
showSnackIcon(
|
||||
"${L10().deleteFailed}: ${response.error}",
|
||||
success: false,
|
||||
);
|
||||
}
|
||||
|
||||
refresh(context);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
List<Widget> appBarActions(BuildContext context) {
|
||||
List<Widget> actions = [];
|
||||
List<Widget> actions = [
|
||||
if (part.canEdit) ...[
|
||||
// Delete image button
|
||||
if (part.jsondata["image"] != null)
|
||||
IconButton(
|
||||
icon: Icon(TablerIcons.trash),
|
||||
tooltip: L10().deleteImageTooltip,
|
||||
onPressed: _deleteImage,
|
||||
),
|
||||
|
||||
if (part.canEdit) {
|
||||
// File upload
|
||||
actions.add(
|
||||
// File upload with cropping
|
||||
IconButton(
|
||||
icon: Icon(TablerIcons.file_upload),
|
||||
tooltip: L10().uploadImage,
|
||||
onPressed: () async {
|
||||
FilePickerDialog.pickFile(
|
||||
onPicked: (File file) async {
|
||||
final result = await part.uploadImage(file);
|
||||
|
||||
if (!result) {
|
||||
showSnackIcon(L10().uploadFailed, success: false);
|
||||
}
|
||||
|
||||
refresh(context);
|
||||
await _processImageWithCropping(file);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
],
|
||||
];
|
||||
|
||||
return actions;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget getBody(BuildContext context) {
|
||||
return InvenTreeAPI().getImage(part.image);
|
||||
return Center(child: InvenTreeAPI().getImage(part.image));
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user