The example image is low resolution and doesn't show the tools features such as noise, blur, and distortion.
A solution would be a zoomed in version that clearly shows text no longer being visible in bad light conditions.

There has been feedback that the project lacks description of supported file types.
Currently this is images such as jpg, jpeg, png, and gif

This can be added in the html under "Drop or paste here" in small, but readable text.

Currently the wave distort effect has a hard coded distort amount per pixel.
This works well for simple screenshots of designs.

A common use case is saving pages as high resolution images.
The hardcoded effect will therefore be hardly noticeable in those circumstances.

Solution: make the effect scale depending on resolution

The filter where this code is located is called effectDistortWave in filters.js

After feedback there is a demand for testing designs in different environments.
This can be achieved by creating immersive sections with backgrounds, specific lighting, and specific effects on the designs.
Here are some example environments that could be implemented:

The current name bad-light-preview is descriptive, but no longer encompasses the future goal of this project.

The tool is going to include multiple environments and lighting conditions.

In the graphic world this is called mockups, tough I would highly prefer that it did not include mockup in the name (as many non designers may not know what this means).

So here are some ideas for what the name should convey:

• That this is a online tool.
• That it simulates multiple lighting conditions
• That it's for previewing
• That it's for physical print

Doesn't need to include everything ofc. just some general ideas.

Here are some examples: paper-in-situations, preview-environments, view-design-circumstances

Feel free to come up with better suggestions, best one can send PR with the changes in README.md

Designers want to create designs that can be viewed by everybody.
About 8% of males are colorblind (red green being the most prominent).

A option could be added that let's the designer view their designs with a certain color blindness.

Implementation:

• Add a filter that converts RGB pixels to reg/green colorblind version of RGB pixels (sure this has been done before)
• Add a button that toggles the filter on and off

There has been feedback that people are trying to use PDF files with the tool.

Since PDF files are quite common in the graphic design world it would probably also be convenient to add support for this as well.

This would be implemented by getting the first page of a PDF file, converting it into image data that can be handled by the JavaScript, run normally from there on out.

Requirements are:

• small code size to keep the tool quick for slow internet users
• relatively quick processing time, should preferably not take more than 1 second.
• no user interface options, just take the first pdf page

Code is all in one HTML file. Could be split into a style and script file.
There are also some unused CSS classes and JS variables that should be removed.