projective transformations of images using Javascript/HTML5

In Progress

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.

Skills: HTML5, Javascript, Mathematics

See more: javascript matrix camera matrix using settransform, convert image to html5, convert html 4 to html5, javascript html5, html5 up, html5 image, canvas javascript, background from images, canvas drag, convert image html5, javascript controls, time javascript html, drag html, creating html5 project, native camera, javascript image canvas drag, controls javascript, html5 canvas drag, http parameters javascript, image convert manipulation, html drag, camera html5, painting images, drag rotate, html corners

Project ID: #4219460

Awarded to:


Hi! I like your project. Please read my PM :)

$300 USD in 4 days
(1 Review)

8 freelancers are bidding on average $538 for this job


i have questions . answer in PMB

$690 USD in 7 days
(5 Reviews)

Hi we checked your requirement,We could develop as per your need. u could check that out. we would work till your satisfaction. Thanks & Regards Techwelfare Please check inbox for our previous work.

$676 USD in 12 days
(6 Reviews)

Please see PM

$620 USD in 7 days
(2 Reviews)

Can we discuss this in detail before start this project,for more detail please check in PM.

$650 USD in 19 days
(2 Reviews)

Ready to work

$600 USD in 20 days
(0 Reviews)

Hi, I am interested in your project and provide the best result you want.

$500 USD in 5 days
(0 Reviews)

Hi please check PM

$400 USD in 5 days
(0 Reviews)

Hi, I'm ready to start.

$560 USD in 7 days
(0 Reviews)