LiveCode for FM Manual FunctionsHow do I watermark an image?

How do I watermark an image?

In LiveCode it is very easy to create an adorned version of an image. You could use the technique detailed in this lesson to for a wide range of applications. For example creating a meme generator, redacting an image or marking up an image with annotations. For this lesson we will create a function that creates an image with a centered text watermark.

Creating the function

Open the LiveCode for FM solution and click on the `Functions` button.

In the LiveCode for FM Workspace click on the `+` (1) icon to create a new function. Name it `Watermark` (2) and click `OK` (3).

Scroll down the list of functions and select `Watermark` (1). You can enter a description (2) and copy the function script below into the script editor (3).

This script creates a group containing the original image and watermark text and exports a snapshot of the group to create the new image. This is a reusable technique you could use with any kind of image adornment object placed inside the group. The function has 5 parameters:

  1. The image from a container field
  2. The text to use as the watermark
  3. The RGB color of the watermark (optional with white default)
  4. The blend level of the watermark in the range 0 to 100 (optional with 80 default)
  5. The font of the watermark which must be one of names listed in the LiveCode fontNames function.
if there is no stack "WatermarkTemporary" then
   create invisible stack "WatermarkTemporary"
   set the defaultStack to "WatermarkTemporary"

   create group "ExportGroup"
   set the showBorder of group "ExportGroup" to false
   set the margins of group "ExportGroup" to 0
   
   create image "OriginalImage" in group "ExportGroup"
   set the showBorder of image "OriginalImage" to false
   
   create field "Watermark" in group "ExportGroup"
   set the opaque of field "Watermark" to false
   set the showBorder of field "Watermark" to false
   set the textAlign of field "Watermark" to center
else
   go invisible stack "WatermarkTemporary"
end if

if fmBinaryParamHasStream(1, "PNGf") then
   put fmBinaryParamStream(1, "PNGf") into image "OriginalImage"
else if fmBinaryParamHasStream(1, "JPEG") then
   put fmBinaryParamStream(1, "JPEG") into image "OriginalImage"
else
   put fmBinaryParamStream(1, fmBinaryParamMain(1)) into image "OriginalImage"
end if

set the width of image "OriginalImage" to the formattedWidth of image "OriginalImage"
set the height of image "OriginalImage" to the formattedHeight of image "OriginalImage"
set the topLeft of image "OriginalImage" to 0,0

put fmParam(2) into field "Watermark"

if fmParam(3) is a color then
   set the textColor of field "Watermark" to fmParam(3)
else
   set the textColor of field "Watermark" to 255,255,255
end if

if fmParam(4) is an integer and \
      fmParam(4) >= 0 and \
      fmParam(4) <= 100 then
   set the blendLevel of field "Watermark" to fmParam(4)
else
   set the blendLevel of field "Watermark" to 80
end if

if fmParam(5) is among the lines of the fontNames then
   set the textFont of field "Watermark" to fmParam(5)
else
   set the textFont of field "Watermark" to empty
end if

set the width of field "Watermark" to the width of image "OriginalImage"

set the textSize of field "Watermark" to 300
-- reduce the text size by 10 percent until it fits
repeat
   if (the formattedHeight of field "Watermark" < the height of image "OriginalImage" and \
         the formattedWidth of field "Watermark" < the width of image "OriginalImage") or \
         the textSize of field "Watermark" < 10 then
      exit repeat
   end if
   set the textSize of field "Watermark" to the textSize of field "Watermark" div 10 * 9
end repeat

set the height of field "Watermark" to the formattedHeight of field "Watermark"
set the location of field "Watermark" to the location of image "OriginalImage"

put "binary" into tData["type"]
put width of image "OriginalImage" into tData["width"]
put the height of image "OriginalImage" into tData["height"]

set the itemDelimiter to "."
put item 1 of fmBinaryParamFilename(1) & "-wartermarked" into tFilename

if fmBinaryParamHasStream(1, "PNGf") then
   put "PNGf" into tData["main"]
   export snapshot from group "ExportGroup" to tData["value"]["PNGf"] as PNG
   put tFilename & ".png" into tData["filename"]
else if fmBinaryParamHasStream(1, "JPEG") then
   put "JPEG" into tData["main"]
   export snapshot from group "ExportGroup" to tData["value"]["JPEG"] as JPEG
   put tFilename & ".jpg" into tData["filename"]
end if

return tData

Testing

Choose `File -> New Solution...` from the menubar and save the file. Then choose `File > Manage > Database...` from the menubar.

In the `Manage Database` dialog create fields as seen in the image below. Then create a calculation field named `Watermarked Image`. This will open the `Specify Calculation` dialog.

In the `Specify Calculation` dialog enter the calculation as seen in the image below and set the `Calculation result is` option button to `Container` then click on `Storage Options...`

Check `Do not store calculation results` and click `OK`. Click `OK` on the `Specify Calculation` dialog and the `Manage Database` dialog to return to the solution.

Open the `Field Picker` (1) and drag the fields to the layout then click `Exit Layout` to return to browse mode.

Click on `New Record` and drag an image to the `Original Image` field. Fill out the other fields and watch the `Watermarked Image` change as you do this.

0 Comments

Add your comment

E-Mail me when someone replies to this comment