Image mosaic/blur processing tool (for hiding face/personal information) | ZeroTools

The image mosaic and blur processing tool expands user-uploaded image data (supporting up to 30MiB per image input) onto the browser's canvas element for processing.

To reduce system resource consumption and achieve smooth rendering on the browser, images are automatically scaled down to maintain a maximum size of 800 pixels in width and 500 pixels in height.

If the original image resolution exceeds this limit, a reduction process (scaling) is applied while maintaining the aspect ratio.

Therefore, even if a high-resolution photo exceeding several thousand pixels is uploaded, it is internally converted to an edit on a working canvas of 800x500 pixels or less.

This specification suppresses the number of pixels processed even on low-performance devices, though operation is restricted to mouse input only.

Because of this reduction process upon loading, fine details of the high-resolution original image are lost. This tool is not a non-destructive professional editor that preserves the original image's resolution or quality; it simply processes the reduced image expanded on the canvas.

Additionally, since it is reinterpreted as canvas pixel data, there is no guarantee that the original color profile or HDR will be maintained.

Furthermore, the tool provides no anonymity guarantee for processed images, so users should be aware when sharing. Its use is limited to situations where a reduced image size and lack of anonymity guarantees are not issues, such as before posting to casual social media or pasting into materials.

This tool provides two types of effects to obscure images: "blur" (strength 2-35) and "mosaic" (strength 4-30), which can be finely adjusted using sliders.

These effects are generated for the entire image in advance on an off-screen canvas separate from the main canvas, and only the necessary parts are composited onto the main canvas according to the user's mouse operations.

The "blur" effect is implemented using the HTML5 Canvas filter API. The specified value is passed to the Canvas blur() filter, and blurring is performed according to the browser implementation, smoothly blending the boundaries between pixels.

The larger the strength slider, the wider the range of pixels averaged, blurring the outlines of objects as if they were melting.

It is suitable for softening facial expressions to hide them, or diverting attention from specific parts of the background, protecting privacy while retaining the atmosphere of the image.

On the other hand, the "mosaic" effect generates block-like pixelation using a pixel interpolation algorithm that extremely reduces the image once and then enlarges it back to its original size.

By enlarging with image interpolation disabled, square blocks proportional in size to the strength value are formed. Because the color boundaries of the mosaic are clearly divided into blocks, it can also be used to weaken the appearance of characters or numbers, but it does not guarantee that they will become unreadable or irreversible.

To apply the generated blur or mosaic effects to any part of the image, two operating interfaces are provided as tool modes: "Trace (Brush)" and "Range Selection (Rectangle)", relying on mouse input.

The "Trace" mode applies the effect to the path traced freehand. Dragging the mouse continuously generates a circular clipping mask of the specified thickness (brush size 5-80), and processed pixels from the off-screen canvas are applied.

Brush interpolation is implemented to reduce gaps between stamps when moving the mouse at high speeds, which helps in creating a continuous line.

This mode is suitable for applying along facial contours or hiding irregularly shaped objects. The effect is applied in real-time while tracing, allowing intuitive operation.

The "Range Selection" mode creates a rectangular frame by dragging over the image and applies the effect to that entire area at once.

When you press the mouse button and start dragging, a selection frame is displayed. For the rectangular processing, the system waits for the restoration image to finish loading completely before rendering the effect, and only then saves the action to the history stack.

Additionally, old selection frames are excluded from drawing by the generation management system. It is designed for linearly hiding rectangular areas with precision.

The combination of these two modes allows users to select the most appropriate method for their specific masking needs. Trace mode is primarily for organic shapes and quick manual adjustments, while Range Selection provides a structured approach for blocking out specific bounding boxes.

Users should be aware that the actual rendering of the rectangular mode only occurs after the necessary image resources are fully loaded and prepared in the background.

The generation management tracks the sequence of actions to properly separate older frames from the current drawing state, maintaining the visual output based on the chronological sequence of mouse inputs.

In case you apply a mosaic to the wrong place or dislike the blur strength, this tool is equipped with "Undo" and "Redo" functions.

These functions are realized by saving the entire drawing state of the canvas as a Data URL format (image data converted into a string) in the history stack when the user finishes tracing with the brush (releases the mouse) or after completing a rectangle selection where it waits for the image to finish loading before saving to history.

Pressing the "Undo" button calls up the history data from one step prior, clears the canvas, and redraws the past image state. Old frames and previous Undo states are excluded from drawing by generation management, which ignores older completions based on their generation number, though this mechanism does not mean zero failures in all rendering scenarios.

This history management depends entirely on saving the canvas pixel state via Data URLs. It does not retain the raw data of the original image, individual layers, or vector mask information, and there is no auto-save feature.

Tool settings apply only to new processing steps. Therefore, while you can go back in history, partial cancellations like removing only the first mosaic applied are impossible.

Since history data is accumulated as strings in memory, repeating an extremely large number of processing steps will increase the browser's memory usage.

If you want to start completely from scratch, using the "Reset all processing" function will batch-revert to the state immediately after loading the image.

Users must keep in mind that the memory consumption scales with the size of the canvas and the number of steps saved in the stack.

Frequent large-area modifications will push more Data URL strings into the browser memory, which could impact performance on devices with limited RAM.

The undo system evaluates the generation numbers assigned to each completed action, bypassing delayed rendering events that belong to a discarded generation.

This ensures the canvas displays the correct historical state without interference from outdated asynchronous tasks.

Once processing is complete, the image can be downloaded and saved by selecting either PNG or JPEG format as the output format. The Canvas API features are used for the output process, and the pixel data currently drawn on the canvas is encoded into the specified image format.

The PNG format uses lossless compression, resulting in no degradation of image quality after processing, and is suitable for saving images containing transparency information.

The JPEG format uses lossy compression and is selected when you want to reduce the file size. Crucially, because the image output in this tool is a re-export process from the canvas, there is no guarantee regarding the handling of metadata (EXIF data such as shooting date and time, location information, and camera model information) that was included in the original image.

Whether EXIF data is retained or stripped is completely unverified. While much metadata is lost during the canvas drawing process, this tool is not a dedicated tool for completely deleting metadata and wiping traces.

Therefore, it does not guarantee that metadata is completely erased, nor does it guarantee that necessary metadata such as copyright information is preserved.

If strict metadata management is required, the downloaded image must be processed separately with a dedicated checking tool.

The most critical point to note when using the image mosaic and blur processing tool is that this tool does not guarantee the complete anonymization, information hiding, or irreversibility of personal data in any way.

Do not rely solely on this tool for highly confidential or sensitive information. If the mosaic block size is too small or the blur strength is insufficient, there is always a risk that the hidden characters or facial contours could be restored or guessed using image restoration technology or image processing software adjustments.

The processing results of this tool, which rely on simple Canvas scaling or standard filters, do not constitute secure and reliable data destruction.

Therefore, before publishing or transmitting the processed image, it is the user's responsibility to visually confirm the downloaded image with their own eyes and verify whether the information is sufficiently masked and unreadable even when enlarged.

Furthermore, although this tool executes processing in the browser's local environment, it does not guarantee that external communication is completely zero in the usage environment or browser extensions.

Because there is no absolute systemic guarantee regarding the presence or absence of communication or the security of confidentiality, you must assess the security risks of using this tool yourself when handling highly confidential documents or images where leakage would lead directly to serious problems.