Convert Images to Pixel Art with JS Dithering & Custom Palettes – Image-to-Pixel

Image-to-Pixel is a JavaScript-powered online editor that converts regular images into retro-style pixel art with dithering algorithms and custom palette management.

Features:

• Multiple Dithering Algorithms: Includes Floyd-Steinberg, 2×2 Bayer, 4×4 Bayer, Ordered, Clustered 4×4, and Atkinson dithering methods.
• Custom Palette Support: Import palettes from Lospec API or create custom color schemes with JSON export functionality.
• Resolution Control: Export at original image resolution or true pixel art dimensions.
• Real-time Processing: Auto-refresh toggle provides instant feedback during parameter adjustments.
• Canvas Support: Works with HTML canvas elements, p5.js images, and standard image objects.
• Performance Optimization: Handles large images efficiently with optimized processing algorithms.

How to use it:

1. Download the package and place the ‘image-to-pixel.js’ script at the end of the document.

<script src="image-to-pixel.js"></script>

2. Call the pixelate function with an options object. It accepts an image source, which can be a canvas element, an HTML image, or a p5.js image object. Here’s a basic example:

const ditheredCanvas = await pixelate({
  image: myImage,
  // options here
});
// Now you can append the new canvas to your document
document.body.appendChild(ditheredCanvas);

3. Available configuration options to control the conversion process:

• width: Sets the pixel art width in pixels. The library automatically calculates height to maintain aspect ratio.
• dither: Specifies the dithering algorithm. Options include ‘Floyd-Steinberg’, ‘Ordered’, ‘2×2 Bayer’, ‘4×4 Bayer’, ‘Clustered 4×4’, and ‘atkinson’.
• strength: Controls dithering intensity from 0 to 100. Higher values create more pronounced dithering effects.
• palette: Defines the color palette. Can be an array of hex colors, a Lospec palette slug, or null to use original image colors.
• resolution: Determines output size. Use ‘original’ for full resolution or ‘pixel’ for actual pixel art dimensions.

const ditheredCanvas = await pixelate({
  image: myImage,
  width: 256, 
  dither: 'Floyd-Steinberg', 
  strength: 0, 
  palette: [ 
    '#ffffff', '#eeeeee', '#dddddd',
    '#111111', '#222222', '#333333',
    '#999999', '#888888', '#666666',
  ],
  resolution: 'original'
});

FAQs

Q: Which dithering algorithm produces the best results?
A: Floyd-Steinberg typically provides the smoothest gradients and works well for photographs. Bayer methods create more structured patterns that work better for illustrations. We recommend experimenting with different algorithms based on your specific image content.

Q: Can I process multiple images simultaneously?
A: The pixelate function processes one image at a time and returns a Promise. For batch processing, you’ll need to handle multiple function calls with proper async/await patterns or Promise management.

Q: Does the library work with video frames?
A: Image-to-Pixel works with static images and canvas elements. For video processing, you would need to extract individual frames to canvas elements and process them separately.

Related Resources:

• Transform Images into Low-Poly Art with Pure JavaScript – Image-to-Triangle