import { domToPng } from '@devxiyang/html2image'

// Convert any element to PNG
const element = document.querySelector('#my-element')
const dataUrl = await domToPng(element)

// Download the image
const link = document.createElement('a')
link.download = 'screenshot.png'
link.href = dataUrl
link.click()

import { domToPng } from '@devxiyang/html2image'

const dataUrl = await domToPng(element, {
  width: 1920,
  height: 1080,
  scale: 2,
  backgroundColor: '#ffffff',
  style: {
    'transform': 'scale(1.5)',
    'transform-origin': 'top left'
  }
})

interface Options {
  // Dimensions
  width?: number
  height?: number
  scale?: number

  // Quality & Format
  quality?: number
  backgroundColor?: string

  // Filtering
  filter?: (node: Element) => boolean

  // Styling
  style?: Record<string, string>

  // Advanced
  cacheBust?: boolean
  imagePlaceholder?: string
  skipAutoScale?: boolean
  debug?: boolean

  // Callbacks
  progress?: (current: number, total: number) => void

  // Web Worker
  workerUrl?: string
  workerNumber?: number
}

import { domToPng } from '@devxiyang/html2image'

// Capture a chart with high DPI
const chart = document.querySelector('#my-chart')
const imageUrl = await domToPng(chart, {
  scale: 2, // 2x resolution for crisp images
  backgroundColor: 'white'
})

import { domToJpeg } from '@devxiyang/html2image'

const element = document.querySelector('#content')
const imageUrl = await domToJpeg(element, {
  quality: 0.95,
  style: {
    'transform': 'scale(0.8)',
    'border': '2px solid #333',
    'border-radius': '8px'
  }
})

import { createContext, destroyContext, domToPng } from '@devxiyang/html2image'

// Create context once for multiple screenshots
const context = await createContext(document.querySelector('#app'), {
  workerUrl: '/html2image-worker.js',
  workerNumber: 2
})

// Take multiple screenshots efficiently
const screenshots = await Promise.all([
  domToPng(context),
  domToPng(context),
  domToPng(context)
])

// Clean up
destroyContext(context)

import { domToPng } from '@devxiyang/html2image'

const imageUrl = await domToPng(element, {
  progress: (current, total) => {
    console.log(`Processing: ${current}/${total} (${Math.round(current / total * 100)}%)`)
  }
})

const options = {
  imagePlaceholder: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+PC9zdmc+'
}

const options = {
  filter: (node) => {
    // Skip elements with 'no-screenshot' class
    return !node.classList?.contains('no-screenshot')
  }
}