In this article I will demonstrate how to implement watermark.js by Patrick Wied. Using the power of HTML5 image manipulation we are able to add a watermark graphic to another image and determine position and opacity - even with a JPG!! Of course that means no IE but hey we’re looking forward not backward people!
Introduction
This week I am only going to use one article because this hopefully won’t be too long. I am also going to try and break the article down into a simpler format than before, highlighting the XPages techniques as well as the jQuery techniques. Thanks to David Leedy for the feedback on article format and content.
The demonstration database can be downloaded from the link above or from here
Opacity in images
JPEG has been the standard web format for many years and was fantastic when we were able to reduce the size of images to (good enough) over a slow connection. Nowadays though the need to have image capability is opacity. PNG files are now the go to image format for the web and like GIF they support an A(lpha) channel which allows for an opacity to be applied to the image directly.
watermark.js
Looping through all pixels in an image – using JavaScript!
watermark.js uses a new feature in HTML5 whereby each pixel of a graphic can be manipulated from JavaScript, including the addition of an alpha (opactiy) value. The original article by Patrick explains how some very simple loop code can be written to go through each pixel in an image and apply an opacity.
First we have to create a canvas element, add it to the document’s body, set the canvas size to the image size (we have a 500×200 img) and add the image to the canvas.
// get the image
var img = document.getElementById("your-image");
// create and customize the canvas
var canvas = document.createElement("canvas");
canvas.width = 500;
canvas.height = 200;
document.body.appendChild(canvas);
// get the context
var ctx = canvas.getContext("2d");
// draw the image into the canvas
ctx.drawImage(img, 0, 0);
“Ok this is the more interesting part of the solution. We have to access the image data, loop thru all pixels of the image and set the alpha values to the value of our choice. A pixel in the imagedata is represented by four values: red, green, blue, alpha (rgba) therefore we have to change every fourth value.”
// get the image data object
var image = ctx.getImageData(0, 0, 500, 200);
// get the image data values
var imageData = image.data,
length = imageData.length;
// set every fourth value to 50
for(var i=3; i < length; i+=4){
imageData[i] = 50;
}
// after the manipulation, reset the data
image.data = imageData;
// and put the imagedata back to the canvas
ctx.putImageData(image, 0, 0);
And here’s what we are going to build – an image with another opaque image surfaced on top of is as a watermark.
Our watermarked image
The watermark custom control
We are going to build an XPages watermark custom control whereby the developer can determine all the parameters of the effect through the custom properties of the control and therefore not have to change any of the underlying code.
There are 5 parameters which go with the jQuery plugin for watermark.js
“className”: the class of the elements which should get a mark. (Optionally) Default: “watermark”
“watermark”: an img element which represents your watermark. (Optionally)
“path”: the path to your watermark image. (Optionally)
“opacity”: opacity percentage, no “%” only the number [0-100] (Optionally) Default: 50
So we create the custom control in our database and under the “Property Definition” section we add our “properties”. Each property is a string except the position which is a combobox with pre-defined parameters.
Property Definition of a Custom Control
formWatermark Property Definitions
Entering custom properties to your custom control
And when we add the custom control to our XPage we are able to fill in the parameters for the control
Adding parameter values to our custom control in the XPage
Accessing the custom properties through the XPage
Accessing the custom properties through the XPage is achieved using compositeData.whateverParameterName. As you can see from the above example though not all the fields need to be filled in – so we need to compute their inclusion on the plugin instantiation.
This is the code used to create the effect. It must be added through and output script in the XPage because we need access to the Server Side variable computation which is not available through a Client Side library.
Watermark these images
Unless otherwise stated in the parameters the watermark.js effect is applied to all images with the class=”watermark”. Here are my images from the database.
XPages ND9 (Dojo 1.8) does not work with other AMD loaders (and the work around)
Tue, May 14th 2013 6:10p Mark Roden Today I took a new jQuery plugin that I was playing with from an R8.5.3 environment where it worked, to an R9 environment and it failed – I figured it had something to do with something I had been reading about over the last month and in fixing my problem this lead to a more serious realization that I KNOW other people are also going to come across.
Background
A brief scan of the last month’s discussions on Xpages and jQuery Mobile 1.3 reveals a number of posts started by Dave Leedy [read] Keywords: domino
ibm
notes
R8
xpages bug
database
dojo
mobile
properties
EXTJS in XPages #9 – Infinite scrolling rebooted and reborn – v4.2 BufferedRenderer
Mon, May 13th 2013 5:29a Mark Roden In this article I will introduce the new EXTJS v4.2 Infinite scroller – the BuffererRenderer. The whole concept of infinite scrolling has been rewritten in the new version of the grid and it had made a huge difference to responsiveness and stability of the infinite grid.
EXTJS in XPages series
Here are links to all of the previous articles in this series
EXTJS in XPages #8 – Selecting data from the grid and opening a document
EXTJS in XPages #7 – Doing an @Unique(@DbColumn) equivalent [read] Keywords: xpages ajax
application
database
javascript
properties
server
xml
206
Shorthand Conditional JavaScript variable checking using ||
Sun, May 5th 2013 6:23p Mark Roden In this article I will highlight a shorthand method of JavaScript conditional variable checking. The || operator is commonly recognized as “OR” but it’s usage is broader than some people would think.
You might have occasion to have a variable declaration purposefully override a desired value. In this example the start will be zero unless the start variable has been declared with and assigned value:
Long Hand
var start
/*..bunch o' code..*/
if (!start){
start = 0
}
[read] Keywords: javascript
JavaScript variable hoisting
Wed, May 1st 2013 8:16p Mark Roden In this article I will give a quick overview of JavaScript hoisting and explain why sometimes your variables are not doing what you expect them to.
In the following example we have a very simple variable declaration and function:
var msg = "hello world"
function sayHi(){
alert(msg)
}
sayHi()
If you run this through firebug you get the expected message in the browser
However if you change the code slightly you do not get the initially expected response. When you run the following code [read] Keywords: javascript
479
Make your XPages more maintainable – JavaScript Callback functions
Sun, Apr 28th 2013 6:39p Mark Roden In this article I will attempt to explain the purpose and benefits of using callback functions in JavaScript.
Introduction
Basic JavaScript functions look like this normally like this
function addMe(a, b){
return a+ b
}
JavaScript variables normally look like this
var a = 2
var b = 3
Finally we would call the function to add the variables
var theTotal = addMe(a, b)
//5
Seems simple enough
Setting a variable to a function
But we can also combine them into something like this
va [read] Keywords: xpages ajax
application
development
dojo
javascript
254
Webcast: jQuery The World’s Most Popular JavaScript Library Comes to XPages – now on YouTube
Fri, Apr 26th 2013 7:39a Mark Roden It was an absolute pleasure to do my jQuery in XPages presentation for the 3rd time (publicly) earlier this week and it was as part of the TLCC and Teamstudio webcast series highlighting some of the people and presentations from the community.
There were 430 people registered for the webcast and at its peak there were over 300 people watching.
As with each presentation, podcast and screencast I have had the privilege of being a part of, I am humbled by knowing that I am able to help other develo [read] Keywords: xpages community
javascript
podcast
173
My first PSC star award – Advise
Sat, Apr 20th 2013 8:21a Mark Roden The company I am very proud to work for, PSC Group, has an excellent internal consultant personal growth program called the “5 points of excellence“.
This program allows consultants to grow and learn in 15 different areas from sales, to estimation, to development and others. PSC runs classes to promote individual areas of personal growth such as a consultant bootcamp, rainmaking seminars, personal image classes and many others. I have never worked for a company with such a focused [read] Keywords: development
