How to obscure data in a screen captured image?

Question

Many people I work with need to share a report with sensitive data. This is usually a multistep process where the user takes a screenshot of a chart or graph with numbers and then manually removes, crosses out, blurs any sensitive information while leaving the number values which are usually anonymous and communicates the problem at a high level without exposing sensitive data.

Is there some way to help many users doing this multiple times per day without stepping on their toes?

I am currently leaning towards adding a toggle button that allows users to show/hide all non-numerical data and not even deal with trying to give them multiple options to export charts.

Any other ideas?

Answer 1

I assume there are IMHO two possible tools to develop to make your users' life easier. Note that in both cases, it would probably make you work more with your users, to fit as close as possible to their needs.

1. Develop a feature that would format those sensitive data while exported : this means that the report has to be modified, identifying each column to hide the values, for applying CSS or whatever in case of export activation and obviously amend the export feature to take in account those data to blur/hide.

and

2. Develop a new share option that would export/share the report ready to be sent without sensitive data (thanks to the tool as previously suggested in part 1.)

This way, users won't be annoyed by working on hidding or blurring data on reports and could both export them by raw or sensitive modes.

Answer 2

If you are working on a website, capturing the key they press with JS and then modifying the appearance of the "sensitive data" with CSS can help.

It could be done with these steps:

1. Create a CSS class like .hidden then add color: transparent; and put an ID on all sensible elements.
2. Capture the key they press to make a screenshot. Capture it on a event handler.
3. Inside the event handler put on all elements with a specific ID the class .hidden then make a setTimeOut function to remove the class after a second so you can see the elements again.

Doing it this way makes it simple to your users because you don't have to implement a share button and build a sophisticated app to save your captured image with blurs. Just pressing the key will save the image with the sensitive data hidden. Few process and fast.