Image curve that starts as a rectangle (uploaded by the user), preferably using Canvas or JS

Question

I am trying to create a website that displays an image uploaded by a user and then allows the user to save a new image. I am having trouble figuring out a way to curve an image, as shown in the link below. I can create a curved shape as a solid color in the canvas, but not with the image.

http://i53.tinypic.com/2gule04.jpg

Answer 1

I tried something like this.

I have an original image with a width of 300 and a height of 227. And I'm going to collapse this image 15 pixels down. Therefore, create a canvas with the same width and height = imageWidth + 15 px. i.e. 227 + 15 = 242.

HTML:

<img id="source" src="rhino.jpg"> <canvas id="canvas" width="300" height="242" ></canvas> 

Javascript

 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var img = document.getElementById('source'); var x1 = img.width / 2; var x2 = img.width; var y1 = 15; // curve depth var y2 = 0; var eb = (y2*x1*x1 - y1*x2*x2) / (x2*x1*x1 - x1*x2*x2); var ea = (y1 - eb*x1) / (x1*x1); // variable used for the loop var currentYOffset; for(var x = 0; x < img.width; x++) { // calculate the current offset currentYOffset = (ea * x * x) + eb * x; ctx.drawImage(img,x,0,1,img.height,x,currentYOffset,1,img.height); } 

Answer 2

There is no easy way to do this. You may need to code the conversion yourself using the Canvas API. See http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/ .

Instead of a clean pixel-based solution, you can try creating a grid. Divide the source image into smaller pieces that appear in the target shape. Then use texture mapping to fill in the details. See Image processing and texture mapping with HTML5 Canvas? to display algo. Here you can find another algo here . However, you still have to calculate the display coordinates.