jquery/phpで画像の一部を取得するには？

Question

のは、私がイメージを持っているとしましょう

それのサイズがある

高さ：150ピクセル
幅：100pxに。

私はそれの一部を得たいと思っていますが、完全な高さを言いましょうが、幅は30-80pxです。そうです

高さ：150px
幅：100pxです。

私はそれを縮尺したくありません。私はそれから部分を切りたいと思う。 （編集のおかげで、切り抜きと呼ばれています）。

どうすればよいですか？

Answer 1

（ほとんど知られていない）clip cssプロパティがありますが、クリップされる要素はposition：absolute; （恥である）：

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の対象外です。この溶液を用いて、内部の画像がLY配置absoluteですが、外側のdivがrelative光年に位置していることを

<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; 
} 

注：あなたは、画像の特定の部分のみを表示することができますが、実際に画像ファイルを変更することはできませんこれは絶対配置されたclipペダルのイメージよりもページレイアウトに適しています。

Answer 4

私はあなたの最善の策は、HTMLキャンバスを試してみることだと思います。

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

両方のソース画像のレンダリング部を可能にする、getImageData（）関数は、画像全体または一部を（画像データをリードバックし、それを操作することができそれの）。