Изображение маски с помощью Jquery с неопределенной высотой

Question

Как я могу определить специальные рамки (верх и низ) для каждого изображения ?.Например, http://grab.by/csU6

Если вы отметите, изображения имеют границу диагонали сверху и снизу.

Спасибо:)

Answer 1

Кажется, что функция .clip canvas отлично подходит для работы: http://jsfiddle.net/eGjak/333/.

ctx.moveTo(0, 100); // define path to draw in
ctx.lineTo(400, 0);
ctx.lineTo(400, 300);
ctx.lineTo(0, 400);
ctx.clip(); // constrain drawing to inside the path

var img = new Image;
img.onload = function() {
    ctx.drawImage(img, 0, 0);
};
img.src = "http://lorempixum.com/400/400/";​

Answer 2

Я думаю, что изображение в примере уже обработано таким образом.Если вы не можете обработать изображение на стороне сервера, другой вариант - прозрачное наложение png.

Answer 3

Вы можете вращать / трансформировать изображение с помощью CSS3, для него также есть несколько плагинов jquery