This is my drag distort proposal (share you knowledge, Q&A-style). Live example is in http://jsfiddle.net/xjHUk/278/ and the main code is this: (only output window: http://jsfiddle.net/xjHUk/279/embedded/result/) function transferPoint (xI, yI, source, destination) { var ADDING = 0.001; // to avoid dividing by zero var xA = source[0].x; var yA = source[0].y; var xC = source[2].x; var … Read more
It’s all a matter of perspective-origin that define how the changes should be visible to us. If you read the same link you will notice this: The vanishing point is by default placed at the center of the element, but its position can be changed using the perspective-origin property. Here is some example where you … Read more
Here is the way you need to follow… For easiness I have resized your image to smaller size, Compute quadrangle vertices for source image, here I find out manually, you can choose edge detection, hough line etc.. Q1=manual calculation; Q2=manual calculation; Q3=manual calculation; Q4=manual calculation; Compute quadrangle vertices in the destination image by keeping aspect … Read more
This is nowhere near my cup of tea so handle with extreme prejudice and also far form solution just some start point hints… First of all we need to define some constraints/assumptions in order to make this to work. user selects 4 lines representing 2 perpendicular planes and these 2 QUADs have the same height … Read more
There are many possible camera positions + orientations where the bounding box would fit inside the view frustum. But any procedure would select one specific camera position and orientation. If you would consider bounding spheres, one solution could be to first change orientation to look at bounding sphere center then move back sufficiently (negative look … Read more
To apply a perspective transformation you first have to know four points in a plane A that will be mapped to four points in a plane B. With those points, you can derive the homographic transform. By doing this, you obtain your 8 coefficients and the transformation can take place. The site http://xenia.media.mit.edu/~cwren/interpolator/ (mirror: WebArchive), … Read more
So, first problem is corner order. They must be in the same order in both vectors. So, if in the first vector your order is:(top-left, bottom-left, bottom-right, top-right) , they MUST be in the same order in the other vector. Second, to have the resulting image contain only the object of interest, you must set … Read more