Flutter OHOS flutter_image_crop(图片裁剪)

Flutter 的图片裁剪插件

该插件附带一个Crop小部件。该小部件仅渲染图像、叠加层和用于裁剪图像的句柄。因此,它可以与其他小部件组合以构建自定义图像裁剪体验。

使用

  1. 创建一个小部件来加载和编辑图像:
ini 复制代码
final cropKey = GlobalKey<CropState>();
less 复制代码
Widget _buildCropImage() {
  return Container(
  color: Colors.black,
  padding: const EdgeInsets.all(20.0),
  child: Crop(
key: cropKey,
image: Image.file(imageFile),
aspectRatio: 4.0 / 3.0,
  ),
  );
}
  1. 访问裁剪值:
  • 比例是裁剪时按比例缩放图像宽度和高度的一个因素。1.0不需要比例。
  • 区域是一个矩形,表示图像上要裁剪的分数位置。
ini 复制代码
final crop = cropKey.currentState;
// or
// final crop = Crop.of(context);
final scale = crop.scale;
final area = crop.area;

if (area == null) {
// cannot crop, widget is not setup
// ...
}
  1. 访问和处理图像。作为请求访问照片权限的便捷功能。

    final permissionsGranted = await ImageCrop.requestPermissions();

  2. 读取图像选项,例如:宽度和高度。这是一种高效的实现,无需解码或将实际图像加载到内存中。

css 复制代码
	final options = await getImageOptions(file: file);
debugPrint('image width: ${options.width}, height: ${options.height}');
  1. 如果要将大图像加载到内存中,则有一个采样函数依赖于本机平台按比例缩小图像,然后再将其加载到内存中。例如,重新采样图像以1024x4096尽可能接近尺寸。如果它是正方形,preferredSize则可以使用它来指定宽度和高度。在 UI 中显示图像时最好利用此功能。
yaml 复制代码
	final sampleFile = await ImageCrop.sampleImage(
file: originalFile,
preferredWidth: 1024,
preferredHeight: 4096,
);
  1. 一旦Crop小部件准备就绪,就会提供对图像的裁剪和缩放的原生支持。为了生成更高质量的裁剪图像,请依靠具有首选最大宽度和高度的采样图像。放大采样图像的分辨率。裁剪后,图像的分辨率更高。示例如下:
less 复制代码
	final sampledFile = await ImageCrop.sampleImage(
file: originalFile,
preferredWidth: (1024 / crop.scale).round(),
preferredHeight: (4096 / crop.scale).round(),
);

final croppedFile = await ImageCrop.cropImage(
file: sampledFile,
area: crop.area,
);

鸿蒙OS关键代码

###裁剪方法

ini 复制代码
 private async cropImage(result: MethodResult, path: string, scale: number, left: number, top: number, right: number, bottom: number) {
let imageSource = image.createImageSource(path);
let pixelMapData = await imageSource.createPixelMap();
let options = await this.decodeImageOptions(imageSource);
if (options.isFlippedDimensions()) {
  await pixelMapData.rotate(options.getDegrees());
}

let width = options.getWidth() * (right - left) * scale;
let height = options.getHeight() * (bottom - top) * scale;
let region: image.Region = {
  x: options.getWidth() * left, y: options.getHeight() * top, size: {
height: height, width: width
  }
};
await pixelMapData.crop(region);
let dstFile = this.createTemporaryImageFilePath();
await this.savaPixelMap(pixelMapData, dstFile);
await imageSource.release();
result.success(dstFile);
  }

缩略图采样

typescript 复制代码
  private async sampleImage(result: MethodResult, path: string, maximumWidth: number, maximumHeight: number) {
let imageSource = image.createImageSource(path);
let options = await this.decodeImageOptions(imageSource);
// 缩略图采样大小,当前只能取1。
let inSampleSize = 1;//this.calculateInSampleSize(options.getWidth(), options.getHeight(), maximumWidth, maximumHeight);
let pixelMapData = await imageSource.createPixelMap({sampleSize: inSampleSize});
if (options.getWidth() > maximumWidth && options.getHeight() > maximumHeight) {
  let ratio = Math.max(maximumWidth / options.getWidth(), maximumHeight / options.getHeight());
  await pixelMapData.scale(ratio, ratio);
}
let dstFile = this.createTemporaryImageFilePath();
await this.savaPixelMap(pixelMapData, dstFile);
await imageSource.release()
// await this.copyExif(path, dstFile); //此方法OHOS接口暂时支持有问题 等新版本在验证
result.success(dstFile);
  }

获取图片属性

csharp 复制代码
  private async getImageOptions(path: string, result: MethodResult) {
let source = image.createImageSource(path);
let options = await this.decodeImageOptions(source);
let properties = new HashMap<string, number>();
properties.set("width", options.getWidth());
properties.set("height", options.getHeight());
await source.release();
result.success(properties);
  }
相关推荐
Setsuna_F_Seiei4 小时前
前端转型 Agent 开发 04 之 MCP 与 Skill(赋予 Agent 更广工作能力)
前端·agent
刘发财6 小时前
前端2秒生成500页矢量PDF,rust真的强到没朋友
前端·javascript·rust
郑州光合科技余经理6 小时前
国际版外卖系统:税率字段怎么和订单主流程解耦
android·java·开发语言·前端·后端·php·ai编程
梦想平凡7 小时前
百游棋牌源代码开发搭建教程(十):隔离部署、备份恢复与双端验收
java·前端·javascript·数据库·源代码管理
yume_sibai8 小时前
06-Rust Web 开发实战(Axum 框架 + 数据库 + JWT 认证 + 中间件 + 部署)
前端·数据库·rust
计算机魔术师9 小时前
特朗普上台打给黄仁勋:AI末日论是骗局,我们绝不让它发生
前端
troy1289 小时前
Python 基础语法(八):Web 后端开发、数据分析与可视化、网络爬虫、人工智能 / 大模型应用
前端·python·数据分析
计算机魔术师10 小时前
CEO说要慢下来,黑客说别做梦了——同一篇论文,两种命运
前端
kyriewen10 小时前
我花3天抓了一个幽灵bug,凶手藏在第4层
前端·javascript·程序员
IT_陈寒11 小时前
Java里用Stream.parallel()翻车实录,这性能还不如单线程
前端·人工智能·后端