jimp-dev / jimp-dev/jimp

Plugin: Skew

Open
#627 8 comments 4 reactions 0 assignees View on GitHub
plugin-candidate
Dominant language
TypeScript
Stars
14.7k
Forks
777
PR merge metrics
No merged PRs in 30d

Description

**Is your feature request related to a problem? Please describe.**
Per many mathematical [references describing a standard x-skew](https://www.w3.org/TR/SVG11/coords.html#EstablishingANewUserSpace), I had hoped that applying a standard matrix for this would result in a skewed image. Attempting to apply a skew transformation like this is really not resulting in anything close to what I'm attempting to achieve.

![matrixskewx](https://user-images.githubusercontent.com/15971213/45923195-0a2da180-be94-11e8-976c-97547437e1af.png)

I am dutifully converting an input angle like 30 into radians first before then applying a `Math.tan(30 * Math.PI / 180)` in this section of the matrix.

**Describe the solution you'd like**
I am attempting to adjust a webcam image of a forward-facing camera on a remote control car so that lanes on a straight road (in their lines-of-perspective to infinity) are now vertical in the resulting transformed image. A rectangular image should then be transformed into an isosceles trapezoid.

(Opposite of this, of course...)
![screen shot 2018-09-22 at 6 28 46 pm](https://user-images.githubusercontent.com/15971213/45923240-60e7ab00-be95-11e8-8595-823ede305902.png)

This first attempt is to change a rectangle into a parallelogram with an x-skew.

![screen shot 2018-09-22 at 6 29 45 pm](https://user-images.githubusercontent.com/15971213/45923242-85dc1e00-be95-11e8-884d-126a72b0fe3f.png)

![skewexamples](https://user-images.githubusercontent.com/15971213/45923200-23365280-be94-11e8-9e7f-e1197fca9074.png)

**Describe alternatives you've considered**
```
function tanDeg(deg) {return Math.tan(deg * Math.PI/180);}
//var lambda = tanDeg(config.xSkew);
var lambda = tanDeg(90 - config.xSkew);
// exports.perspectiveSkew = [
// [1, 0, 0, lambda, 0],
// [0, 1, 0, 0, 0],
// [0, 0, 1, 0, 0],
// [0, 0, 0, 1, 0],
// [0, 0, 0, 0, 1]
// ];
exports.perspectiveSkew = [
[1, lambda, 0],
[0, 1, 0],
[0, 0, 1]
];
```

**Additional context**
Here's an example of what results from attempting to apply the x-skew matrix:

![screen shot 2018-09-22 at 6 31 37 pm](https://user-images.githubusercontent.com/15971213/45923251-d8b5d580-be95-11e8-9f05-e95e095bfed5.png)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.