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

我正在尝试创建一个站点，该站点对用户上传的图像进行曲线化处理，然后允许用户保存新图像。我很难弄清楚如何弯曲图像，如下面的链接所示。我可以在画布中将曲线形状创建为纯色，但不能使用图像

---

没有简单的方法可以做到这一点。您可能需要使用Canvas的pixelwise API自己编写转换代码。看

---

您可以尝试基于网格的解决方案，而不是基于纯像素的解决方案。将源图像分割为映射到目标形状的较小块。然后使用纹理贴图来填充细节。有关映射算法，请参见。你可以找到另一个算法。不过，您仍然需要计算映射坐标。

我尝试了类似的方法

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

var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var img=document.getElementById（'source'）；
var x1=最小宽度/2；
var x2=img.宽度；
变量y1=15；//曲线深度
var y2=0；
变量eb=（y2*x1*x1-y1*x2*x2）/（x2*x1*x1-x1*x2*x2）；
var ea=（y1-eb*x1）/（x1*x1）；
//用于循环的变量
无功电流偏移；
对于（变量x=0；x