Plugin: Skew

Is your feature request related to a problem? Please describe. Per many mathematical references describing a standard x-skew, 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.

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…)

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

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:

[OutsourcedGuru]

In PhotoShop, the skew and perspective options are close to this. It’s unlikely to find the source code for what goes on behind-the-scenes in PS, though.

The matrix:

1            tan(xSkew)   0
tan(ySkew    1            0
0            0            1

…is supposed to provide an xSkew and ySkew effect, as provided instead of the default zero that would have been there. My first link above is some documentation for that.

At this point, I’m good. My code above works for me. If you can look into skew and see if it’s something you’d like to offer (and can find an approach that works for you, great. Thanks.

[OutsourcedGuru]

For what it’s worth, I was able to build my own prototype for the Jimp class which seems to fit my own requirements.

The config.js file in question includes xSkew as 30 in this case.

Jimp.prototype.perspective = function(cb) {
  var xSkewInRadians = Math.tan((config.xSkew * Math.PI) / 180);
  var xShear = parseInt(this.bitmap.height * xSkewInRadians);
  var xShearForThisLine = undefined;
  var original = this;

  debug('perspective xShear:' + xShear);

  new Jimp(this.bitmap.width, this.bitmap.height, '#000000FF', function(
    errNew,
    imgCanvas
  ) {
    if (errNew) {
      cb(errNew);
      return;
    }
    
    try {
      for (var y = 0; y < this.bitmap.height - 1; y++) {
        xShearForThisLine = parseInt((y + 1) * xSkewInRadians);
        imgCanvas.blit(
          original
            .clone()
            .crop(0, y, original.bitmap.width, 1)
            .resize(original.bitmap.width - 2 * xShearForThisLine, 1),
          xShearForThisLine,
          y
        ); // imgCanvas.blit()
      } // for
    } finally {
      cb(null, imgCanvas);
    }
  }); // new Jimp()
}; // perspective()

(I also added another prototype to chop off the top 200 pixels so don’t be confused.)