Изгиб изображения, которое начинается с прямоугольника (загруженного пользователем), предпочтительно с использованием 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

Нет простого способа сделать это. Возможно, вам придется кодировать преобразование самостоятельно, используя пиксельный API Canvas. См http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/.

Вместо чисто пиксельного решения вы можете попробовать сетчатое решение. Разделите исходное изображение на более мелкие фрагменты, которые отображаются на целевую фигуру. Затем используйте наложение текстуры, чтобы заполнить детали. См. Управление изображениями и наложение текстуры с использованием HTML5 Canvas? для алгоритма отображения. Вы можете найти другой алгоритм здесь . Вам все равно нужно будет определить координаты отображения.