Flutter plugin, support android/ios.Support crop, flip, rotate, color martix, mix image, add text. merge multi images.
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.
Android, iOS.
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();
| Name | Description | | ----------------- | -------------------------------------- | | image | dart.typeddata.Uint8List | | file | dart.io.File | | imageEditorOption | flutterimage_editor.ImageEditorOption |
final editorOption = ImageEditorOption(); editorOption.addOption(FlipOption()); editorOption.addOption(ClipOption()); editorOption.addOption(RotateOption()); editorOption.addOption(); // and other option.editorOption.outputFormat = OutputFormat.png(88);
FlipOption(horizontal:true, vertical:false);
ClipOption(x:0, y:0, width:1920, height:1920);
RotateOption(degree: 180);
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
ColorOptionhas some factory constructor to help use change brightness, saturation and contrast. If you have more color matrix, you can open Pull Requests or issue.
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).
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. ), );
Here we can use
FontManagerto 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. ), );
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(() {}); }
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 | SRCOVER | srcOver | | kCGBlendModeDestinationOver | DSTOVER | dstOver | | kCGBlendModeSourceIn | SRCIN | srcIn | | kCGBlendModeDestinationIn | DSTIN | dstIn | | kCGBlendModeSourceOut | SRCOUT | srcOut | | kCGBlendModeDestinationOver | DSTOUT | dstOut | | kCGBlendModeSourceAtop | SRCATOP | srcATop | | kCGBlendModeDestinationAtop | DSTATOP | dstATop | | kCGBlendModeXOR | XOR | xor | | kCGBlendModeDarken | DARKEN | darken | | kCGBlendModeLighten | LIGHTEN | lighten | | kCGBlendModeMultiply | MULTIPLY | multiply | | kCGBlendModeScreen | SCREEN | screen | | kCGBlendModeOverlay | OVERLAY | overlay |
Main class :
DrawOption
Support:
Style of paint:
DrawPaint, user can set lineWeight,color,style(stroke,fill).
var outputFormat = OutputFormat.png(); var outputFormat = OutputFormat.jpeg(95);
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(() {});
MIT Style.
Under Apache 2.0 style:
Some martix code come from android sdk.
TrueTypeParser : Use it to read font name.