jlouthan / perspective-transform Goto Github PK
View Code? Open in Web Editor NEWA small JavaScript library for creating and applying perspective transforms
License: MIT License
A small JavaScript library for creating and applying perspective transforms
License: MIT License
I could not get this to give correct results.
Instead, this library worked well for me: https://www.npmjs.com/package/simple-homography
Note there's a mistake in the README, it should be:
let B = math.multiply(homography, A).toArray()
I have a homographic transform matrix (3X3) and I want to transform a div from its default position according to this matrix.
Is it possible to that with this library?
It looks like perspT.coeffs
is a getter.
Hi,
Is it possible that we can use this library for an nth number of points?
eg: - [158, 64, 494, 69, 495, 404, 158, 404, 495, 404, 495, 404 ...n]
Hello,
What is the license of these project ? I need to know the license to be able to use this lib in my own project.
Best regards,
var PerspT = require('perspective-transform');
const src = [ 0, 0, 0, 1024, 1024, 0, 1024, 1024 ];
const dest = [ 512, 171, 512, 853, 512, 0, 512, 1024 ];
var perspT = PerspT(src, dest);
When I try to map to a quadrilateral where all the x coordinates are the same, I get the following error:
TypeError: Cannot read property '3' of undefined
at Object.inv (C:\Users\Ryan\Documents\Code\js_playground\node_modules\perspective-transform\dist\perspective-transform.js:98:17)
at getNormalizationCoefficients (C:\Users\Ryan\Documents\Code\js_playground\node_modules\perspective-transform\dist\perspective-transform.js:224:22)
at PerspT (C:\Users\Ryan\Documents\Code\js_playground\node_modules\perspective-transform\dist\perspective-transform.js:248:20)
at PerspT (C:\Users\Ryan\Documents\Code\js_playground\node_modules\perspective-transform\dist\perspective-transform.js:242:11)
at Object.<anonymous> (C:\Users\Ryan\Documents\Code\js_playground\js.js:5:14)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
I poked around in the code a bit to try to come up with a nice solution, but the best I could get was throwing in a check like:
if(dstPts[0] === dstPts[2] && dstPts[0] === dstPts[4] && dstPts[0] === dstPts[6]){
this.coeffs = [0, 0, dstPts[0], 0, 1, 0, 0, 0]
this.coeffsInv = [0, 0, 1/dstPts[0], 0, 0, 0, 0, 0]
} else if(dstPts[1] === dstPts[3] && dstPts[1] === dstPts[5] && dstPts[1] === dstPts[7]){
this.coeffs = [0, 1, 0, 0, 0, dstPts[0], 0, 0]
this.coeffsInv = [0, 1, 0, 0, 0, 1/dstPts[0], 0, 0]
}else {
this.coeffs = getNormalizationCoefficients(this.srcPts, this.dstPts, false);
this.coeffsInv = getNormalizationCoefficients(this.srcPts, this.dstPts, true);
}
This just maps everything to a line that is the height of the source quadrilateral and on the x coordinate that all the x points of the destination quadrilateral are on, which is fine for my use case, but I feel like there could be a better solution.
hey,
First of all very nice work done.
but I have problem installing via npm.(tried on with bower and loved your work)
though I reported problem in npm and npm-windows-update
Error is something like
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Users\alfanso\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "install" "perspective-transform"
npm ERR! node v4.2.3
npm ERR! npm v3.5.2
npm ERR! code ENOSELF
npm ERR! Refusing to install perspective-transform as a dependency of itself
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues
npm ERR! Please include the following file with any support request:
npm ERR! E:\node\perspective-transform\npm-debug.log
I'm trying to use this library, but I get weird results that I can't really explain.
Using this code below:
const srcCorners = [
491218.662528078, 6259800.43254993,
491664.008009023, 6259799.53201322,
491606.373219169, 6260054.09226945,
491240.25960665, 6260028.56590027
]
const dstCorners = [
0, 0,
100, 0,
100, 100,
0, 100
]
const perspT = PerspT(srcCorners, dstCorners)
console.log(perspT.transform(491438.780488201, 6259922.52984722))
Which when plotted looks like this:
I've got four corner points and a query point right in the center. I'm mapping this to a rectangle spanning (0,0) to (100, 100).
When I run this code, though, I get [-144.37178139160187, -125.00368410330502]
, whereas it should be around [54.644979834216294, 45.89394897084863]
.
Am I doing something wrong here?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.