0

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

そのサイズは

高さ: 150px
幅: 100px.

その一部を取得したいのですが、高さ全体としましょうが、幅は30-80px. そうなる

高さ: 150px
幅: 100px.

私はそれをスケーリングしたくありません。その一部を切り取りたい。（編集していただきありがとうございます。トリミングと呼ばれます）。

どうやってするの？

4

4 に答える 4

3

(あまり知られていない) 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 */
}

参照

于 2012-05-08T13:52:29.613 に答える
2

jQuery はそのような画像要素を変更できません。最善の選択肢は、overflow:hiddenカットされた印象を与えなければならない親要素内に配置することです。clipまたは、 CSS ルールを使用することもできます。実際に新しい画像を作成したい場合は、jQuery を使用して画像の座標を収集し、それらをサーバー側スクリプトにパッチして実際に重い作業を行い、新しい画像を非同期的にフィードすることができます。

于 2012-05-08T13:50:03.827 に答える
1

画像編集は 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;
}

このソリューションでは、内側の画像はabsolutely に配置されていますが、外側の div はly に配置されていることに注意してください。これは、絶対配置されたped 画像relativeよりもページ レイアウトに適している可能性があります。clip

于 2012-05-08T13:51:14.063 に答える
0

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

どちらもソース画像の一部をレンダリングできます。 getImageData() 関数を使用すると、画像データを読み戻して操作することもできます (画像全体またはその一部)。

于 2012-05-08T13:51:36.947 に答える