弯曲以矩形（由用户上传）开始的图像，最好使用Canvas或JS

Question

我正在尝试创建一个曲线显示用户上传的图像的网站，然后允许用户保存新图像。我无法弄清楚如何弯曲图像，如下面的链接所示。我可以在Canvas中将曲线形状创建为纯色，但不能在图像中创建。

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

Answer 1

我试过这样的事情。

我有一个宽度为300，高度为227的源图像。我要将此图像向下弯曲15个像素。因此，创建一个宽度和高度相同的画布= imageWidth + 15 px。即。 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

没有简单的方法可以做到这一点。您可能需要使用Canvas的pixelwise API自行编码转换。请参阅http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/。

您可以尝试使用基于网格的解决方案，而不是基于纯像素的解决方案。将源图像拆分为映射到目标形状的较小块。然后使用纹理映射填充细节。有关映射算法，请参阅Image manipulation and texture mapping using HTML5 Canvas?。您可以找到另一个算法here。但是，你仍然需要弄清楚映射坐标。