Menu
I'm trying to build a application where people can upload images and I want to make it possible that people can drag the corners of the image and distort it. But I have no clue where to start and I can't find any examples.
I do have an example in flash: http://configurator.cando.eu/popup.html
- Click "Cando Stijlkamer"
- Click on 1 of the 6 backgrounds
- On the top select step 2 "Kies uw deur"
- Double click the door, and on the bottom do it again.
- Now you can drag the corners.
Example image:
Anyone knows how to make this possible?
UPDATE
Started using ThreeJS for webGL, at the moment I got a cube, can make it perspective, scale and scew it. But the corner wont be flexible.
UPDATE 2
Created a custom geometry with draggable corners.
747
Click Resize under the Canvas Edits tab on the left Edits menu. Enter the desired dimensions in pixels in the Width and Height boxes. Alternatively, you can check the Use percentages box to change the size of your image.
NodeJS – Resize() is an inbuilt function that is used to resize the images to the desired size. We can use resize to set the height and width using a 2-pass bilinear algorithm. It can resize an image into any size as declared by the user. We can take input from the user or resize it into fixed Width*Height size.
I can show you how you can do this effect very easy in Flash. However, if you need to use HTML5 I would suggest https://github.com/edankwan/PerspectiveTransform.js instead of Canvas element.
198
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
