Overview
Introduction
This tool shears (skews) a JPEG by an angle on the X and/or Y axis entirely in your browser, expanding the canvas so the full sheared shape is visible.
Because JPEG can't have transparent pixels, the parallelogram-shaped gaps left by the shear are filled with a clean white matte.
What Is JPEG Skewer?
A client-side JPEG shear tool that reads an uploaded image's pixel data and applies a linear shear transform, sliding each row (or column) sideways by an amount proportional to its distance from center.
It supports independent horizontal and vertical shear angles, which can be combined for more complex slant effects.
How JPEG Skewer Works
The tool first computes the sheared parallelogram's bounding box from the four corner points, sizing the output canvas to fit it entirely, then for every output pixel works backward through the inverse shear transform to find the corresponding source pixel.
Pixels that map outside the source image's bounds are left blank in the pixel buffer and get flattened onto a white matte by the shared preview panel before you see or download the result.
When To Use JPEG Skewer
Use it for a stylized, slanted design effect, to correct perspective-style distortion in a scanned document, or to create a dynamic angled look for a banner or graphic.
It pairs well with the rotator or swirler tools for combined geometric distortion effects.
Often used alongside PNG Skewer, JPG Rotator and JPG Swirler.
Features
Advantages
- Supports independent horizontal and vertical shear angles for flexible distortion.
- Expands the canvas automatically so no part of the sheared image is cropped away.
- Runs entirely client-side; nothing is uploaded to a server.
Limitations
- Nearest-neighbor sampling can introduce slight jagged edges, especially at larger shear angles.
- Angles at or beyond 90 degrees on either axis are mathematically undefined for this transform and are rejected.
Examples
Best Practices & Notes
Best Practices
- Start with a small angle (10-20°) to see the effect before pushing toward more extreme distortion.
- Crop away the white-matte edges afterward with the cropper tool if you want a clean rectangular result.
Developer Notes
skewJpg mirrors the equivalent PNG-category skewer's inverse shear-mapping math exactly, just against the jpg PixelBuffer/JpgToolResult types; it leaves exposed pixels at alpha 0 rather than pre-filling white, since JpgPreviewPanel already flattens onto a white matte at render/download time.
JPEG Skewer Use Cases
- Creating a stylized slanted design graphic
- Correcting mild perspective distortion in a scanned document
- Combining with rotation or swirl for a more complex distortion effect
Common Mistakes
- Entering an angle at or above 90 degrees and hitting a validation error, since the shear math becomes degenerate there.
- Expecting a transparent border around the sheared shape: JPEG output always fills exposed areas with a solid white matte instead.
Tips
- Keep angles modest (under 30°) for a subtle, readable effect; very large angles can make the image hard to recognize.
- Try combining a small X and Y skew together for a more three-dimensional-looking slant.