Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I'm building a Flutter application which needs to add waermark on videos and images. Is there any way to achieve this with firebase (or any other service)? I could do this on client-side but also there i can't find any flutter/Dart package related to video/image processing.

Kindly guide me how to do it.

Thanks

like image 888
Constantin N. Avatar asked Nov 06 '19 11:11

Constantin N.


People also ask

How do I put text over an image in Flutter?

In Flutter, you can place text over an image by using the Stack widget.


1 Answers

For videos:

  • 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://stackoverflow.com/a/57847155/6668797.
  • 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]

For images:

  • 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');

As for other services, I don't know, but Firebase does not offer this service.

Otherwise, client/app-side, there’s currently not much else for videos, but there's more available for images, you can search 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.

like image 178
TWL Avatar answered Oct 05 '22 14:10

TWL