Skip to content

Add an image watermark automatically

To add an image watermark to uploaded images automatically you can use the following (update the URL to point to a media library image on your server and adjust the width/height to suit).

// Add image watermark to saved image.
gform.addFilter('image_hopper_filepond_config', function (config, FilePond, $form, currentPage, formId, fieldId, entryId, files, inputField) {
  config.imageEditor.imageWriter[1].postprocessImageData = (imageData) =>
    new Promise((resolve, reject) => {
      // Create a canvas element to handle the imageData
      const canvas = document.createElement('canvas')
      canvas.width = imageData.width
      canvas.height = imageData.height
      const ctx = canvas.getContext('2d')
      ctx.putImageData(imageData, 0, 0)

      // Draw our watermark on top
      const watermark = new Image()
      watermark.onload = () => {
        // how to draw the image to the canvas
        ctx.globalCompositeOperation = 'screen'

        // draw the watermark in the bottom right corner
        ctx.drawImage(
          watermark,

          // the watermark x and y position
          imageData.width - 100 - 20,
          imageData.height - 40 - 20,

          // the watermark width and height
          100,
          40
        )

        // Get and return the modified imageData
        resolve(
          ctx.getImageData(
            0,
            0,
            imageData.width,
            imageData.height
          )
        )
      }
      watermark.onerror = reject
      watermark.crossOrigin = 'Anonymous'
      watermark.src = 'https://imagehopper.tech/image/watermark.png'
    })

  return config
}, 20)