Quick Start

This guide walks you through creating a complete image workflow using FloImg.

Fastest Way: npx (No Install)

Transform images instantly from your terminal:

# Resize for social media
npx @teamflojo/floimg resize hero.png 1200x630 -o og-image.png

# Convert to WebP
npx @teamflojo/floimg convert image.png -o image.webp

# Add a caption or watermark
npx @teamflojo/floimg caption photo.jpg "© 2025 Acme" -o watermarked.jpg

# Also: charts, diagrams, QR codes
npx @teamflojo/floimg qr "https://floimg.com" -o qr.png
npx @teamflojo/floimg chart bar --labels "Q1,Q2,Q3" --values "10,20,30" -o chart.png

See the CLI docs for all available commands.

---

SDK: Use in Code

For integration into your applications, use the FloImg SDK.

Prerequisites

Make sure you have installed floimg.

Step 1: Create a Client

Every floimg workflow starts with a client:

import createClient from '@teamflojo/floimg';

const floimg = createClient();

Step 2: Register Generators

Generators create images. Register the ones you need:

import quickchart from '@teamflojo/floimg-quickchart';
import qr from '@teamflojo/floimg-qr';

floimg.registerGenerator(quickchart());
floimg.registerGenerator(qr());

Step 3: Generate an Image

Use the generate method with a generator name and parameters:

const chart = await floimg.generate({
  generator: 'quickchart',
  params: {
    type: 'bar',
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr'],
      datasets: [{
        label: 'Sales',
        data: [10, 20, 30, 40]
      }]
    }
  }
});

Step 4: Transform the Image

Apply transformations like resize, blur, or format conversion:

const resized = await floimg.transform(chart, {
  op: 'resize',
  params: { width: 800, height: 600 }
});

const blurred = await floimg.transform(resized, {
  op: 'blur',
  params: { sigma: 2 }
});

Step 5: Save the Result

Save to local filesystem or cloud storage:

// Local file
await floimg.save(blurred, './output/chart.png');

// S3 bucket (requires AWS credentials)
await floimg.save(blurred, 's3://my-bucket/charts/monthly.png');

Complete Example

Here’s the full workflow:

import createClient from '@teamflojo/floimg';
import quickchart from '@teamflojo/floimg-quickchart';

async function main() {
  // Initialize
  const floimg = createClient();
  floimg.registerGenerator(quickchart());

  // Generate
  const chart = await floimg.generate({
    generator: 'quickchart',
    params: {
      type: 'bar',
      data: {
        labels: ['Q1', 'Q2', 'Q3', 'Q4'],
        datasets: [{
          label: 'Revenue',
          data: [12000, 19000, 15000, 25000],
          backgroundColor: '#7c3aed'
        }]
      },
      options: {
        plugins: {
          title: { display: true, text: '2024 Revenue' }
        }
      }
    }
  });

  // Transform
  const final = await floimg.transform(chart, {
    op: 'resize',
    params: { width: 800 }
  });

  // Save
  await floimg.save(final, './revenue-chart.png');
  console.log('Chart saved!');
}

main();

Next Steps

• Core Concepts - Understand generators, transforms, and more
• SDK Reference - Full API documentation
• Plugins - Explore all available generators