In many apps you will need to add Watermark to a Photo or picture and this is possible using Flutter and a plugin that is supported on all platforms. It is the image: https://pub.dev/packages/image package. You could find that – it is written in the GitHub Description – it is coded in dart programming language. The benefit of not depending on native platforms may go down in terms of performance. It may have performance issues especially at edge cases and you should test it and take care of them.
Install
Add the package to your pubspec.yaml:
dependencies:
image: ^3.0.2
This is – if some other package does not depend on it and you don’t have it.
Import
Next, in your dart source file, you must include it:
import 'package:image/image.dart'; // or import 'package:image/image.dart' as ui;
Usage
First you need to initialize some image. You could do that from a initial source of all type of formats – PNG, JPG, PSD, ICO, GIF, etc. The source package processes bytes list. You must have read it from network or local source. This is a subject for another article.
Once you have a ui.Image, you have in memory a bitmap, X/Y matrix with pixels that you could manipulate somehow. The Plugin has a lot of methods to do stuff on it:
- Draw another image into a region (drawImage). This method will resize the image according to the destination size/area.
- copy another image into the existing one – (copyInto – with a destination x/y, with the specified rectangle)
- drawString – with specified font, starting at desired x/y position
- trim, adjust, crop, alpha (transparency), contrast, resize, etc.
- and final – encode to -> PNG, JPG, ICO, GIG, etc.
Once you are done, you should free the memory – for usage by other tasks in the application. This may be – setting variables to null at the end of what you do, so you as a programmer to do what is in your hands to free the memory of a managed language. One more aspect is, if you will have multiple operations, to try to cache some memory/bytes, and try to reuse them. This is an approach implemented in several Android libraries and in the API itself. It should be tested deeply and carefully.
Watermarking Products
I’ve made a Two equivalents that do the functionality of this article.
- Watermarker Web Page – Free – Web Page does the logic in pure JavaScript – without sending any information on the server.
- Vaadin – Spring Boot – Web App
– Paid – Product that stores the data on the Server. The features are:
- You could choose from multiple images to watermark
- Apply the selected watermark to multiple images.