我試圖在沒有搞亂實際圖像或使用歪斜的情況下以空檔形式呈現圖像。我該怎麼做？如何在不扭曲圖像的情況下獲得飛人圖像？

來源

2014-01-17 danslap

你是什麼意思的「空中飛人」？你有什麼嘗試？ – bjb568

我嘗試使用邊框技巧，但無法使圖像僅出現在保持飛人效果的一個邊框中。也嘗試使用這個http://jsfiddle.net/ceGGN/38/，但它扭曲的形象..我需要它留下來，如果我只是削減一個邊緣 – danslap

好吧，下次更清楚，並提供小提琴題。我建議編輯。 – bjb568

您可以使用畫布這導致這樣的：

From demo

Online demo here

的HTML的簡單調整，改爲使用帆布：

<div class="box"> 
    <canvas id="canvas"></canvas> 
</div>

刪除一些CSS種規則規格：

.box{ 
    height:300px; 
    overflow:hidden; 
} 

.box > canvas { 
    height: 100%; 
    width: 100%; 
}

而在的JavaScript部分補充一點：

var img = new Image, 
    ctx = document.getElementById('canvas').getContext('2d'); 

/// load image dynamically (or use an existing image in DOM) 
img.onload = draw; 
img.src = 'http://cssglobe.com/lab/angled/img.jpg'; 

function draw() { 

    /// set canvas size = image size 
    var w, h; 
    canvas.width = w = this.naturalWidth; 
    canvas.height = h = this.naturalHeight; 

    /// draw the trapez shape 
    ctx.moveTo(0, h * 0.25); 
    ctx.lineTo(w, 0); 
    ctx.lineTo(w, h); 
    ctx.lineTo(0, h * 0.75); 

    /// make it solid 
    ctx.fill(); 

    /// change composite mode to replace the solid shape 
    ctx.globalCompositeOperation = 'source-in'; 

    /// draw in image 
    ctx.drawImage(this, 0, 0); 
}

這適用於所有現代瀏覽器。如果不需要那麼palpatim的方法更快。

希望這會有所幫助。

來源

2014-01-18 00:17:33 K3N

假設你的意思是「梯形」的形象，RY使用clip-path：

img { 
    -moz-clip-path: polygon(0 50%, 100% 0, 100% 100%); 
    -o-clip-path: polygon(0 50%, 100% 0, 100% 100%); 
    -webkit-clip-path: polygon(0 50%, 100% 0, 100% 100%); 
    clip-path: polygon(0 50%, 100% 0, 100% 100%); 
}

演示在這裏：

http://jsfiddle.net/Palpatim/ceGGN/114/

注意：瀏覽器支持是不是爲這個偉大的，所以要確保您對其進行了徹底測試，或者可以接受其他瀏覽器的降級性能。否則，最可靠的方法就是編輯圖像，以便沿着剪輯路徑使用帶有透明背景的PNG。

來源

2014-01-17 23:14:56 Palpatim

謝謝！希望可以讓它在大多數瀏覽器中都能正常工作事情是我需要讓用戶可以上傳新圖片而不必先編輯它。 – danslap

如何在不扭曲圖像的情況下獲得飛人圖像？

回答

Online demo here

相關問題