如何在jquery/php中獲取圖像的一部分？

Question

讓我們說，我有一個形象

它的大小是

高度：150像素
寬度：100像素。

我想得到它的一部分，比方說全高，但寬度在30-80px之間。所以這將是

高度：150像素
寬度：100px的。

我不想調整它。我想削減它的一部分。 （感謝編輯，它被稱爲裁剪）。

怎麼辦呢？

Answer 1

有（有點鮮爲人知）clip CSS屬性，儘管它需要該元素被修剪是位置：絕對的; （這是一種恥辱）：

img { 
    position: absolute; 
    clip: rect(0 100px 200px 0); 
    /* clip: shape(top right bottom left); NB 'rect' is the only available option */ 
} 

Reference

Answer 2

jQuery無法修改像這樣的圖像元素。你最好的選擇是把它放在一個有overflow:hidden的父元素中，以給它被切斷的印象。或者您可以使用clip CSS規則。如果你真的想創建一個新的圖像，你可以使用jQuery來收集圖像上的座標，並將它們修改回服務器端腳本，以便實際完成繁重的工作並且異步地向下提供新的圖像。

Answer 3

圖像編輯超出了JavaScript的範圍。你可以只顯示圖像的某一部分，但你不能真正改變圖像文件：

<div id="imgwrapper"><img src="blah.jpg" width="100" height="150"></div> 

#imgwrapper { 
    width: 100px; 
    height: 50px; 
    overflow: hidden; 
    position: relative; 
} 
#imgwrapper img { 
    position: absolute; 
    top: -30px; 
    left: 0; 
} 

請注意，這個解決方案，內部圖像absolute光年的位置，但外層的div是relative LY定位的，它可能比絕對定位和更適合你的頁面佈局。

Answer 4

我認爲你最好的選擇是嘗試使用HTML畫布。

• http://www.w3schools.com/html5/canvas_drawimage.asp
• http://www.w3schools.com/html5/canvas_getimagedata.asp

兩者都允許用於渲染的源圖像的部分，getImageData（）函數還允許讀回的圖像數據並操作它（對於整個圖像或部分）。