Closed

projective transformations of images using Javascript/HTML5

This project was awarded to EngineerCat for $300 USD.

Get free quotes for a project like this
Employer working
Awarded to:
Skills Required
Project Budget
$250 - $750 USD
Total Bids
9
Project Description

I have an interesting project in creating projective transformations in JS/HTML5.

By default, canvas only supports very basic transformations of images using setTransform: scale, rotate, skew

Additionally, there has been some work outside of this in trying to approximate projective transformations. As you can see at this site ( [url removed, login to view] ) he splits up the image into very narrow slices, and then scales them according to given parameters. In this example, he has achieved both vertical and horizontal perspective transformations separately, but not at the same time. Also, he specifies the amount of transformation using his own scale value rather than a very precise measurement (which you would normally use in matrix transformations).

Here is the context for my project:
1) First, the user uploads an image of a wall with a spot for a painting on the wall. The wall is not exactly parallel to the camera. Instead it is tilted in some way, so that the square on the wall where the painting would go is in perspective.
2) The user clicks on the four corners of this square on the wall. Based on the position of these 4 points, we can determine what perspective transformation matrix will bring us to that position. I have found the formula for this if needed.
3) The user uploads a painting to actually go in the spot.
4) The user can drag the painting around the room and as it is moved around, it will be automatically transformed to the correct perspective, based on the perspective of the background from #2.

Now, I do not need any of the UI parts of this (i.e. uploading stuff, clicking points, etc)

What I do need is the actual javascript which controls the logic (i.e. calculating perspective from 4 points, applying perspective transformation to the image, etc)

Since there is no native implementation of this in canvas, I imagine you would need to do as follows:
1) convert original image to a matrix
2) figure out what the transformation matrix should be based on the 4 points
3) apply the transformation to the image matrix
4) convert the image matrix back to an actual image

Let me know if you have any questions.

Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online