image_editor
The version of readme pub and github may be inconsistent, please refer to github.
Use native(objc,kotlin) code to handle image data, it is easy to process pictures, and can be used for saving/uploading/preview images.
Screenshot
Platform of support
Android, iOS.
Change Log
This version is a null-safety version.
Please read document for null-safety information in dart or flutter.
Support
- flip
- crop
- rotate
- scale
- matrix
- add text
- mix image
- merge multi image
- draw somethings
- draw point
- draw line
- draw rect
- draw circle
- draw path
- draw Bezier
- Gaussian blur
ImageEditor Usage
dependencies:
image_editor: $latest
About version, please find it from pub.
Import
import 'package:image_editor/image_editor.dart';
Method list:
ImageEditor.editImage();
ImageEditor.editFileImage();
ImageEditor.editFileImageAndGetFile();
ImageEditor.editImageAndGetFile();
ImageEditor method params
| Name | Description |
|---|---|
| image | dart.typed_data.Uint8List |
| file | dart.io.File |
| imageEditorOption | flutter_image_editor.ImageEditorOption |
ImageEditorOption
final editorOption = ImageEditorOption();
editorOption.addOption(FlipOption());
editorOption.addOption(ClipOption());
editorOption.addOption(RotateOption());
editorOption.addOption(); // and other option.
editorOption.outputFormat = OutputFormat.png(88);
Option
Flip
FlipOption(horizontal:true, vertical:false);
Clip
ClipOption(x:0, y:0, width:1920, height:1920);
Rotate
RotateOption(degree: 180);
Color Martix
ColorOption();
it's use 5x4 matrix : https://developer.android.google.cn/reference/android/graphics/ColorMatrix.html Although it is an Android document, the color matrix is also applicable to iOS.
a, b, c, d, e,
f, g, h, i, j,
k, l, m, n, o,
p, q, r, s, t
ColorOption has some factory constructor to help use change brightness, saturation and contrast. If you have more color matrix, you can open Pull Requests or issue.
Scale
ScaleOption(width,height);
After specifying the width and height, it is not clipped, but stretched to the specified width and height (Does not maintain the aspect ratio of the image).
AddText
All of unit is pixel.
final textOption = AddTextOption();
textOption.addText(
EditorText(
offset: Offset(0, 0),
text: this._controller.text,
fontSizePx: size,
color: Colors.red,
fontName: '', // You must register font before use. If the fontName is empty string, the text will use default system font.
),
);
FontManager
Here we can use FontManager to register font.
File fontFile = File(path)//;
final String fontName = await FontManager.registerFont(fontFile);
// the fontName can be use int EditorText.
final textOption = AddTextOption();
textOption.addText(
EditorText(
offset: Offset(0, 0),
text: this._controller.text,
fontSizePx: size,
color: Colors.red,
fontName: fontName, // You must register font before use.
),
);
MixImage
void mix(BlendMode blendMode) async {
final src = await loadFromAsset(R.ASSETS_SRC_PNG);
final dst = await loadFromAsset(R.ASSETS_DST_PNG);
final optionGroup = ImageEditorOption();
optionGroup.outputFormat = OutputFormat.png();
optionGroup.addOption(
MixImageOption(
x: 300,
y: 300,
width: 150,
height: 150,
target: MemoryImageSource(src),
blendMode: blendMode,
),
);
final result =
await ImageEditor.editImage(image: dst, imageEditorOption: optionGroup);
this.image = MemoryImage(result);
setState(() {});
}
BlendMode
Support next BlendMode, other will be ignored. You can also see the document of flutter.
| iOS | android(PorterDuff.Mode) | flutter(BlendMode) |
|---|---|---|
| kCGBlendModeClear | CLEAR | clear |
| SRC | src | |
| DST | dst | |
| kCGBlendModeNormal | SRC_OVER | srcOver |
| kCGBlendModeDestinationOver | DST_OVER | dstOver |
| kCGBlendModeSourceIn | SRC_IN | srcIn |
| kCGBlendModeDestinationIn | DST_IN | dstIn |
| kCGBlendModeSourceOut | SRC_OUT | srcOut |
| kCGBlendModeDestinationOver | DST_OUT | dstOut |
| kCGBlendModeSourceAtop | SRC_ATOP | srcATop |
| kCGBlendModeDestinationAtop | DST_ATOP | dstATop |
| kCGBlendModeXOR | XOR | xor |
| kCGBlendModeDarken | DARKEN | darken |
| kCGBlendModeLighten | LIGHTEN | lighten |
| kCGBlendModeMultiply | MULTIPLY | multiply |
| kCGBlendModeScreen | SCREEN | screen |
| kCGBlendModeOverlay | OVERLAY | overlay |
DrawOption
Main class : DrawOption
Support:
- Line
- Rect
- Oval
- Points
- Path
- move
- line
- bezier2
- bezier3
Style of paint: DrawPaint, user can set lineWeight,color,style(stroke,fill).
OutputFormat
var outputFormat = OutputFormat.png();
var outputFormat = OutputFormat.jpeg(95);
ImageMerge
final slideLength = 180.0;
final option = ImageMergeOption(
canvasSize: Size(slideLength * count, slideLength * count),
format: OutputFormat.png(),
);
final memory = await loadFromAsset(R.ASSETS_ICON_PNG);
for (var i = 0; i < count; i++) {
option.addImage(
MergeImageConfig(
image: MemoryImageSource(memory),
position: ImagePosition(
Offset(slideLength * i, slideLength * i),
Size.square(slideLength),
),
),
);
}
for (var i = 0; i < count; i++) {
option.addImage(
MergeImageConfig(
image: MemoryImageSource(memory),
position: ImagePosition(
Offset(
slideLength * count - slideLength * (i + 1), slideLength * i),
Size.square(slideLength),
),
),
);
}
final result = await ImageMerger.mergeToMemory(option: option);
provider = MemoryImage(result);
setState(() {});
LICENSE
MIT Style.
Third party
Under Apache 2.0 style:
Some martix code come from android sdk.
TrueTypeParser : Use it to read font name.
0 Jan 4, 2022
5 Jun 23, 2020
24 Nov 13, 2022
214 Dec 26, 2022
292 Dec 27, 2022
91 Dec 19, 2022
14 Nov 26, 2022
1 Dec 8, 2021
3 Mar 24, 2022
60 Nov 4, 2022
11 Nov 29, 2022
7 Sep 4, 2022
5 Dec 12, 2022
2 Oct 13, 2022
0 Feb 2, 2022
103 Oct 30, 2022
201 Nov 10, 2022
6 Nov 21, 2022
8 Jun 17, 2022