Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/betterspacx/app/llms.txt

Use this file to discover all available pages before exploring further.

The /api/export route offloads image compression to the server using Sharp. Most Betterflow exports happen entirely in the browser (the canvas is composited with html2canvas and Konva, then converted to a Blob), but the browser’s canvas.toBlob('image/jpeg') encoder cannot match the compression efficiency of native libraries. By sending the raw PNG canvas output to this route, the editor can produce:
  • JPEG via MozJPEG — typically 10–15 % smaller than browser JPEG at the same quality setting
  • WebP via libwebp — consistently smaller than browser WebP
  • PNG via zlib with adaptive filtering — optimal lossless compression
The route accepts multipart/form-data so the raw image binary never needs to be base64-encoded for transit.

​
Endpoint

PropertyValue
MethodPOST
Path/api/export
Content-Typemultipart/form-data

​
Request Body (Form Fields)

​
image
File
required
The raw image file to compress. Typically the PNG output of the client-side compositing pipeline. Any format readable by Sharp is accepted as input.
​
format
string
required
Output format. Must be one of "png", "jpeg", or "webp".
​
qualityPreset
string
required
Quality level. Must be one of "high", "medium", or "low". See the quality table below for the numeric settings each preset maps to.

​
Quality Presets

PresetJPEG qualityPNG compressionWebP quality
high85682
medium75972
low60955
PNG compression levels follow zlib conventions (0 = no compression, 9 = maximum). JPEG and WebP values are percentages (0–100). JPEG output additionally enables the mozjpeg: true encoder flag.
JPEG does not support transparency. When format is "jpeg", the route flattens the alpha channel to a white background before encoding. If your design has transparent regions and you want to preserve them, use "png" or "webp".

​
Response

On success the route returns the compressed image binary directly (not JSON) with:
  • Content-Type set to the appropriate MIME type (image/jpeg, image/webp, or image/png)
  • Content-Length set to the exact byte size of the compressed output

​
Example

curl -X POST https://your-instance.com/api/export \
  -F "image=@canvas-output.png" \
  -F "format=jpeg" \
  -F "qualityPreset=high" \
  --output compressed.jpg
To export as WebP at medium quality: 
curl -X POST https://your-instance.com/api/export \
  -F "image=@canvas-output.png" \
  -F "format=webp" \
  -F "qualityPreset=medium" \
  --output compressed.webp

​
Export Pipeline Context

The full client-side export pipeline that feeds into this route runs as follows:
  1. Background — captured with html2canvas from the CSS-rendered background element
  2. Konva stage — the user image exported at high pixel ratio
  3. Overlays — text and image overlays captured with html2canvas in a temporary DOM container
  4. Compositing — all three layers merged onto a single <canvas>, watermark added
  5. Server compression — the composited PNG is POSTed to /api/export, and the compressed binary is saved via IndexedDB and triggered as a browser download

​
Error Responses

StatusDescription
400 Bad Requestimage file is missing. Returns { "error": "Missing image file" }.
400 Bad Requestformat is not "png", "jpeg", or "webp". Returns { "error": "Invalid format. Must be \"png\", \"jpeg\", or \"webp\"" }.
400 Bad RequestqualityPreset is not "high", "medium", or "low". Returns { "error": "Invalid qualityPreset. Must be \"high\", \"medium\", or \"low\"" }.
500 Internal Server ErrorSharp processing failed. Returns { "error": "<Sharp error message>" }.

Build docs developers (and LLMs) love

Get started for freeTalk to us