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

Posted 2023-02-23

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

【英文标题】：How to add an image or text (Watermark) on a video/image - Flutter/Dart

【发布时间】：2020-03-02 20:52:39

【问题描述】：

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

请指导我如何做。

谢谢

【参考方案1】：

对于视频：

https://github.com/tanersener/flutter-ffmpeg，虽然我找不到任何明确记录视频编辑方式的内容，例如水印。不过按照别人https://***.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。

【讨论】：

这是否适用于图像选择器一个用例，我通过在应用程序中打开相机或从图库中选择图像来捕获图像

是的，一旦您参考了创建的File，它们都应该。

使用 FFmpeg 运气好吗？

【参考方案2】：

我不确定是否要在视频上添加水印。但是为了帮助那些在图片上寻找水印的人可以参考我写的简单文章。

Add Watermark over Image in Flutter

在本文中，我使用 Image 包在 Image 上应用水印文本或图像。关于此主题还编写了很好的示例程序。

【参考方案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 的自定义。因为原来的解决方案不适合我。

【讨论】：

我想知道是否有必要使用前面的功能在每个帧上应用水印，然后可能使用以下包加入所有帧pub.dev/packages/flutter_ffmpeg

【参考方案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);