image_editor

Description:

image editor

image_editor #

The version of readme pub and github may be inconsistent, please refer to github.
Use native(objc,kotlin,arkts) code to handle image data, it is easy to process pictures, and can be used for saving/uploading/preview images.

image_editor

Screenshot
Platform of support
Change Log
Support
ImageEditor Usage

ImageEditor method params
ImageEditorOption
Option

Flip
Clip
Rotate
Color Martix
Scale
AddText

FontManager


MixImage

BlendMode




DrawOption
OutputFormat


ImageMerge
LICENSE

Third party





Screenshot #

Platform of support #
Android, iOS, OpenHarmony
OpenHarmony 平台的例子，请运行 image_editor_ohos/example
Change Log #
This version is a null-safety version.
Please read document for null-safety information in dart or flutter.
Support #



Feature
Android
iOS
OpenHarmony




flip
✅
✅
✅


crop
✅
✅
✅


rotate
✅
✅
✅


scale
✅
✅
✅


matrix
✅
✅
❌


mix image
✅
✅
✅


merge multi image
✅
✅
✅


draw point
✅
✅
✅


draw line
✅
✅
✅


draw rect
✅
✅
✅


draw circle
✅
✅
✅


draw path
✅
✅
✅


draw Bezier
✅
✅
✅


Gaussian blur
❌
❌
❌



ImageEditor Usage #

dependencies:
image_editor: $latest
copied to clipboard
About version, please find it from pub.
Import
import 'package:image_editor/image_editor.dart';
copied to clipboard
Method list:
ImageEditor.editImage();
ImageEditor.editFileImage();
ImageEditor.editFileImageAndGetFile();
ImageEditor.editImageAndGetFile();
copied to clipboard
Example used alone
Example of extended_image
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);
copied to clipboard
Option #
Flip
FlipOption(horizontal:true, vertical:false);
copied to clipboard
Clip
ClipOption(x:0, y:0, width:1920, height:1920);
copied to clipboard
Rotate
RotateOption(degree: 180);
copied to clipboard
Color Martix
ColorOption();
copied to clipboard
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, keepRatio: keepRatio, keepWidthFirst: keepWidthFirst);
copied to clipboard
keepRatio and keepWidthFirst are optional parameters used to maintain the aspect ratio of the original image to prevent image deformation.
keepWidthFirst takes effect only when keepRatio is true.
The following is a brief description:



width
height
keepRatio
keepWidthFirst
src size
dest size




500
300
false
true/false
1920x1920
500x300


500
300
true
true
1920x1920
500x500


500
300
true
false
1920x1920
300x300



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.
),
);
copied to clipboard
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 in EditorText.
// If you want to use system font, you can use empty string.
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.
),
);
copied to clipboard
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(() {});
}
copied to clipboard
BlendMode
Support next BlendMode, other will be ignored. You can also see the document of flutter.



iOS/macOS
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



Example
Style of paint: DrawPaint, user can set lineWeight,color,style(stroke,fill).
OutputFormat #
var outputFormat = OutputFormat.png();
var outputFormat = OutputFormat.jpeg(95); // The 95 is quality of jpeg.

copied to clipboard
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(() {});
copied to clipboard
LICENSE #
Apache License 2.0
Third party #
Under Apache 2.0 style:
Some martix code come from android sdk.
TrueTypeParser : Use it to read font name.