PicList Built-In Image Processing Tools: Watermark, Compress, Scale, Rotate, and Format Conversion

PicList provides five native image processing utilities—watermark, compress, scale, rotate, and format conversion—that automatically transform images before upload through a configurable pipeline in the renderer process.

PicList is an open-source image upload and management tool that ships with powerful built-in image processing capabilities. These tools allow users to automatically modify images—adding watermarks, reducing file sizes, resizing dimensions, rotating orientation, and converting formats—before they reach any configured image host. According to the kuingsmile/piclist source code, this processing pipeline runs entirely in the renderer process and can be customized per image bed through a straightforward JSON configuration interface.

The Five Built-In Image Processing Tools

PicList's image tool suite consists of five core utilities described in the project's README.md (lines 49-50) and implemented across the renderer and main processes:

• Watermark — Adds textual or image overlays on top of uploaded pictures to protect intellectual property or brand assets.

• Compress — Reduces file size by lowering quality parameters or stripping metadata while attempting to preserve visual fidelity.

• Scale — Resizes images to user-defined width and height values or applies a specific scaling factor to reduce dimensions.

• Rotate — Adjusts image orientation by 90°, 180°, or any custom angle to correct camera rotation metadata or artistic composition.

• Format Conversion — Transcodes images between supported formats such as PNG, JPG, and WEBP to optimize compatibility or compression efficiency.

These tools execute sequentially in a processing pipeline before the file is handed to the uploader module.

Configuration Architecture

The image processing system relies on a three-tier configuration structure defined in the PicList source code.

Default Configuration in src/renderer/utils/static.ts

The default state for all image tools is defined in src/renderer/utils/static.ts through the DEFAULT_IMAGE_TOOL_CONFIG object:

// src/renderer/utils/static.ts – default configuration (excerpt)
export const DEFAULT_IMAGE_TOOL_CONFIG = {
  watermark: false,      // true → add watermark
  compress: false,      // true → compress before upload
  scale: false,         // true → resize before upload
  rotate: false,        // true → rotate before upload
  format: false,        // true → convert format before upload
};

This configuration object serves as the fallback when no user preferences are specified.

Per-Image-Bed Settings in src/renderer/utils/configPaths.ts

User-defined tool settings are persisted per image host (image bed) through the configuration system managed in src/renderer/utils/configPaths.ts. This allows different processing rules for different upload destinations—for example, applying watermarks only to production images while keeping development uploads unmarked.

Processing Implementation in src/main/utils/common.ts

The actual transformation logic resides in src/main/utils/common.ts, which exports helper functions including addWatermark, compressImage, resizeImage, rotateImage, and convertFormat. These utilities leverage native Electron/Node canvas APIs to perform image manipulation before upload.

Implementing the Processing Pipeline

When enabled, the processing pipeline executes asynchronously in the renderer process. The following simplified logic illustrates how PicList chains these operations:

// Internally, the processing pipeline (simplified)
async function processImage(filePath: string, cfg) {
  let img = await loadImage(filePath);       // native Electron/Node canvas
  if (cfg.watermark) img = await addWatermark(img);
  if (cfg.compress)  img = await compressImage(img);
  if (cfg.scale)     img = await resizeImage(img, cfg.scale);
  if (cfg.rotate)    img = await rotateImage(img, cfg.rotate);
  if (cfg.format)    img = await convertFormat(img, cfg.format);
  return await img.toBuffer();
}

This sequential approach ensures each transformation receives the output of the previous operation, allowing complex workflows like compressing after scaling to maximize file size reduction.

Programmatic Configuration Examples

You can configure image processing settings programmatically using the same JSON schema that powers the PicList UI. The following example demonstrates configuring an Imgur image bed with multiple processing options enabled:

// Example: configuring an image bed (e.g., Imgur) via the scripting system
import { setImageToolConfig } from '@piclist/store';

setImageToolConfig('imgur', {
  watermark: true,
  compress: true,
  scale: { width: 1280, height: 720 },
  rotate: 90,
  format: 'webp',
});

This configuration applies a watermark, compresses the result, scales to 720p resolution, rotates 90 degrees, and converts the final output to WEBP format before uploading to Imgur.

Summary

• PicList includes five built-in image processing tools: watermark, compress, scale, rotate, and format conversion.
• Default configurations are defined in src/renderer/utils/static.ts with all tools disabled by default.
• Processing logic is implemented in src/main/utils/common.ts using native Electron/Node canvas APIs.
• Settings can be customized per image bed through src/renderer/utils/configPaths.ts.
• The pipeline runs in the renderer process before upload, applying transformations sequentially.

Frequently Asked Questions

What image processing tools are built into PicList?

PicList ships with five native utilities: watermark (text or image overlay), compress (quality reduction and metadata stripping), scale (dimension resizing), rotate (orientation adjustment), and format conversion (transcoding between PNG, JPG, WEBP, and other supported formats). These tools are documented in the README.md (lines 49-50) and implemented in the src/main/utils/common.ts file.

How do I enable image compression in PicList?

Enable compression by setting the compress property to true in your image bed configuration. You can do this through the PicList Settings → Image Tools panel in the GUI, or programmatically via setImageToolConfig('bed-name', { compress: true }). The compression algorithm in src/main/utils/common.ts reduces file size while attempting to maintain visual fidelity.

Can I apply different processing settings for different image hosts?

Yes. PicList stores image tool configurations per image bed using the system defined in src/renderer/utils/configPaths.ts. This allows you to apply watermarks only to production uploads while keeping development images unprocessed, or compress images differently depending on the destination host's file size limits.

Where are the image transformation functions implemented?

The actual image manipulation functions—including addWatermark, compressImage, resizeImage, rotateImage, and convertFormat—are implemented in src/main/utils/common.ts. These functions interface with native Electron/Node canvas APIs to perform the transformations before the uploader module receives the processed buffer.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}