everestpipkin/image-scrubber

A friendly browser-based tool for anonymizing photographs taken at protests

image-scrubber's Issues

interpolatePath check

Working on documentation for the project, I'm not sure what these lines are for - it looks like the rectangles they're drawing are covered up by the circle drawn in these lines. Is that first block of code needed for anything or can it be removed? Thanks!

Need an undo button

Nice project. But it needs undo.

More notes on privacy from HN thread

Absolutely love the work you're doing here! A couple notes (not mine, from this comment on HN - my notes added in italics):

1. The code, for now, runs locally. This is good. To avoid the possibility of the code being tampered with at a later day (for example, it could be modified to send copies of the image to a server), download the webpage and use the saved copy, not the live copy. (Maybe an update to the instructions would be enough for this? Possibly converting to a PWA, though that might be a longer-term solution?)

2. Do not use the blur functionality. For maximum privacy, this should be removed from the app entirely. There are a lot of forensic methods to reverse blur techniques. (Happy to submit a PR tomorrow morning (EST) to remove this option!)

3. Be weary of other things in the photograph that might identify someone: reflections, shadows, so on.

4. Really a subset of 2 and 3, but be aware that blocking out faces is often times not sufficient to anonymise the subject in the photo. Identifying marks like tattoos, or even something as basic as the shoes they are wearing, can be used to identify the target.

I'd be happy to look into these tomorrow morning (EST) and start by removing the blur and organizing the code - would that or something else be useful @everestpipkin ? Let me know and thanks again for the great work!

put note about responsible offline usage

Thanks for building a tool that will hopefully help the public hold government forces accountable!

As the deployed version is a public website, it could send your unscrubbed images to a server, exposing people in the photos as well as your IP, browser fingerprint, etc.

• We should use a Content-Security-Policy of default-src 'self' (and probably a few more directives) to limit the attack surface for creepy middleware (like misbehaving antivirus systems, browser extensions, router-based spyware, etc).
• We should explain people that this is a website, and that they should download it to their computer (what about the phone?) and use it offline. This does not prevent all possible ways data could leak (e.g. service workers uploading later), but it's a first step.
• We should link to trustworthy tools, especially mobile apps, for doing this offline.

Add hover states and larger hitboxes

After using this a bunch in testing, I find myself having to search a bit for the Open and Save buttons, so I'd like to add some larger hitboxes for those to make the flow a little easier. I'll also add some hover states to help accessibility on desktop. Notes welcome once those are PR-ready, or please do let me know if someone is working on this already! 😄

face detection to speed up blur/paint process?

face-api would be quite easy to implement and it worked quite well on images of crowds (I used the SSD Mobilenet model with a minimum confidence of ~0.2). Once the detection function has been run over the image, you could just fill each bounding box (identified face area) with a blur or painted colour?

face-api does use the tensorflow-js library but from a quick analysis of the demo site it seems to be serving all the js code and the models from the github page, I'm not a privacy/security expert so up to you I guess!

There is also a nice little library called picojs which detects faces reasonably well in ~200 lines of pure javascript. I can submit a PR using either of these libraries, just let me know!

Brush smoothing

Current behavior

Currently, the circular brush used for both painting and blurring seems to be disjointed, making fast strokes across the canvas discontinuous and leaving gaps that may leave sensitive information visible.

Suggested behavior

If possible, smoothing out the brush by repeating it more frequently as the user draws could help mitigate this.

Video support possibility?

Considering the fact that video has become the best way for individuals to easily document dangerous situations (not having to focus on a subject, audio helps accountability, etc) and the fact that video is the majority of non-professional content emerging from these public spaces, has anyone considered trying to apply the existing processes to video?

I know images are the basis for video, so getting the image-processing tools ironed out is definitely a must.

I have a very basic understanding of image processing myself, so please chime in if I'm missing something that makes video unfeasible; but something tells me that there must be a way to track faces (either using ML, or gesture interactions) across the timeline of a video and maintain blur by blurring each frame according to where a face is at during that frame.

Thoughts?

Brush size cursor not visible halfway thru slider

First off, thank you so much for making this tool! I'm interested in helping out however I can, and am currently using the application to figure out how it works.

---

The brush size slider cursor seems to disappear after halfway thru the slider. This doesn't affect functionality, but visually I was thrown off when the circular cursor didn't appear because it appears for smaller brush sizes.

I wasn't able to take a screenshot with the cursor visible, but here's about where I last see the cursor before it disappears:

And when it's here (or further right) the cursor no longer appears:

---

This affects Firefox and Chrome browsers (Safari is unaffected by this, though it does have seemingly smaller brush sizes compared to the other browsers).

Brush size preview

Current behavior

When resizing the brush, especially for mobile users who can't hover over the canvas to check, it can be difficult to tell how large the brush is going to be before drawing.

Suggested behavior

A cursor preview box in the top toolbar could be helpful for knowing how large the brush is going to be, relative to the size of the image.

Usability notes

