19
Views
20
Comments
[Image Watermark] Add watermarker in a image - Samples
Question
Forge component by Ryan Surjadi
1
Published on 21 Oct 2020
Application Type
Mobile

Hi good afternoon,


I have a GIF on my screen based in an external URL and I want to add a watermarker. I'm trying to use your plugin, can you give me a help?


Thanks,
Daniel Nogueira

Rank: #685

Hi Daniel, 

From extrenal url you need to get Image Binary and convert it to base64 and set to image canvas and then pass to javascript code with the name you want as a water mark.


Thanks,

Dileep

Rank: #27696

Is not possible to pass an image as watermarker? I've already has my binary data and now I want to pass an image as watermarker...

Rank: #377

Hi Daniel, did you mean you want to add an image as a watermark?

Rank: #27696
Rank: #377

Hi Daniel, I think it's possible to add an image as a watermark but I don't know if it will work or not with gif source

Rank: #27696

Ok, but to know, I need to try this...

first of all, I need to understand the parameters that should I pass to the JavaScript.

I need to give a timestamp (i'm using CurrDateTime()) and one Id (I need to know what should I use here).

Rank: #377

if you want to give a timestamp, fill Timestamps input parameter using builtin function OutSystems and Id param is id given from image widget for preview


Rank: #377

Hi Daniel Nogueira, to add an image as a watermark you just change js add watermark to this



Using the path to add an image as a watermark, for this example, I'm using a base64 image as a watermark. marked as a solution if this step is working for you. thanks

Rank: #27696

Hi Ryan, thanks for your reply, but it doesn't work yet.

For example:

I have 2 containers in my screen.

The first has my gif with an external URL.

The second one, with an image that I want to use as watermark.

This is my OnInitialize event:


My first step is convert a html block to binary data, so, I convert the image that I want to use as watermark. After that, I convert the image (binary data) to base64 and then, I'm trying to add watermark as you explain...



Rank: #377


The first has my gif with an external URL. - this images is a base image

The second one, with an image that I want to use as watermark. - the second one, convert to base64 and add to input parameter JS

my js is getting your image source from the first container using jquery to get image source and adding watermark using the second one

Rank: #27696

This is exactly what I'm doing...I'm converting the second image to base64 and then, I'm passing it as input parameter on your JS. 

Rank: #377
Rank: #27696

Of course... I changed my solution. I create a screen just to do an upload of the image desired to be a watermark and save it on database, and in my other screen, I just convert the image to base64 and then, try to add as watermark.

Here's my example. Now, i'm taking '$ is not defined'.

GifTest.oml

Rank: #377

1. after I check your oml , I found your base64 does not include"data:image/jpeg;base64," at the beginning. so the image your convert from server action not load.

2. your screen must contain these required scripts

Rank: #27696

I don't know where should I add "data:image/jpeg;base64,".


Here is my .oml modified.

GifTest.oml

Rank: #377

input parameter to js : "data:image/jpeg;base64,"  + (output from binarytobase64)


Rank: #27696

"Cannot read property 'search' of undefined". This is the message received when I try it.



GifTest.oml

Rank: #377

Hi Daniel, it's because your file is not formatted as base64 (png|jpg|jpeg|gif).not only the watermark image, the original picture need to be convert to base 64 image

Rank: #664

Hi Daniel,

  use below forge component for watermark


https://www.outsystems.com/forge/component-overview/1819/pdf-helper



Rank: #27696

Hi, thanks for your reply, but in this case, this component is just available for traditional web (I need to use on mobile) and it doesn't work to add image as watermarker, just a text.