Adding Watermarks to Images

A 2 minute guide on adding watermarks to images with Doka. Using the markup utility we quickly add and position various graphical elements on the source image.

The markup property can be used to supply markup to Doka and add default text, shapes, and images, on top of pictures.

Doka will automatically add this markup to the view. The canSelect property controls wether the user can modify this markup. By setting it to false we prevent the user from editing our watermark while still allowing the user to add their own markup.

Markup can be positioned and scaled using the 'px' values for absolute positions or numbers between 0 and 1 or percentages '0%' to '100%' for positions relative to the image size.

The example code below adds a nice black transparent footer to the image and renders the Doka logo in the bottom right corner.

Doka.create({
    markup: [
        [
            'rect', 
            {
                left: 0,
                right: 0,
                bottom: 0,
                height: '60px',
                backgroundColor: 'rgba(0,0,0,.5)',
                canSelect: false
            },
        ],
        [
            'image', 
            {
                right: '10px',
                bottom: '10px',
                width: '128px',
                height: '34px',
                src: './doka-logo.svg',
                fit: 'contain',
                canSelect: false
            }
        ]
    ]
})