Save a drawing response in an image format

[joseluisulloafulgeri]

hello,

For an experiment we want to ask people to draw a line over an image,
We managed to do this in Javascript, and we can recover the trace if the participant download the image (with the trace) and send it to us,

We were wondering if there is any way we can automatically save the image once the participant has responded (for instance in Cognition.run),

Any hints will be appreciated,
best,
José

[becky-gilbert]

Hi @joseluisulloafulgeri, are you using the jsPsych sketchpad plugin for this drawing trial? If so, and if save_final_image is true (the default), then the image will be saved to the plugin's trial data as a base64-encoded string. Then you can just use a base64-to-image decoder to turn the string representation back into an image. There are online converters you can use, or you can do the conversion in a language like R or Python (see links toward the top of the sketchpad plugin docs page). This plugin also has a save_strokes parameter, which will save all of the individual stroke data, in case that's useful.

Or if you're using a custom plugin, then you can try using the toDataURL method to convert the canvas image into a base64 string. Here's the relevant line in the sketchpad plugin, where sketchpad is the canvas element:

jsPsych/packages/plugin-sketchpad/src/index.ts

Line 659 in e5447ce

trial_data.png = this.sketchpad.toDataURL();

Does that help?

[joseluisulloafulgeri]

Thanks a lot Becky! We are actually using the canvas function, but we will explore your suggestion,