Image Management

2 min read

PinePaper’s ImageToolsManager provides comprehensive image handling capabilities.

⚠️ Important Limitation: Images are stored in memory only and cannot be persisted between sessions. Due to browser localStorage limits (~5MB), uploaded images will be lost when you close the browser. Always export your work before closing.

Need cloud storage? If you need persistent image storage, project saving, or collaboration features, request this feature. We’re considering cloud storage options based on user demand.

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();