(Split into a separate issue from #7 to keep that one on-topic!) A couple usability notes I'm seeing as I get more acquainted with the app:

• I find myself trying to drag and drop an image directly onto the window, like adding an attachment in gmail - this would be a handy feature!
• I also find myself ctrl/cmd-Z-ing and expecting the last edit I made to be removed completely - the undo brush is very handy for trimming but sometimes I want to start over all the way.

I'd be happy to take on either or both of these in the next few days - let me know what you prefer and thanks again for the work!

Some mobile browsers creating (new, non-identifiable) exif data on export to jpeg

On iOS devices and in Safari, canvas.toBlob() function creates an image with new generated exif data describing its resolution, colorspace, compression, etc. It is nothing from the original photo, but it would display information on reload into the tool and might lead some people to believe the data had not been removed. We were originally using toDataUrl() but switched to toBlob() for a big performance boost. (Thank you @SaFrMo for the tip on this exif data behavior).

This is currently fixed by changing export filetype to png instead of jpeg, but pngs makes a much larger filesize and this should probably not be the long-term solution.

Absolutely critical mobile issue re: security layer

Just found that the pixelization and shuffling layer is not running on my phone, but runs perfectly in browser or emulated mobile environment. Currently my phone (iphone 6) is only blurring, which while not a simple blur is not enough to guarantee anyone's safety. I'm going to try to backtrack in the code to see when this broke, so may see a series of quick commits - no need to merge into your branches. If anyone has any ideas or can test on their own devices please let me know.

Crop, scale.

I'd love to be able to crop & scale photos. With this, I would finally have a way to take photos I take on my phone & to make them ready to post: free of EXIF data, cropped to the desired area, & scaled to an appropriate size to post.

Thanks for the great tool. I know feature requests like this risk bloating this into becoming a full sized photo editing app, but it's been so liberating not having to wait to get home to clean up EXIF data & share my day with people. With crop & scale I could get most of the remaining 20% of times I still have to wait to get home & edit first.

Inconsistent and Bad Style Practices

There should be a linter to help some style issues. Splitting JS into separate modules wouldn’t hurt either.

Add a homescreen icon for iOS

This webapp makes a great addition to your home screen on iOS - and if it had a apple-touch-icon set up then it would look like a "real" app, too!

Here's a tutorial for it; it's pretty straightforward: http://blog.karlribas.com/2012/05/how-to-create-apple-touch-icon-for-your.html

Extended phone support

It might also be worth the effort to quickly port over some of the code to react-native or any other js cross-platform framework, especially considering most people using this would be doing so on their phones.

Let me know what you think and I could whip something up quickly!

Save Image doesn't work when added to homescreen

On an iPhone 6 at least, save image no longer generates a file when used in offline mode / from 'homescreen'. It does still work if the phone is placed in airplane mode after loading the page in the browser. Something about redirecting the page to an image maybe? Would someone with mobile experience have any ideas on this?

Input stops after cursor leaves canvas

Bug

While drawing, if the cursor leaves the bounds of the image while the mouse button is held down the input is stopped, and the mouse button must be released and re-pressed in the canvas to resume drawing.

Steps to reproduce

1. Hold down the mouse button in the image bounds with a brush selected.
2. Keeping the mouse button held, move the cursor out of the image bounds.
3. Attempt to re-enter the image bounds with the cursor.

Expected result

The brush will still be active when the cursor re-enters the canvas.

Actual result

The brush is no longer active and the mouse button must be re-pressed.

Additional details

This only seems to happen in a desktop browser. The same issue does not occur when tested on mobile.

Flip image

Current behavior

The image can currently be rotated in 90 degree increments, but it cannot be flipped.

Suggested behavior

I think it's likely users would want to flip images if they can rotate them as well. Having button(s) to do so horizontally and/or vertically could be useful.

Rotating blurs image

It appears that rotating an image blurs it.

Open an image, click the rotate button 40 times, and compare it to the original image.

I guess this shouldn't happen.

Black brush hard to see on dark/black background

Cool little tool :-)

I just noticed that the black brush is rather hard (or even impossible!) to see on a black background. Perhaps using something like a white outline or changing colours depending on the background colour might be better?

Here's the image I used for testing (just something I happened to have in my ~/, heh): https://user-images.githubusercontent.com/1032692/83760969-40cb4000-a6a8-11ea-9037-485eb218fe48.jpg

(perhaps not entirely the intended use case for this, but I thought it would be worth making a quick report about it nonetheless).

No zoom control

It would be helpful in some cases to be able to zoom in on a photo -- for more precise selection of where to blur, for example, or to check whether a high-res photo contains sensitive info in a small area.

Currently:

• in desktop chrome, browser zoom (e.g. by Ctrl-+) scales the input buttons & sliders, but the image stays at screen size
• on Android chrome, zoom by pinching fingers works, but will accidentally apply the brush if you don't place your fingers very carefully. It's also then hard-to-impossible to pan over the image.

I think it would be most helpful to add an extra UI control at the top for zoom level, and have scroll bars for panning across the image when zoomed in. If there's interest in that, I can look into adding it tonight.