10

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

Constantin N.
  • 2,739
  • 2
  • 16
  • 27

5 Answers5

6

For videos:

For images:

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.

TWL
  • 6,228
  • 29
  • 65
0

For watermark images:

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;
}

This is an customisation of this medium article. Because the original solution was not working for me.

Bonobito
  • 11
  • 2
  • I wonder that it will be necessary applying watermark on each frame with the previous function then probably join all the frames with the following package https://pub.dev/packages/flutter_ffmpeg – Bonobito Aug 03 '21 at 19:49
0

For Image you can use this pacakge https://pub.dev/packages/image_watermark
based on Image pacakge. As parameter you have to pass image bytes and return output image bytes and you can use Image.memory(imgBytes) widget. Add text watermark:

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

you can customize position ,color of text

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
                        )

Image watermark:

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

For video: https://pub.dev/packages/video_manipulation/example

_outputFilepath =
        await VideoManipulation.generateVideo([inputVideopath,watermarkimgPath], outputFilename, framerate, speed);
saurabh
  • 131
  • 3
0

To add image, Try this latest updated package video_watermark

VideoWatermark videoWatermark = VideoWatermark(
    sourceVideoPath: videoPath,
    watermark: Watermark(image: WatermarkSource.file(imagepath)),
    onSave: (path){
        // Get the output file path
    },
);

videoWatermark.generateVideo();
-1

I am not sure about adding watermark over video. But to help people who are looking for watermark over the image can refer to the simple article written by me.

Add Watermark over Image in Flutter

In this article, I have used Image package to apply watermark text or image over Image.There is well explained example program also written about this topic.

Gulshan Yadav
  • 424
  • 5
  • 13
  • A link to a solution is welcome, but please ensure your answer is useful without it: [add context around the link](https://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers/8259#8259) so future users will have some idea what it is and why it is there, then quote the most relevant part of the page you are linking to in case the target page is unavailable. [Answers that are little more than a link may be deleted](https://stackoverflow.com/help/deleted-answers). – lepsch Sep 17 '22 at 13:47