The Story of Building Toon Shark to Automate Webtoon Image Slicing

When creating webtoons, a surprisingly large amount of time goes into image preparation work.

The process of uploading to platforms may seem simple, but it's actually a series of repetitive and tedious tasks. Long images need to be cut to specific standards, re-adjusted to meet different platform requirements, and then exported one by one. This process has nothing to do with the creative work itself, yet it repeats with every episode.

That's why we built Toon Shark — to automate this entire process.

What is Toon Shark?

Toon Shark is an Electron-based desktop tool that automates the image processing workflow for webtoon uploads.

Its key features include:

Automatic slicing of PDF-based webtoons
Image export tailored to platform-specific specifications
Mobile environment preview support

It's a simple tool, but it's focused on reducing the repetitive steps in the actual workflow.

The Core Challenge: Can Panels Be Split Automatically?

Unlike regular images, webtoon images have whitespace between panels. By automatically splitting based on this whitespace, we can reduce the manual cutting process.

Here's the approach:

Scan each horizontal line of the image and calculate the white pixel ratio
Identify sections where the white ratio exceeds a certain threshold for a consecutive height — these are considered panel gaps
Auto-split at the center of each identified gap

The threshold setting is crucial here. Checking only for pure white (255, 255, 255) makes the system vulnerable to subtle noise and compression artifacts. So instead, we treat pixels as white if each RGB channel exceeds a certain value.

However, exposing this threshold as a raw number to users isn't intuitive. Most webtoon artists wouldn't immediately understand what "RGB 240 or above" means. So we presented this value as a slider-based "Loose ↔ Strict" option. Setting it loose means even slight color differences are recognized as whitespace, while strict mode only considers near-perfect white as whitespace. Users can adjust it intuitively by looking at the results, without needing to understand the technical values.

The Unexpectedly Difficult Problem: Minimum Panel Height

The trickiest part was determining the "minimum panel height."

Set it too small → areas consisting only of white margins get incorrectly split as individual panels
Set it too large → actual panel boundaries are missed and panels aren't properly separated

On top of that, since every PDF has different resolutions and image sizes, a fixed value wouldn't work.

Initially, we considered an approach that would automatically estimate based on the ratio to the total image height. But in the end, from a practical standpoint, we concluded that a structure that allows quick review and adjustment is more important than full automation.

So the current approach works as follows:

Automatically split the panels first
Provide a detail page where results can be visually reviewed
Support UI controls for adjusting panel heights during the review process

The combination of image analysis-based auto-splitting + user review UI is the core design philosophy of Toon Shark.

Why We Chose Electron

There were several reasons for choosing Electron as the desktop app framework.

Given the nature of the work — requiring PDF rendering, image processing, and file system access — a web app had its limitations. Since we also needed to provide HTML-based mobile previews, Electron was a natural choice as it allows us to leverage the web technology stack directly. Additionally, being able to manage platform-specific specification data locally and process large PDFs without server round-trips was an important factor.

Results

Since adopting Toon Shark, we've significantly reduced the time spent on repetitive image splitting tasks. Automating platform-specific format handling has reduced errors from manual work, and we can now quickly verify results before uploading.

Ultimately, the goal was simple:

To let creators focus on content, not repetitive tasks.

Closing

Toon Shark is a small tool, but it was built to reduce real friction in the production workflow.

Thanks to Bela for naming it, and to our REALDRAW colleagues for their ideas and support. We plan to keep improving it going forward.

👉 https://tech.realdraw.ai/ToonShark/

Feedback is always welcome.