### Install and Use Sweetcorn with Sharp in JavaScript
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/getting-started.mdx
Install the 'sweetcorn' and 'sharp' packages and then use them to load an image with Sharp, dither it with Sweetcorn, and save the result as a WebP file. This example demonstrates direct usage in a Node.js environment.
```javascript
import sharp from 'sharp';
import sweetcorn from 'sweetcorn';
const inputImage = await sharp('input.png');
const ditheredImage = await sweetcorn(inputImage, {
algorithm: 'floyd-steinberg',
});
ditheredImage.webp({ lossless: true }).toFile('output.webp');
```
--------------------------------
### Install Sweetcorn using npm
Source: https://github.com/delucis/sweetcorn/blob/main/packages/sweetcorn/README.md
This command installs the sweetcorn package using npm. It is a prerequisite for using the sweetcorn library in your Node.js project.
```bash
npm install sweetcorn
```
--------------------------------
### Install Sweetcorn Astro Integration
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/guides/astro.mdx
Installs the Sweetcorn integration for Astro using the package manager's execution command. This is the first step to enable image dithering in Astro projects.
```bash
astro add @sweetcorn/astro
```
--------------------------------
### Sweetcorn Custom Threshold Maps for Dithering
Source: https://context7.com/delucis/sweetcorn/llms.txt
Shows how to define and use custom threshold maps for ordered dithering in Sweetcorn, allowing for unique visual patterns. This example includes a simple checkerboard and a more complex 4x4 pattern. Requires `sharp` and `sweetcorn`.
```javascript
import sharp from 'sweet';
import sweetcorn from 'sweetcorn';
// Simple 2x2 checkerboard pattern
const checkerboard = [
[0, 0.5],
[0.75, 0.25],
];
const image = sharp('input.jpg');
const customDithered = await sweetcorn(image, {
thresholdMap: checkerboard,
});
await customDithered.png().toFile('custom-pattern.png');
// 4x4 custom pattern for more complex textures
const complexPattern = [
[0.0, 0.5, 0.125, 0.625],
[0.75, 0.25, 0.875, 0.375],
[0.1875, 0.6875, 0.0625, 0.5625],
[0.9375, 0.4375, 0.8125, 0.3125],
];
const textured = await sweetcorn(sharp('photo.png'), {
thresholdMap: complexPattern,
preserveColour: true,
});
await textured.webp({ lossless: true }).toFile('textured.webp');
```
--------------------------------
### Install @sweetcorn/astro
Source: https://github.com/delucis/sweetcorn/blob/main/packages/astro/README.md
Installs the `@sweetcorn/astro` package, which integrates Sweetcorn's dithered image generation capabilities into Astro projects. This command uses `npx` to run the Astro add command, ensuring proper setup of the image service within your Astro build.
```bash
npx astro add @sweetcorn/astro
```
--------------------------------
### Install Sweetcorn with npm or yarn
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/guides/node.mdx
Installs the Sweetcorn package and its peer dependency, Sharp, using the appropriate package manager command.
```bash
npm install sweetcorn
# or
yarn add sweetcorn
```
--------------------------------
### Use Low-Level Dithering Processors in Sweetcorn
Source: https://context7.com/delucis/sweetcorn/llms.txt
Access low-level dithering processors directly from Sweetcorn for working with raw pixel buffers. This is useful for custom integrations or performance-critical applications. The examples show how to apply a threshold map and a diffusion kernel to raw pixel data.
```javascript
import sharp from 'sharp';
import { applyThresholdMap, applyDiffusionKernel } from 'sweetcorn/dist/processors.js';
// Process raw pixel data with threshold map
const image = sharp('input.png').greyscale();
const { data: pixels, info } = await image.raw().toBuffer({ resolveWithObject: true });
const bayerMatrix = [
[0, 128],
[192, 64],
];
// Mutates pixels in place
applyThresholdMap(pixels, info, bayerMatrix);
const output = sharp(pixels, { raw: info });
await output.png().toFile('raw-threshold.png');
// Process with diffusion kernel
const image2 = sharp('photo.jpg').greyscale();
const { data: pixels2, info: info2 } = await image2.raw().toBuffer({ resolveWithObject: true });
const kernel = [
[0, 0, 7/16],
[3/16, 5/16, 1/16],
];
applyDiffusionKernel(pixels2, info2, kernel);
const output2 = sharp(pixels2, { raw: info2 });
await output2.png().toFile('raw-diffusion.png');
```
--------------------------------
### Apply Dithering to Astro Image Component
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/guides/astro.mdx
Demonstrates how to apply dithering to an Astro Image component by setting the 'dither' prop. This example uses the 'bayer-8' algorithm.
```astro
---
import { Image } from 'astro:assets';
import exampleImage from './example.jpg';
---
```
--------------------------------
### Create Custom Diffusion Kernels with Sweetcorn
Source: https://context7.com/delucis/sweetcorn/llms.txt
Define custom error diffusion algorithms by creating 2D arrays (kernels) that dictate how quantization error propagates. These kernels must have values that sum to less than or equal to 1. The example demonstrates simple and wide diffusion kernels applied to images using the sharp library.
```javascript
import sharp from 'sharp';
import sweetcorn from 'sweetcorn';
// Simple right-and-down diffusion (50% each direction)
const simpleDiffusion = [
[0, 0.5],
[0.5, 0],
];
const image = sharp('portrait.jpg');
const customDiffused = await sweetcorn(image, {
diffusionKernel: simpleDiffusion,
});
await customDiffused.png().toFile('simple-diffusion.png');
// Custom 3x3 kernel for wider error distribution
const wideDiffusion = [
[0, 0, 0.2],
[0.1, 0.4, 0.1],
[0, 0.2, 0],
];
const wideDithered = await sweetcorn(sharp('landscape.png'), {
diffusionKernel: wideDiffusion,
preserveColour: true,
});
await wideDithered.png().toFile('wide-diffusion.png');
```
--------------------------------
### Dither Image with Color and Alpha Preservation Options
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/guides/astro.mdx
Applies dithering to an Astro Image component using an object for the 'dither' prop, enabling 'preserveColour' and 'preserveAlpha' options. This example uses the 'sierra' algorithm.
```astro
```
--------------------------------
### Define Atkinson Diffusion Kernel (JavaScript)
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/guides/byo-algorithm.mdx
Example of defining the Atkinson diffusion kernel as a 2D array of numbers between 0 and 1. The kernel's structure determines how pixel color values are dispersed during the dithering process. Each row must be the same length, and the current pixel/preceding pixels in the first row must be 0.
```javascript
const atkinson = [
[0, 0, 0.125, 0.125],
[0.125, 0.125, 0.125, 0],
[0, 0.125, 0, 0],
];
```
--------------------------------
### Sweetcorn Core API: Basic Dithering with Sharp
Source: https://context7.com/delucis/sweetcorn/llms.txt
Demonstrates the main `sweetcorn` function for dithering a Sharp image instance. It shows basic Floyd-Steinberg dithering and options for preserving color and alpha channels. Requires `sharp` and `sweetcorn` packages.
```javascript
import sharp from 'sharp';
import sweetcorn from 'sweetcorn';
// Basic Floyd-Steinberg dithering
const inputImage = await sharp('input.png');
const dithered = await sweetcorn(inputImage, {
algorithm: 'floyd-steinberg',
});
await dithered.webp({ lossless: true }).toFile('output.webp');
// Preserve color channels (dither RGB separately)
const colorDithered = await sweetcorn(
sharp('color-photo.jpg'),
{
algorithm: 'atkinson',
preserveColour: true,
}
);
await colorDithered.png().toFile('color-dithered.png');
// Preserve alpha channel transparency
const transparentImage = await sweetcorn(
sharp('transparent.png'),
{
algorithm: 'sierra-lite',
preserveAlpha: true,
}
);
await transparentImage.png().toFile('transparent-dithered.png');
```
--------------------------------
### Apply Dithering with Astro Image Component
Source: https://context7.com/delucis/sweetcorn/llms.txt
Utilize Astro's built-in `Image` component with the `dither` prop to apply dithering algorithms to your images. The integration automatically processes images during the build process, supporting standard algorithms, custom ones defined in the configuration, and options for color preservation and transparency.
```astro
---
import { Image } from 'astro:assets';
import myImage from '../assets/photo.jpg';
import transparentImage from '../assets/transparent.png';
---
```
--------------------------------
### Sweetcorn Ordered Dithering Algorithms (Bayer)
Source: https://context7.com/delucis/sweetcorn/llms.txt
Demonstrates ordered dithering using Bayer matrices of different sizes (2x2, 4x4, 8x8, 16x16) in Sweetcorn. This method creates structured patterns. Requires `sharp` and `sweetcorn`.
```javascript
import sharp from 'sharp';
import sweetcorn from 'sweetcorn';
const image = sharp('input.png');
// Bayer matrices (powers of 2)
const bayer2 = await sweetcorn(image.clone(), { algorithm: 'bayer-2' });
const bayer4 = await sweetcorn(image.clone(), { algorithm: 'bayer-4' });
const bayer8 = await sweetcorn(image.clone(), { algorithm: 'bayer-8' });
const bayer16 = await sweetcorn(image.clone(), { algorithm: 'bayer-16' });
await bayer2.png().toFile('bayer-2.png');
await bayer4.png().toFile('bayer-4.png');
// Other ordered dithering patterns available:
// 'dot-diagonal-8', 'dot-diagonal-16', 'halftone-orthogonal',
// 'halftone-diagonal', 'checker', 'cluster-dot', and more
```
--------------------------------
### Dither an image using Sweetcorn and Sharp in Node.js
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/guides/node.mdx
Demonstrates loading an image with Sharp, applying dithering using Sweetcorn with the 'stucki' algorithm, and processing the result.
```javascript
import sharp from 'sharp';
import sweetcorn from 'sweetcorn';
// Load input.png from the local filesystem
const input = await sharp('input.png');
// Dither the image using the Stucki algorithm
const dithered = await sweetcorn(input, { algorithm: 'stucki' });
```
--------------------------------
### Configure Sweetcorn Astro Integration
Source: https://context7.com/delucis/sweetcorn/llms.txt
Set up Astro's image service to support dithering using the `@sweetcorn/astro` integration. This configuration allows you to define default dithering algorithms and register custom threshold maps and diffusion kernels for use within your Astro project.
```javascript
// astro.config.mjs
import { defineConfig } from 'astro/config';
import sweetcorn from '@sweetcorn/astro';
export default defineConfig({
integrations: [
sweetcorn({
// Apply floyd-steinberg to all images by default
defaultDitherAlgorithm: 'floyd-steinberg',
// Define custom algorithms
customThresholdMaps: {
'my-pattern': [
[0, 0.5],
[0.75, 0.25],
],
},
customDiffusionKernels: {
'my-kernel': [
[0, 0, 0.2],
[0.1, 0.4, 0.1],
[0, 0.2, 0],
],
},
}),
],
});
```
--------------------------------
### Processor Functions - Low-level API
Source: https://context7.com/delucis/sweetcorn/llms.txt
Provides direct access to low-level dithering processors for working with raw pixel buffers, ideal for custom integrations and performance-critical applications.
```APIDOC
## Processor Functions - Low-level API
### Description
Direct access to low-level dithering processors for working with raw pixel buffers. Useful for custom integrations or performance-critical applications.
### Functions
#### applyThresholdMap
Applies a threshold map to raw pixel data.
- **pixels** (Buffer) - The raw pixel data.
- **info** (object) - Image information (width, height, channels).
- **thresholdMap** (Array>) - The threshold map to apply.
#### applyDiffusionKernel
Applies a diffusion kernel to raw pixel data.
- **pixels** (Buffer) - The raw pixel data.
- **info** (object) - Image information (width, height, channels).
- **kernel** (Array>) - The diffusion kernel to apply.
### Request Example
```javascript
import sharp from 'sharp';
import { applyThresholdMap, applyDiffusionKernel } from 'sweetcorn/dist/processors.js';
// Process raw pixel data with threshold map
const image = sharp('input.png').greyscale();
const { data: pixels, info } = await image.raw().toBuffer({ resolveWithObject: true });
const bayerMatrix = [
[0, 128],
[192, 64],
];
// Mutates pixels in place
applyThresholdMap(pixels, info, bayerMatrix);
const output = sharp(pixels, { raw: info });
await output.png().toFile('raw-threshold.png');
// Process with diffusion kernel
const image2 = sharp('photo.jpg').greyscale();
const { data: pixels2, info: info2 } = await image2.raw().toBuffer({ resolveWithObject: true });
const kernel = [
[0, 0, 7/16],
[3/16, 5/16, 1/16],
];
applyDiffusionKernel(pixels2, info2, kernel);
const output2 = sharp(pixels2, { raw: info2 });
await output2.png().toFile('raw-diffusion.png');
```
### Response Example
(Returns processed raw pixel buffers that can be used with sharp)
```
--------------------------------
### Save dithered image as WebP with Sharp
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/guides/node.mdx
Shows how to take the dithered image output from Sweetcorn and save it as a lossless WebP file using Sharp's methods.
```javascript
dithered.webp({ lossless: true }).toFile('output.webp');
```
--------------------------------
### Create Responsive Dithered Images with Astro Picture Component
Source: https://context7.com/delucis/sweetcorn/llms.txt
Employ Astro's `Picture` component to generate responsive images with dithering applied across all `srcset` variants. This component allows for specifying different image widths and sizes, ensuring optimized and dithered images are served across various devices, with support for color preservation.
```astro
---
import { Picture } from 'astro:assets';
import heroImage from '../assets/hero.jpg';
import colorArt from '../assets/color-art.png';
---
```
--------------------------------
### Return dithered image as PNG buffer with Sharp
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/guides/node.mdx
Illustrates converting the dithered image into a PNG buffer, suitable for sending as a server response, using Sharp.
```javascript
const buffer = await dithered.png().toBuffer();
return new Response(buffer);
```
--------------------------------
### Astro Integration API
Source: https://context7.com/delucis/sweetcorn/llms.txt
Integrates Sweetcorn dithering capabilities into Astro's image service, allowing for easy configuration of default algorithms and custom dither settings.
```APIDOC
## Astro Integration API
### sweetcornAstro() - Integration Setup
Configures Astro's image service to support dithering. Accepts configuration for default algorithms and custom threshold maps/diffusion kernels.
### Parameters
#### Options Object
- **defaultDitherAlgorithm** (string) - Optional - The default dithering algorithm to apply (e.g., 'floyd-steinberg').
- **customThresholdMaps** (object) - Optional - An object mapping names to custom threshold maps.
- **customDiffusionKernels** (object) - Optional - An object mapping names to custom diffusion kernels.
### Request Example
```javascript
// astro.config.mjs
import { defineConfig } from 'astro/config';
import sweetcorn from '@sweetcorn/astro';
export default defineConfig({
integrations: [
sweetcorn({
// Apply floyd-steinberg to all images by default
defaultDitherAlgorithm: 'floyd-steinberg',
// Define custom algorithms
customThresholdMaps: {
'my-pattern': [
[0, 0.5],
[0.75, 0.25],
],
},
customDiffusionKernels: {
'my-kernel': [
[0, 0, 0.2],
[0.1, 0.4, 0.1],
[0, 0.2, 0],
],
},
}),
],
});
```
### Image Component - Dithering in Astro
Use Astro's built-in Image component with the `dither` prop to apply dithering algorithms. The integration automatically processes images during build.
### Parameters
#### `dither` Prop
- **algorithm** (string | object) - The dithering algorithm to use. Can be a string name or an object with algorithm details.
- If string: 'floyd-steinberg', 'atkinson', 'sierra-lite', or a custom name defined in config.
- If object: `{ algorithm: string, preserveColour?: boolean, preserveAlpha?: boolean }`
- **false** - Disables dithering for the specific image.
### Request Example
```astro
---
import { Image } from 'astro:assets';
import myImage from '../assets/photo.jpg';
import transparentImage from '../assets/transparent.png';
---
```
### Picture Component - Responsive Dithered Images
Use Astro's Picture component for responsive images with dithering applied across all srcset variants.
### Request Example
```astro
---
import { Picture } from 'astro:assets';
import heroImage from '../assets/hero.jpg';
import colorArt from '../assets/art.png';
---
```
```
--------------------------------
### Custom Diffusion Kernels
Source: https://context7.com/delucis/sweetcorn/llms.txt
Allows creation of custom error diffusion algorithms by defining 2D arrays that control how quantization error propagates. Kernels must have values that sum to less than or equal to 1.
```APIDOC
## Custom Diffusion Kernels
### Description
Create custom error diffusion algorithms by defining how quantization error propagates to neighboring pixels. Kernels are 2D arrays where values sum to \u22641.
### Usage
Pass a `diffusionKernel` option to the `sweetcorn` function.
### Parameters
#### Request Body (Options Object)
- **diffusionKernel** (Array>) - Required - A 2D array representing the diffusion kernel.
- **preserveColour** (boolean) - Optional - Whether to preserve color during dithering.
### Request Example
```javascript
import sharp from 'sharp';
import sweetcorn from 'sweetcorn';
// Simple right-and-down diffusion (50% each direction)
const simpleDiffusion = [
[0, 0.5],
[0.5, 0],
];
const image = sharp('portrait.jpg');
const customDiffused = await sweetcorn(image, {
diffusionKernel: simpleDiffusion,
});
await customDiffused.png().toFile('simple-diffusion.png');
// Custom 3x3 kernel for wider error distribution
const wideDiffusion = [
[0, 0, 0.2],
[0.1, 0.4, 0.1],
[0, 0.2, 0],
];
const wideDithered = await sweetcorn(sharp('landscape.png'), {
diffusionKernel: wideDiffusion,
preserveColour: true,
});
await wideDithered.png().toFile('wide-diffusion.png');
```
### Response Example
(Returns a processed image buffer)
```
--------------------------------
### Configure Sweetcorn Integration in Astro Config
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/guides/astro.mdx
Sets up the Sweetcorn integration within the Astro configuration file (astro.config.mjs). This is where global configurations for the integration are applied.
```javascript
// astro.config.mjs
import { defineConfig } from 'astro/config';
import sweetcorn from '@sweetcorn/astro';
export default defineConfig({
integrations: [
sweetcorn({
// Configuration options here
}),
],
});
```
--------------------------------
### Programmatic Dithering with Preservation Options
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/guides/astro.mdx
Shows how to use Astro's getImage() function to dither an image programmatically, passing an object to the 'dither' property to enable 'preserveColour' and 'preserveAlpha' options with the 'floyd-steinberg' algorithm.
```javascript
const ditheredImage = await getImage({
src: example,
dither: {
algorithm: 'floyd-steinberg',
preserveColour: true,
},
});
```
--------------------------------
### Sweetcorn Error Diffusion Algorithms
Source: https://context7.com/delucis/sweetcorn/llms.txt
Showcases various error diffusion dithering algorithms available in Sweetcorn, including Floyd-Steinberg and Atkinson. These algorithms distribute quantization error to create natural-looking dithered images. Requires `sharp` and `sweetcorn`.
```javascript
import sharp from 'sharp';
import sweetcorn from 'sweetcorn';
const image = sharp('photo.jpg');
// Floyd-Steinberg (most popular)
const floydSteinberg = await sweetcorn(image.clone(), {
algorithm: 'floyd-steinberg'
});
// Atkinson (used in original Macintosh)
const atkinson = await sweetcorn(image.clone(), {
algorithm: 'atkinson'
});
// Other diffusion algorithms
const algorithms = [
'simple-diffusion',
'false-floyd-steinberg',
'jarvis-judice-ninke',
'stucki',
'burkes',
'pigeon',
'sierra',
'sierra-two-row',
'sierra-lite'
];
for (const algo of algorithms) {
const dithered = await sweetcorn(image.clone(), { algorithm: algo });
await dithered.png().toFile(`output-${algo}.png`);
}
```
--------------------------------
### Style Dithered Images with CSS Classes in Astro
Source: https://context7.com/delucis/sweetcorn/llms.txt
This Astro component demonstrates how to apply CSS classes to dithered images for targeted styling. The integration automatically adds classes like 'sw-dithered' and algorithm-specific classes (e.g., 'sw-bayer-4') to dithered images. Styles can be applied globally to all dithered images or specifically to those processed with certain algorithms.
```astro
---
import { Image } from 'astro:assets';
import photo from '../assets/photo.jpg';
---
```
--------------------------------
### Dither Image Programmatically with getImage()
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/guides/astro.mdx
Demonstrates how to programmatically dither an image using Astro's getImage() function with the 'blue-noise' algorithm specified in the options.
```javascript
import { getImage } from 'astro:assets';
import example from './example.png';
const ditheredImage = await getImage({
src: example,
dither: 'blue-noise',
});
```
--------------------------------
### Use Custom Threshold Map with Sweetcorn Node.js API
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/guides/byo-algorithm.mdx
Demonstrates how to apply a custom threshold map using the `sweetcorn()` function in a Node.js environment. The `thresholdMap` option accepts the custom map array.
```javascript
await sweetcorn(image, { thresholdMap: bayer2 });
```
--------------------------------
### Configure Custom Threshold Maps in Astro Sweetcorn Integration
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/guides/byo-algorithm.mdx
Shows how to register custom threshold maps within the Astro Sweetcorn integration configuration. Custom maps are defined in the `customThresholdMaps` option and can be referenced by a chosen name.
```javascript
// astro.config.mjs
export default {
integrations: [
sweetcorn({
customThresholdMaps: {
'my-map': bayer2,
},
}),
],
};
```
--------------------------------
### Reference Custom Kernel in Astro Component (HTML/Astro)
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/guides/byo-algorithm.mdx
Illustrates how to apply a previously defined custom diffusion kernel to an image component within an Astro file. The custom kernel is referenced by its registered name using the `dither` attribute on the `Image` component.
```html
```
--------------------------------
### Use Custom Diffusion Kernel in Node.js (JavaScript)
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/guides/byo-algorithm.mdx
Demonstrates how to pass a custom diffusion kernel to the Sweetcorn function when using the Node.js API. The custom kernel is provided within the options object under the `diffusionKernel` property.
```javascript
await sweetcorn(image, { diffusionKernel: myKernel });
```
--------------------------------
### Configure Custom Diffusion Kernel in Astro (JavaScript)
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/guides/byo-algorithm.mdx
Shows how to define and register custom diffusion kernels when setting up the Sweetcorn integration in an Astro project. Custom kernels are provided in the `customDiffusionKernels` object within the integration options, mapping a name to the kernel definition.
```javascript
// astro.config.mjs
export default {
integrations: [
sweetcorn({
customDiffusionKernels: {
'my-kernel': myKernel,
},
}),
],
};
```
--------------------------------
### Apply Dithering with Image and Picture Components
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/guides/astro.mdx
Shows how to apply different dithering algorithms ('atkinson' and 'stucki') to Astro's Image and Picture components respectively. This allows for varying dither effects on different images.
```astro
---
import { Image, Picture } from 'astro:assets';
import example from './example.jpg';
---
```
--------------------------------
### Define DitheringAlgorithm Type for Astro Components (TypeScript)
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/guides/astro.mdx
Import and use the `DitheringAlgorithm` type from '@sweetcorn/astro' to strongly type components that accept a dither algorithm as a prop. This enhances type safety and developer experience.
```typescript
import type { DitheringAlgorithm } from '@sweetcorn/astro';
```
--------------------------------
### Provide Custom Diffusion Kernels for Dithering (JavaScript)
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/guides/astro.mdx
Supply custom error diffusion kernels for dithering using the `customDiffusionKernels` option in Sweetcorn. Kernels are represented as 2D arrays of diffusion weights. Rows must have consistent lengths.
```javascript
sweetcorn({
customDiffusionKernels: {
// Implements the Floyd-Steinberg kernel:
'custom-kernel': [
[0, 0, 7/16],
[3/16, 5/16, 1/16],
],
},
})
```
--------------------------------
### Style Images by Dithering Algorithm
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/guides/astro.mdx
Targets and styles images based on the specific dithering algorithm used, such as 'Atkinson' or 'Floyd-Steinberg'. This allows for algorithm-specific styling.
```css
.sw-atkinson,
.sw-floyd-steinberg {
/* Styles for images dithered with these algorithms */
}
```
--------------------------------
### Provide Custom Threshold Maps for Dithering (JavaScript)
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/guides/astro.mdx
Define custom threshold maps for dithering by passing a Record to the `customThresholdMaps` option in Sweetcorn. Each map is a 2D array of 8-bit integer threshold values. Rows must have uniform length.
```javascript
sweetcorn({
customThresholdMaps: {
'custom-2x2-map': [
[0, 128],
[192, 64],
],
},
})
```
--------------------------------
### Style All Dithered Images
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/guides/astro.mdx
Applies CSS to all images that have been dithered using the Sweetcorn integration. This provides a global way to style dithered images.
```css
.sw-dithered {
/* Styles for all dithered images */
}
```
--------------------------------
### Set Default Dithering Algorithm in Configuration
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/guides/astro.mdx
Configures the Sweetcorn integration to use a default dithering algorithm ('atkinson') for all images unless explicitly overridden. This simplifies applying a consistent dither effect.
```javascript
sweetcorn({
defaultDitherAlgorithm: 'atkinson',
}),
```
--------------------------------
### Use Custom Diffusion Kernel in Astro Image Component
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/guides/astro.mdx
Apply a custom diffusion kernel to an Astro Image component by referencing the kernel's name in the `dither` prop. This enables customized error diffusion dithering.
```astro
```
--------------------------------
### Component Using DitheringAlgorithm Type (Astro)
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/guides/astro.mdx
An Astro component that utilizes the `DitheringAlgorithm` type to define a prop for specifying the dither algorithm. It renders an Image component with the provided algorithm.
```astro
---
// src/components/DitheredFigure.astro
import type { DitheringAlgorithm } from '@sweetcorn/astro';
import type { ImageMetadata } from 'astro';
import { Image } from 'astro:assets';
interface Props {
algorithm: DitheringAlgorithm;
image: ImageMetadata;
}
const { algorithm, image } = Astro.props;
---
```
--------------------------------
### Use Custom Threshold Map in Astro Image Component
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/guides/astro.mdx
Apply a custom threshold map to an Astro Image component by specifying the map's name in the `dither` prop. This allows for custom dithering effects on images.
```astro
```
--------------------------------
### Define 2x2 Bayer Threshold Map in JavaScript
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/guides/byo-algorithm.mdx
This code defines a 2x2 Bayer threshold map as a two-dimensional array of numbers. This map can be used in Sweetcorn to dither images.
```javascript
const bayer2 = [
[0, 128],
[192, 64],
];
```
--------------------------------
### Scale Dithered Images Up with CSS `image-rendering: pixelated`
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/dithering-on-the-web.mdx
When scaling dithered images up, browsers often smooth them, which can ruin the dithering effect. Using `image-rendering: pixelated;` preserves the sharp details by employing nearest-neighbour scaling. This ensures each pixel remains crisp and clear, enhancing the visual appeal of dithered graphics.
```css
img {
image-rendering: pixelated;
}
```
--------------------------------
### Scale Dithered Images Down with CSS `image-rendering: auto`
Source: https://github.com/delucis/sweetcorn/blob/main/docs/src/content/docs/dithering-on-the-web.mdx
Scaling dithered images down with `image-rendering: pixelated;` can lead to undesirable moiré patterns when the scaling factor is not an exact divisor of the original size. In such cases, reverting to the default `image-rendering: auto;` provides a more predictable and often better result, reducing visual artifacts.
```css
img {
image-rendering: auto;
}
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.