Examples

Practical examples of using the WASM Image Processor for:

• Blur (Gaussian and fast)
• Contrast
• Brighten
• Grayscale
• Invert
• Hue Rotate
• Crop
• Resize (custom and square)
• Thumbnail generation

PWA Icon Generator

Create multiple icon sizes for Progressive Web Apps from a single source image:

import { resize_square } from "wasm-image-processor"

async function generatePWAIcons(sourceFile) {
  const sizes = [72, 96, 128, 144, 152, 192, 384, 512]
  const arrayBuffer = await sourceFile.arrayBuffer()
  const sourceBytes = new Uint8Array(arrayBuffer)
  
  const icons = []
  
  for (const size of sizes) {
    try {
      const resizedBytes = resize_square(sourceBytes, size)
      const blob = new Blob([resizedBytes], { type: 'image/png' })
      
      icons.push({
        size: `${size}x${size}`,
        blob: blob,
        filename: `icon-${size}x${size}.png`
      })
    } catch (error) {
      console.error(`Failed to generate ${size}x${size} icon:`, error)
    }
  }
  
  return icons
}

// Usage
const fileInput = document.querySelector('#iconSource')
fileInput.addEventListener('change', async (e) => {
  const file = e.target.files[0]
  // You can also use other functions:
  // const cropped = crop(sourceBytes, 10, 10, 100, 100)
  // const blurred = blur(sourceBytes, 2)
  // const brightened = brighten(sourceBytes, 20)
  // const contrasted = contrast(sourceBytes, 30)
  // const grayscaled = grayscale(sourceBytes)
  // const inverted = invert(sourceBytes)
  // const hueRotated = hue_rotate(sourceBytes, 120)
  // const thumb = thumbnail(sourceBytes, 128)
  if (!file) return
  
  const icons = await generatePWAIcons(file)
  
  // Download all icons
  icons.forEach(icon => {
    const url = URL.createObjectURL(icon.blob)
    const a = document.createElement('a')
    a.href = url
    a.download = icon.filename
    a.click()
    URL.revokeObjectURL(url)
  })
})

Coming Soon

We're working on adding more comprehensive examples including:

• Batch processing multiple files with different operations
• Integration with React/Vue/Angular frameworks
• Error handling patterns and best practices
• Image format detection and conversion workflows
• Progressive loading strategies for large images
• Filter chains combining multiple effects
• Metadata handling for privacy-sensitive applications
• Performance optimization techniques

Check back soon for detailed examples!