面具圖像與JQuery的高度undefined

我怎樣才能爲每個圖像定義特殊的邊界（頂部和底部）？例如http://grab.by/csU6 面具圖像與JQuery的高度undefined

如果您檢查，圖像的頂部和底部有對角線邊框。

謝謝:)

2012-03-21 rodboc

（offtopic）您沒有接受任何建議的答案。如果不註冊/接受答案，人們會停止給你答案。 – 2012-09-23 21:58:29

畫布.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/";

來源

2012-03-21 21:44:28 pimvdb

非常酷，太糟糕了，它不適用於IE。 :( – 2012-03-21 21:54:08

我喜歡結果，但只適用於現代瀏覽器:( – rodboc 2012-03-21 21:55:35

@ user1005729：是的，這是正確的。如果你不想依賴於客戶端，你最好是在服務器端而不是服務器端。 – pimvdb 2012-03-21 21:56:38

可以旋轉/ CSS3與變換的圖像，也有它的一些jQuery插件以及

來源

2012-03-21 21:45:05 RTulley

我嘗試用CSS3，但這個只適用於現代瀏覽器 – rodboc 2012-03-21 21:51:59

任何已經這樣做的網站的例子 – RTulley 2012-03-21 21:58:13

我沒有一個例子，因爲只是一個想法 – rodboc 2012-03-21 21:59:50

我認爲在例如圖像已被處理這樣的。如果你不能在服務器端處理圖像，另一個選項是一個透明的PNG覆蓋。

來源

2012-03-21 21:46:15

該圖像沒有處理，我使用了CSS的掩碼，但不工作好， – rodboc 2012-03-21 21:51:14

哦，我的壞，沒有意識到它是一個屏幕抓取。你不能只使用PNG覆蓋？帆布是一個選項，但不是很向後兼容。 – 2012-03-21 21:53:14

我使用PNG覆蓋圖，但高度未定義。我嘗試畫布，但只適用於現代瀏覽器:( – rodboc 2012-03-21 21:56:55

面具圖像與JQuery的高度undefined

回答

相關問題