Image Management

PinePaper’s ImageToolsManager provides comprehensive image handling capabilities.

Storage: PinePaper uses IndexedDB for project persistence — no practical size limit. Images, scenes, and assets are stored locally on your device via the StorageManager. Data never leaves your browser.

Uploading Images

From File

// From file input
const fileInput = document.getElementById('imageInput');
fileInput.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const entry = await app.imageTools.uploadImage(file);
  console.log('Uploaded:', entry.id, entry.name);
});

From URL

const entry = await app.imageTools.uploadFromURL('https://example.com/image.png');

Options

const entry = await app.imageTools.uploadImage(file, {
  name: 'Custom Name',  // Override filename
  // Additional metadata
});

Image Library

All uploaded images are stored in a library for easy access and reuse.

Get All Images

const library = app.imageTools.getLibrary();
library.forEach(entry => {
  console.log(entry.id, entry.name, entry.width, entry.height);
});

Get Image by ID

const entry = app.imageTools.getImage('img_123');

Delete Image

app.imageTools.deleteImage('img_123');

Placing Images on Canvas

Basic Placement

const raster = await app.imageTools.placeImage('img_123');

With Options

const raster = await app.imageTools.placeImage('img_123', {
  position: [400, 300],      // Canvas position
  scale: 0.5,                // Scale factor
  maxWidth: 500,             // Maximum width
  maxHeight: 400             // Maximum height
});

Events

The ImageToolsManager dispatches events for state changes:

// Image uploaded
window.addEventListener('imageUploaded', (e) => {
  console.log('New image:', e.detail.entry);
});

// Image deleted
window.addEventListener('imageDeleted', (e) => {
  console.log('Deleted:', e.detail.id);
});

Image Entry Structure

{
  id: 'img_123456_abc',      // Unique ID
  dataURL: 'data:image/...',  // Base64 data
  width: 800,                 // Original width
  height: 600,                // Original height
  name: 'photo.jpg',          // Filename
  type: 'image/jpeg',         // MIME type
  size: 123456,               // File size in bytes
  sourceURL: 'https://...',   // If uploaded from URL
  createdAt: 1701234567890,   // Upload timestamp
  thumbnail: 'data:image/...' // Small preview
}

Serialization

Save and restore the image library:

// Save
const data = app.imageTools.serialize();
localStorage.setItem('imageLibrary', JSON.stringify(data));

// Restore
const saved = JSON.parse(localStorage.getItem('imageLibrary'));
app.imageTools.deserialize(saved);

Clear All

app.imageTools.clear();