Question

我正在构建一个Flutter应用程序，该应用程序需要在视频和图像上添加标记。有什么方法可以通过firebase（或任何其他服务）来实现？我可以在client-side上执行此操作，但在那里也找不到与视频/图像处理相关的任何flutter / Dart程序包。

请指导我如何做。

谢谢

Answer 1

对于视频：

https://github.com/tanersener/flutter-ffmpeg，尽管找不到任何明确记录编辑视频方法的内容，例如水印。但是根据其他人https://stackoverflow.com/a/57847155/6668797，这应该是可能的。
https://pub.dev/packages/video_manipulation


将静止帧添加到现有视频中，例如水印

.generateVideo(List<String> paths, String filename, int fps, double speed).

参数paths输入文件路径的列表。可以是图像（.jpg或   （.png）或用于生成新视频的视频文件（.mp4）。   例如：["documents/input.mp4", "documents/watermark.jpg]

对于图像：

https://pub.dev/packages/image


加载，保存和处理各种不同文件格式的图像。

https://github.com/brendan-duncan/image/wiki/Examples

drawString(image, arial_24, 0, 0, 'Hello World');

对于其他服务，我不知道，但是Firebase不提供此服务。

否则，在客户端/应用程序端，视频的其他内容很少，但是图像的内容更多，您可以搜索https://pub.dev/flutter/packages?q=image+editor。但是，要获得更多选择，您必须寻找Android / iOS本机库和custom integrate them through the platform channels。

Answer 2

我不确定要在视频上添加水印。但是，要帮助正在图像上寻找水印的人们，可以参考我写的简单文章。

Add Watermark over Image in Flutter

在本文中，我使用Image包在Image上应用水印文本或图像。关于此主题的示例程序也得到了很好的解释。

Answer 3

对于水印图像：

import 'package:extended_image/extended_image.dart';
import 'package:image/image.dart' as ui;
import 'package:path_provider/path_provider.dart';


Future<File> watermarkPicture( File picture, File watermark, String fileName) async {
  ui.Image originalImage = ui.decodeImage(picture.readAsBytesSync());
  ui.Image watermarkImage = ui.decodeImage((watermark.readAsBytesSync()));

  ui.Image image = ui.Image(originalImage.width, originalImage.height);
  ui.drawImage(image, watermarkImage);

  // Easy customisation for the position of the watermark in the next two lines
  final int positionX = (originalImage.width / 2 - watermarkImage.width / 2).toInt();
  final int positionY = (originalImage.height - watermarkImage.height * 1.15).toInt();

  ui.copyInto(
    originalImage,
    image,
    dstX: positionX,
    dstY: positionY,
  );
  final File watermarkedFile = File('${(await getTemporaryDirectory()).path}/$fileName');

  await watermarkedFile.writeAsBytes(ui.encodeJpg(originalImage));

  return watermarkedFile;
}

这是对 medium article 的定制。因为原来的解决方案对我不起作用。

如何在视频/图像上添加图像或文本（水印）-Flutter / Dart

3 个答案: