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

> Discover PicList's built-in image processing tools for watermarking compressing scaling rotating and format conversion. Effortlessly enhance your images automatically before upload.

- Repository: [Kuingsmile/piclist](https://github.com/kuingsmile/piclist)
- Tags: deep-dive
- Published: 2026-03-05

---

**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`](https://github.com/kuingsmile/piclist/blob/main/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`](https://github.com/kuingsmile/piclist/blob/main/src/renderer/utils/static.ts)

The default state for all image tools is defined in [`src/renderer/utils/static.ts`](https://github.com/kuingsmile/piclist/blob/main/src/renderer/utils/static.ts) through the `DEFAULT_IMAGE_TOOL_CONFIG` object:

```typescript
// 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`](https://github.com/kuingsmile/piclist/blob/main/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`](https://github.com/kuingsmile/piclist/blob/main/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`](https://github.com/kuingsmile/piclist/blob/main/src/main/utils/common.ts)

The actual transformation logic resides in [`src/main/utils/common.ts`](https://github.com/kuingsmile/piclist/blob/main/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:

```typescript
// 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:

```typescript
// 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`](https://github.com/kuingsmile/piclist/blob/main/src/renderer/utils/static.ts) with all tools disabled by default.
- Processing logic is implemented in [`src/main/utils/common.ts`](https://github.com/kuingsmile/piclist/blob/main/src/main/utils/common.ts) using native Electron/Node canvas APIs.
- Settings can be customized per image bed through [`src/renderer/utils/configPaths.ts`](https://github.com/kuingsmile/piclist/blob/main/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`](https://github.com/kuingsmile/piclist/blob/main/README.md) (lines 49-50) and implemented in the [`src/main/utils/common.ts`](https://github.com/kuingsmile/piclist/blob/main/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`](https://github.com/kuingsmile/piclist/blob/main/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`](https://github.com/kuingsmile/piclist/blob/main/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`](https://github.com/kuingsmile/piclist/blob/main/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.