All our videos are HD. Please enjoy in full screen. 🙂

The FileMaker WebViewer is a powerful JavaScript Runtime engine.  If you know how to exchange data between the WebViewer and FileMaker you can do all sorts of cool things. In this video we look at a new ModularFileMaker Module I just released, called “Waterwark”. It uses HTML5 and Javascript to get FileMaker’s WebViewer to “watermark” photos for us.

watermark

Watermark uses the HTML5 canvas element to place a “watermark” on an another image in a given location, and at a given opacity. Both the photo and the watermark can come from FileMaker container fields.  You can control, the opacity, position and offset from within FileMaker as well. You don’t need to know anything about HTML5 or JavaScript to use this module.

FileMaker WebViewer and HTML5

GoDraw, our drawing add-on and GoSign, our signature capture add-on, both make use of HTML5 , the Canvas element and Javascript to do their magic.  You may want to check them out to see what else you can do with the FileMaker Webviewer.

FileMaker Webviewer Data URLs

We calculate a web page to display in the FileMaker WebViewer control.  That web page contains all of the code needed to produce the final watermarked image. We then display that web page using a data url.  The web page then calls a FileMaker script using the fmp:// url protocol.  The script gets the Base64 encoded image as a script parameter.

The file is hosted and available for download at ModularFileMaker.org

One response to “WaterMarking Photos with the FileMaker WebViewer”

Leave a Reply