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

Question

我正在构建一个需要在视频和图像上添加 waermark 的 Flutter 应用程序。 有没有办法通过firebase（或任何其他服务）实现这一目标？我可以在client-side 上执行此操作，但我也找不到任何与视频/图像处理相关的颤振/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 的自定义。因为原来的解决方案不适合我。

Answer 4

对于图片，您可以使用此包装 https://pub.dev/packages/image_watermark
基于图像包。 作为参数，您必须传递图像字节并返回输出图像字节 你可以使用 Image.memory(imgBytes) 小部件。 添加文字水印：

var watermarkedImg = await image_watermark.addTextWatermarkCentered(imgBytes,'watermarkText');

您可以自定义文本的位置、颜色

var watermarkedImg = await image_watermark.addTextWatermark(
                          imgBytes,             ///image bytes
                          'watermarkText',      ///watermark text
                          20,                   ///position of watermark x coordinate
                          30,                   ///y coordinate
                          color: Colors.green, ///default : Colors.white
                        )

图片水印：

watermarkedImgBytes = await image_watermark.addImageWatermark(
                              imgBytes, //image bytes
                              imgBytes2,//watermark img bytes
                              imgHeight: 200,   //watermark img height
                              imgWidth: 200,    //watermark img width
                              dstY: 400,
                              dstX: 400);

对于视频： https://pub.dev/packages/video_manipulation/example

_outputFilepath =
        await VideoManipulation.generateVideo([inputVideopath,watermarkimgPath], outputFilename, framerate, speed);