彎曲以矩形開頭（由用戶上傳）的圖像，最好使用Canvas或JS

Question

我試圖創建一個網站，用於曲線上載用戶的圖像，然後允許用戶保存新圖像。我無法弄清楚如何對圖像進行彎曲，如下面的鏈接所示。我可以在「畫布」中將曲線形狀創建爲純色，但不能與圖像一起創建。

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

Answer 1

有沒有簡單的方法來做到這一點。您可能需要使用Canvas的pixelwise API自己編碼轉換。請參閱http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/。

除了純基於像素的解決方案，您可以嘗試基於網格的解決方案。將源圖像拆分爲映射到目標形狀的較小塊。然後使用紋理貼圖來填充細節。有關映射算法，請參閱Image manipulation and texture mapping using HTML5 Canvas?。你可能會發現另一個算法here。不過，你仍然需要找出映射座標。

Answer 2

我試過這樣的事情。

我有寬度爲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); 
}