使用Jquery屏蔽图像，高度未定义

Question

如何为每张图片定义特殊边框（顶部和底部）？例如http://grab.by/csU6

如果检查，图像的顶部和底部都有对角线边框。

谢谢：）

Answer 1

canvas的.clip函数似乎很适合这项工作：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

您可以使用CSS3旋转/转换图像，还有一些jquery插件也适用于

Answer 3

我认为示例中的图像已经像这样处理了。如果您无法在服务器端处理图像，则另一个选项是透明的png叠加。