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:
- The image from a container field
- The text to use as the watermark
- The RGB color of the watermark (optional with white default)
- The blend level of the watermark in the range 0 to 100 (optional with 80 default)
- 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