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

Question

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

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

Answer 1

我尝试过这样的事情。

我有一个宽度为 300 和高度为 227 的源图像。我将把这个图像向下弯曲 15 个像素。所以创建一个具有相同宽度和高度的画布 = imageWidth + 15 px。IE。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 的像素级 API 自己编写转换代码。请参阅http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/。

您可以尝试使用基于网格的解决方案，而不是纯基于像素的解决方案。将源图像拆分为映射到目标形状的较小块。然后使用纹理映射来填充细节。请参阅使用 HTML5 Canvas 进行图像处理和纹理映射？用于映射算法。你可以在这里找到另一个算法。不过，您仍然需要找出映射坐标。