I'm using html2canvas to capture a "screenshot" of the user screen to an html5 canvas element. I'm then using the native canvas.toDataURL() which returns something like this


But of course the whole screenshot is much longer than that. I then use SP Services to save a message and the "image" in a list. All that is working.

Currently I have a plain text column in my list to hold the image data. To actually see the image the admin has to copy the image data and paste it into a browser like chrome or firefox.

This is the part that isn't working

I'd prefer to store the data as an actual img tag. But everytime I try sending the data as an image or putting the image tag into the rich text editor source by hand it doesn't work.

<img src="data:image/gif;base64,R0lGODl...B0UjIQA7" />

SharePoint strips out the src and I end up with.

<img alt="" />

Here are the questions

Rather than canvas, to data, to textfield, is there a better way to take a screenshot and send it to a SharePoint list?

How can I store a visual version of the image for my admin to review?

1 Answer 1


Easiest option is to use a calculated field.

  1. Let the actual data get stored in a field
  2. Create a calculated field to form the img tag
  • Good idea, and I had thought of that, but I didn't see my data uri field as a choice for the calculation. I think it is because it is a multiline textfield. The data uris are over 255 characters so I can't use single line of text.
    – Rothrock
    May 26, 2016 at 14:54
  • Another option is to use workflow for creating the calculated value. May 26, 2016 at 15:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.