A very barebones editor that supports clicking on any pixel in a JPEG image to see the 64 DCT coefficients that make up that 8x8 block

Related tags

Image Processing jpeg-sandbox
Overview

JPEG Sandbox

This is a very barebones editor that supports clicking on any pixel in a JPEG image to see the 64 DCT coefficients that make up that 8x8 block. Each individual coefficient can be edited through text. You can also use the slider to zero out coefficients one by one starting with the lowest absolute value (which is what you'd do during compression) or reverse that to see what it would look like to throw away the most important coefficients first.

Live demo: https://jpeg-sandbox.glitch.me/

Edit it on Glitch here: https://glitch.com/edit/#!/jpeg-sandbox

jpeg-sandbox

It also visualizes the coefficients that make up each individual block in order of their weight.

jpeg-sandbox2

I created this to help with explaining how JPEG works for a talk at CodeBar 2022.

Cat picture by Mikhail Vasilyev. Also inspired by the visualization in https://www.jezzamon.com/fourier/.

See also my Unraveling the JPEG article.

Local setup

Run yarn to install dependencies and yarn dev to run. Run the app on localhost:3000.

Comments
  • Random page reload because of connection losses in Firefox

    Random page reload because of connection losses in Firefox

    I get random page reloads because according to the console log some server connection to wss://jpeg-sandbox.glitch.me:3000/ couldn't be established.

    Browser: Mozilla/5.0 (X11; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0

    opened by bastetfurry 5
  • Variable DCT block size

    Variable DCT block size

    JPEG uses 8x8 blocks. But there's no reason we can't apply DCT to bigger sizes.

    It could be cool to make this changeable or just apply DCT on the whole image. Similar to the "full discrete cosine transform" figure in this article: https://parametric.press/issue-01/unraveling-the-jpeg/.

    It's really interesting trying this at a full scale image and then removing most of the low frequency, so we can isolate just the high frequency bits. It leads to some really cool visualizations:

    image
    opened by OmarShehata 0
  • Visualize quantization table compression

    Visualize quantization table compression

    Currently the slider "compresses" the image by zero-ing out DCT components in order of highest weight.

    This is not quite how JPEG works in practice. To apply compression, you divide each component by a specific constant factor. These constants for each component are specified in a quantization table.

    The values in the quantization table are chosen to preserve low-frequency information and discard high-frequency (noise-like) detail as humans are less critical to the loss of information in this area.

    From: http://www.robertstocker.co.uk/jpeg/jpeg_new_10.htm

    So it could be interesting to compare compressing using different quantization tables. Or simply as someone suggested on Twitter: zero-out the components by the zig zag order (highest frequency to lowest) which is generally how the quantization tables are designed.

    opened by OmarShehata 0
  • Slider mode to change DCT coefficients across entire image

    Slider mode to change DCT coefficients across entire image

    This came up on Twitter: https://twitter.com/polprogpl/status/1500847424595763201

    This is super cool, I kinda expected the slider to remove higher order components from the entire image though :D

    This wouldn't be too hard, basically instead of running it for the "chosen block" on the slider here: https://github.com/OmarShehata/jpeg-sandbox/blob/a82958afb00cf697f658c0057fab85e9e07de37d/src/index.js#L111

    You'd want to run it for all blocks. There's an example of how to get all blocks in the image here:

    https://github.com/OmarShehata/jpeg-sandbox/blob/a82958afb00cf697f658c0057fab85e9e07de37d/src/JpegUtils.js#L148

    It would be especially cool hooked up to the mouse wheel (see https://github.com/OmarShehata/jpeg-sandbox/issues/2) so you can drag and drop an image, and then scroll wheel to quantize it/compress it in real time.

    opened by OmarShehata 0
  • Scroll wheel over image

    Scroll wheel over image

    When the mouse is over the image, how hard would it be to hook up the scroll wheel, so that

    1. It switches to the 8x8 block over which the cursor is (same as a click currently)
    2. Updates the value of the slider.
    opened by mbarkhau 1
Owner
Omar Shehata
Omar Shehata
GitHub
Unite Gallery - Responsive jQuery Image and Video Gallery Plugin. Aim to be the best gallery on the web on it's kind. See demo here:

##Unite Gallery - Responsive jQuery Gallery Plugin Product Link: unitegallery.net This gallery has commercial versions for: WordPress , Joomla! , Pres

Max Valiano 531 Oct 24, 2022
Picdit - Photo Editor is a web application created using HTML, CSS, PHP and JavaScript

Picdit - Photo Editor is a web application created using HTML, CSS, PHP and JavaScript with the help VS Code and Microsoft Azure to develop the final project application outcome.

Darin Joshua D 3 Mar 31, 2022
:woman: Library for image processing

Lena.js Tiny library for image processing. Install via NPM npm install lena.js --save Install via yarn yarn add lena.js Run demo yarn demo Demo htt

Davidson Fellipe 558 Dec 28, 2022
Resize image in browser with high quality and high speed

pica - high quality image resize in browser Resize images in browser without pixelation and reasonably fast. Autoselect the best of available technolo

Nodeca 3.2k Dec 27, 2022
jQuery plugin that makes an image erasable (with mouse or touch movements)

jQuery.eraser v0.5.2 a jQuery plugin that makes an image erasable (with mouse or touch movements) This plugin replaces the targeted image by an intera

boblemarin 327 Oct 27, 2022
Nivo Slider - The Most Awesome jQuery Image Slider

Maintainer's Wanted! - Ineterested in contributing regularly to Nivo Slider development? Get in touch Nivo Slider The Nivo Slider is world renowned as

Verti Studio 1.2k Dec 24, 2022
🌅 Content-aware image resizer based on Seam Carving algorithm

Content-aware image resizing might be applied when it comes to changing the image proportions (i.e. reducing the width while keeping the height) and when losing some parts of the image is not desirable.

Oleksii Trekhleb 1.4k Dec 30, 2022
A light wight javascript image viewing plugin with smooth animation and 0 dependence

A light wight javascript image viewing plugin with smooth animation and 0 dependence

null 50 Nov 12, 2022
ASP.NET Core image gallery with Marten, ImageSharp, and HTMX

Image Gallery This sample uses the following core technologies to deliver an image gallery experience: ASP.NET Core Marten ImageSharp.Web HTMX This al

Khalid Abuhakmeh 11 Feb 9, 2022
Get the first frame of a Gif image.

Get the first frame of a Gif image.

lijialiang 3 Apr 8, 2022
An image post-processing code library

WebGPU image filter Preview online 这是一个用来展示 webgpu 在图片处理方面应用的 demo，但由于 webgpu API 还不稳定，本地都需要经常修改 API 才能跟上金丝雀的脚步，所以本项目的效果目前也还不稳定，目前仅供学习交流。

kuake 4 Mar 8, 2022
Doblar - a fully local image converter that runs in your browser

Doblar is a fully local image converter that runs in your browser. Doblar is purely client side: nothing is uploaded to a server or anything like that. All conversions take place in your browser, which means your files never leave your computer.

Armaan A 28 Dec 17, 2022
A simple image diff tool powered by avernakis.

Image Diff English | 简体中文 Introduction This is the tutorial project of Avernakis UI. Tiny, but production ready. Install Use npm as nam! (Node App Man

null 45 Dec 3, 2022
jQuery plugin for 'responsive cropping'. Dynamically crop images to fill available space without cutting out the image's subject. Great for full-screen images.

jQuery plugin for 'responsive cropping'. Dynamically crop images to fill available space without cutting out the image's subject. Great for full-screen images.

Jono Menz 3.2k Dec 30, 2022
⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

⚡️Blitz 12.5k Jan 4, 2023
Very very very powerful, extensible http client for both node.js and browser.

ES-Fetch-API 中文 | English Very very very powerful, extensible http client for both node.js and browser. Why should you use ES-Fetch API? Still using a

null 17 Dec 12, 2022
A Javascript library to export svg charts from the DOM and download them as an SVG file, PDF, or raster image (JPEG, PNG) format. Can be done all in client-side.

svg-exportJS An easy-to-use client-side Javascript library to export SVG graphics from web pages and download them as an SVG file, PDF, or raster imag

null 23 Oct 5, 2022
The UI for staking NFTs on Solana. Cardinal staking UI can be treated as an admin interface for stake pools hosted by cardinal-staking as well as a barebones end-user staking UI

Cardinal Staking UI This repository hosts the UI inteface that powers https://stake.cardinal.so for staking NFTs on Solana. Use this repo to create an

Cardinal 55 Dec 24, 2022
File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.

jQuery File Upload Contents Description Demo Features Security Setup Requirements Mandatory requirements Optional requirements Cross-domain requiremen

Sebastian Tschan 31.1k Dec 28, 2022
The smallest, simplest and fastest JavaScript pixel-level image comparison library

pixelmatch The smallest, simplest and fastest JavaScript pixel-level image comparison library, originally created to compare screenshots in tests. Fea

Mapbox 5.1k Jan 8, 2023