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

Question

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

请指导我如何操作。

谢谢

Answer 1

对于视频：

https://github.com/tanersener/flutter-ffmpeg, though I couldn’t find anything that explicitly documents a way to edit the video, such as a watermark. But it should be possible according to others .
https://pub.dev/packages/video_manipulation

Adding still frames to an existing video, e.g. watermarks

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

Parameters paths list of input file paths. Can be images (.jpg or .png) or video files (.mp4) that are used to generate the new video. E.g.: ["documents/input.mp4", "documents/watermark.jpg]

图片：

https://pub.dev/packages/image

load, save and manipulate images in a variety of different file formats.

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

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

至于其他服务，我不知道，但是Firebase不提供这个服务。

另外，client/app-side，目前视频的东西不多，图片的比较多，大家可以搜索一下https://pub.dev/flutter/packages?q=image+editor. However, for more options, you’ll have to seek out native Android/iOS libraries and custom integrate them through the platform channels。

Answer 2

我不确定在视频上添加水印。不过要帮助找水印的朋友可以参考我写的简单文章。

Add Watermark over Image in Flutter

在本文中，我使用 Image 包在 Image.There 上应用水印文本或图像，很好地解释了示例程序也写了关于这个主题。

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
基于图像包。作为参数，您必须传递图像字节和 return 输出图像字节您可以使用 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);

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

How to add an image or text (Watermark) on a video/image - Flutter/Dart

video

watermark

image

dart

flutter