Add Signature Form Element as Image into Email Content

Introduction

Integrating signature form elements into your email content can enhance communication by displaying user signatures as images. This process involves converting signature data into an image format that can be embedded in email messages.

How does it work?

Start by creating an environment variable to store the code necessary for generating an image from signature data. This code converts signature data into a base64-encoded image format suitable for email embedding.
Set the dimensions of the signature image, which in this example are defined as 200 pixels wide and 80 pixels high.

Use the following Java code to generate and encode the image in base64 format. Create an environment variable with the ID generateImage and paste this code as its value.

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.image.BufferedImage;
import org.json.JSONArray;
import org.json.JSONObject;
import javax.imageio.ImageIO;
import java.net.URLDecoder;
import java.util.Base64;
  
//Here defines the signature image size
int width = 200;
int height = 80;
  
try {
    String jsonstr = URLDecoder.decode(json[0], "UTF-8");
    JSONArray jarr = new JSONArray(jsonstr);
    BufferedImage offscreenImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
    Graphics2D g2 = offscreenImage.createGraphics();
    g2.setColor(Color.white);
    g2.fillRect(0,0,width,height);
    g2.setPaint(Color.black);
    g2.setStroke(new BasicStroke(2));
    g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
    for (int i = 0; i < jarr.length(); i++) {
        JSONObject jobj = jarr.get(i);
        g2.drawLine(jobj.getInt("lx"), jobj.getInt("ly"), jobj.getInt("mx"), jobj.getInt("my"));
    }
  
    ByteArrayOutputStream baos = new ByteArrayOutputStream();
    ImageIO.setUseCache(false);
    ImageIO.write( offscreenImage, "png", baos );
    baos.flush();
    byte[] imageInByte = baos.toByteArray();
    baos.close();   
    String base64bytes = Base64.getEncoder().encodeToString(imageInByte);
    String src = "data:image/png;base64," + base64bytes;
  
    return src;
} catch (Exception e) { }

The provided Java code reads signature data from a JSON string, renders it onto an image, and then encodes the image as a base64 string. This string is used as the source in an <img> tag within email content.
Incorporate the environment variable into your email content using Bean Shell Hash Variable to display the signature image.
```
<img src="#beanshell.generateImage[json={form.table1.field1?url}]#" />
```

Introduction

How does it work?

Related documentation