A small JavaScript library for creating and applying perspective transforms. A perspective transform can easily be used to map one 2D quadrilateral to another, given the corner coordinates for the source and destination quadrilaterals. Here is a useful resource for learning more about perspective transforms and the math behind them. And here is a blog post I wrote about the motivation for creating this library and details of some of its applications.
- Create functions to map points from one arbitrary quadrilateral to another and vice versa with the inverse
- Access the homographic matrix and its inverse (useful for transforming elements with CSS3)
- No external dependencies
With npm:
$ npm install perspective-transform --save
With bower:
$ bower install perspective-transform --save
var PerspT = require('perspective-transform');
var srcCorners = [158, 64, 494, 69, 495, 404, 158, 404];
var dstCorners = [100, 500, 152, 564, 148, 604, 100, 560];
var perspT = PerspT(srcCorners, dstCorners);
var srcPt = [250, 120];
var dstPt = perspT.transform(srcPt[0], srcPt[1]);
// [117.27521125839255, 530.9202410878403]
<script type="text/javascript" src="async.js"></script>
<script type="text/javascript">
var srcCorners = [158, 64, 494, 69, 495, 404, 158, 404];
var dstCorners = [100, 500, 152, 564, 148, 604, 100, 560];
var perspT = PerspT(srcCorners, dstCorners);
var srcPt = [250, 120];
var dstPt = perspT.transform(srcPt[0], srcPt[1]);
// [117.27521125839255, 530.9202410878403]
</script>
Note: Commented variable values in the following examples assume srcPts
and dstPts
as used in the Basic Usage example above.
Map a point from the source quadrilateral to the destination quadrilateral.
var perspT = PerspT(srcPts, dstPts);
var dstPt = perspT.transform(250, 120);
// [117.27521125839255, 530.9202410878403]
Map a point from the destination quadrilateral to the source quadrilateral.
var perspT = PerspT(srcPts, dstPts);
var srcPt = perspT.transformInverse(130, 570);
// [338.99465637447327, 278.6450957956236]
Get the coordinates of the corners of the transform's source quadrilateral, expressed as an array.
var perspT = PerspT(srcPts, dstPts);
var srcPts = perspT.srtPts;
// [158, 64, 494, 69, 495, 404, 158, 404]
Get the coordinates of the corners of the transform's destination quadrilateral, expressed as an array.
var perspT = PerspT(srcPts, dstPts);
var dstPts = perspT.dstPts;
// [100, 500, 152, 564, 148, 604, 100, 560]
Get the homographic transform matrix, expressed as an array of coefficients.
var perspT = PerspT(srcPts, dstPts);
var mat = perspT.coeffs;
// [0.3869749384, 0.0426817448, 59.2427947969, 0.9589610618, 0.4562821238, 434.8644299345, 0.0012901794, 0.0004268174, 1]
Get the inverse homographic transform matrix, expressed as an array of coefficients.
var perspT = PerspT(srcPts, dstPts);
var mat = perspT.coeffsInv;
// [1.9955408809, -0.1282507787, -62.4497171511, -2.9335671323, 2.2894572644, -821.8108124927, -0.0013225082, -0.0008117138, 1]