Skip to content

Add a text watermark automatically

To add a text watermark to uploaded images automatically you can use the following (update the watermarkText const and styles to suit).

// Add text 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
      ctx.font = '40px sans-serif'
      ctx.fillStyle = '#ffffff'
      const watermarkText = 'Image Hopper'
      const textLength = ctx.measureText(watermarkText)
      ctx.fillText(
        watermarkText,
        imageData.width - textLength.width - 30,
        imageData.height - 30
      )

      // Get and return the modified imageData
      resolve(
        ctx.getImageData(
          0,
          0,
          imageData.width,
          imageData.height
        )
      )
    })

  return config
}, 20)