image_editor 0.7.0 image_editor: ^0.7.0 copied to clipboard
Edit your image data and output to file/memory, Use objc/kotlin to handle it.
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.
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: ^0.6.0
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,
),
);
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.
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(() {});
Common issue #
iOS #
Privacy of camera
Because, I include GPUImage to handle image data, and the library have Camera api, so you must add next Usage String in info.plist. It was introduced in version 0.3.x, if you don't need the new features added after 0.3, you can keep using the old version.
Why need add it by apple
How to add it by apple
LICENSE #
MIT Style.
Third party #
Under Apache 2.0 style: Some martix code come from android sdk.