Flutter图片编辑插件bc_image_editor的使用
Flutter 图片编辑插件 bc_image_editor 的使用
BC Image Editor
您可以使用此包编辑图像,并通过将前景设置为 null
创建灵活预览图像。目前,您只能使用资源文件。
特性
- 背景和可选的前景图像
- 缩放图像
- 设置它们的 x, y 位置
- 在 x, y 轴上 3D 旋转前景图像(仅限前景)
- 2D 旋转前景图像
- 用于详细视图的缩放
- 使用设备文件或资源文件
- 使用手势检测器编辑前景图像。
- 大小和位置
- 水平和垂直 3D 旋转
- 2D 旋转
- 查看模式(缩放)
开始使用
导入
import 'package:bc_image_editor/bc_image_editor.dart';
使用
BcImageEditor(
frontImage: "image/path",
bgImage: "image/path",
frontWidth: 200,
frontHeight: 300,
bgWidth: 300,
bgHeight: 200, // 如果未设置宽度和高度之一或设置为 null,则另一个会自动缩放
frontLeft: 10,
frontTop: 10,
bgLeft: 10,
bgTop: 10,
frontBoxFit: BoxFit.fill,
bgBoxFit: BoxFit.fill,
rotateX: 0, // rotateX 和 rotateY 都在 3D 轴上
rotateY: 0,
rotate2D: 0,
)
使用手势检测器编辑图像
导入
import 'package:bc_image_editor/edit_with_gesture.dart';
使用
EditWithGesture(
frontImage: frontFilePath,
bgImage: bgFilePath,
editMode: EditMode.verticalRotate,
);
手势编辑模式
编辑模式 | 功能 |
---|---|
size | 调整大小和改变图像位置。 |
horizontalRotate | 沿水平轴 3D 旋转图像。 |
verticalRotate | 沿垂直轴 3D 旋转图像。 |
rotate2D | 2D 旋转。 |
viewMode | 放大图像以查看细节(不进行任何编辑)。 |
noEdit | 关闭编辑。 |
使用资源文件夹中的图像
初始化路径名
String imagePath = "";
创建异步函数并在 initState
中使用它
void initFiles() async {
File tempImg =
await getImageFileFromAssets("assets/image/path");
setState(() {
imagePath = tempImg.path;
});
}
示例
例如,您想使用手势检测器编辑图像并从资源文件中使用图像。
导入文件
import 'package:bc_image_editor/bc_image_editor.dart';
import 'package:bc_image_editor/edit_with_gesture.dart';
创建文件路径变量
String frontFilePath = "", bgFilePath = "";
获取图像文件
创建一个异步函数来获取图像文件。并使用 getImageFileFromAssets
函数从资源中获取图像。(如果您想直接使用设备上的图像,可以写入路径。)
void initFiles() async {
File frontTempFile =
await getImageFileFromAssets("assets/images/example-front.png");
File tempFileBg = await getImageFileFromAssets("assets/images/example-bg.jpg");
setState(() {
frontFilePath = frontTempFile.path;
bgFilePath = tempFileBg.path;
});
}
在 initState
中使用此函数
[@override](/user/override)
void initState() {
super.initState();
initFiles();
}
使用 EditWithGesture
小部件
EditWithGesture(
frontImage: frontFilePath,
bgImage: bgFilePath,
editMode: EditMode.verticalRotate,
);
手势检测器编辑示例
EditMode.size
EditMode.horizontalRotate
EditMode.verticalRotate
EditMode.rotate2D
EditMode.viewMode
完整代码
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:bc_image_editor/bc_image_editor.dart';
import 'package:bc_image_editor/edit_with_gesture.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(
title: const Text("测试"),
),
body: const Home(),
),
);
}
}
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
[@override](/user/override)
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
String frontFilePath = "", bgFilePath = "";
void initFiles() async {
File frontTempFile =
await getImageFileFromAssets("assets/images/char-2.png");
File tempFileBg = await getImageFileFromAssets("assets/images/bg-2.jpg");
setState(() {
frontFilePath = frontTempFile.path;
bgFilePath = tempFileBg.path;
});
}
[@override](/user/override)
void initState() {
super.initState();
initFiles();
}
[@override](/user/override)
Widget build(BuildContext context) {
return EditWithGesture(
frontImage: frontFilePath,
bgImage: bgFilePath,
editMode: EditMode.verticalRotate,
);
}
}
更多关于Flutter图片编辑插件bc_image_editor的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter图片编辑插件bc_image_editor的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,下面是一个关于如何使用Flutter图片编辑插件bc_image_editor
的代码示例。这个示例将展示如何集成该插件并进行基本的图片编辑操作,比如裁剪和滤镜应用。
首先,确保你已经在pubspec.yaml
文件中添加了bc_image_editor
依赖:
dependencies:
flutter:
sdk: flutter
bc_image_editor: ^最新版本号 # 请替换为最新的版本号
然后,运行flutter pub get
来安装依赖。
接下来,在你的Flutter项目中创建一个页面来进行图片编辑。以下是一个简单的示例代码:
import 'package:flutter/material.dart';
import 'package:bc_image_editor/bc_image_editor.dart';
import 'dart:io';
import 'package:image_picker/image_picker.dart'; // 用于选择图片
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ImageEditorPage(),
);
}
}
class ImageEditorPage extends StatefulWidget {
@override
_ImageEditorPageState createState() => _ImageEditorPageState();
}
class _ImageEditorPageState extends State<ImageEditorPage> {
File? _imageFile;
final ImagePicker _picker = ImagePicker();
Future<void> _pickImage() async {
final pickedFile = await _picker.pickImage(source: ImageSource.gallery);
if (pickedFile != null) {
setState(() {
_imageFile = File(pickedFile.path);
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Image Editor Demo'),
),
body: Center(
child: _imageFile == null
? Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('No image selected.'),
ElevatedButton(
onPressed: _pickImage,
child: Text('Pick Image'),
),
],
)
: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.file(_imageFile!),
SizedBox(height: 20),
ElevatedButton(
onPressed: () async {
final result = await BcImageEditor.editImage(
context: context,
image: _imageFile!,
editorConfig: BcImageEditorConfig(
cropConfig: BcCropConfig(
aspectRatioPresets: [
CropAspectRatioPreset.square,
CropAspectRatioPreset.ratio3x2,
CropAspectRatioPreset.original,
CropAspectRatioPreset.ratio4x3,
CropAspectRatioPreset.ratio16x9
],
),
filterConfig: BcFilterConfig(
presets: [
BcFilterPreset.none,
BcFilterPreset.blackWhite,
BcFilterPreset.sepia,
BcFilterPreset.negative,
],
),
),
);
if (result != null) {
setState(() {
_imageFile = File(result.path);
});
}
},
child: Text('Edit Image'),
),
],
),
),
);
}
}
解释
-
依赖导入:首先,我们导入了
bc_image_editor
和image_picker
包。image_picker
用于从设备图库中选择图片。 -
UI结构:我们创建了一个简单的UI,包含一个按钮用于选择图片,以及一个条件渲染区域来显示选中的图片和编辑按钮。
-
选择图片:点击“Pick Image”按钮时,使用
ImagePicker
从设备图库中选择一张图片,并将其保存到_imageFile
变量中。 -
编辑图片:点击“Edit Image”按钮时,调用
BcImageEditor.editImage
方法打开图片编辑器。你可以通过BcImageEditorConfig
配置裁剪和滤镜选项。编辑完成后,结果图片的路径将返回,并更新到_imageFile
变量中。
这个示例展示了如何使用bc_image_editor
进行基本的图片编辑操作。你可以根据需要进一步自定义和扩展这些功能。