This project was awarded to EngineerCat for $300 USD.Get free quotes for a project like this
Browse Related Skills
Other things people do on Freelancer
Project Budget$250 - $750 USD
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)
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
Looking for work?
Work on projects like this and make money from home!Sign Up Now
- The New York Times
- Wall Street Journal
- Times Online