4

とにかく、生のJavaScriptを使用して画像をトリミングすることはできますか？特定の幅、高さ、offsetX、offsetYの画像（htmlタグやソースなど）を取得して、指定した部分の画像を作成する機能が欲しいです。

私はHTML5キャンバスなどにあまり詳しくありませんが、古いブラウザをサポートする必要があるので、それもオプションではありません（私が知っているのは残念です）。

これが明確であることを願っています。ありがとう。

4

3 に答える 3

4

多くの場合、CSSスタイルを使用して画像をトリミングして表示することにより、レンダリングの制限を設定するだけで十分です。

の代わりに、imgを使用しdivます。に必要なサイズを割り当てますdiv。backgroundプロパティをに設定します-x -y url('...url-of-your-image...') no-repeat

を、表示する左上のオフセットにx置き換えます。y

于 2012-07-11T14:57:15.080 に答える
4

画像の一部を表示するだけの場合は、cssクリップを使用します：https ：//developer.mozilla.org/en/CSS/clip 。JavaScriptが無効になっている場合でもIE6+で動作します。

画像を物理的にトリミングする必要があり、IE6のサポートが必要な場合は、Flashを使用するか、データとトリミング値をサーバーに送信して、トリミングされた画像を返します。

于 2012-07-11T15:01:04.273 に答える
1

これで試してください：

function crop(img_id, crop_id, x, y, width, height) {
  $(crop_id).update('<img id="' + crop_id + '_img" src="' +
      $(img_id).getAttribute('src') + '" style="display:none" />');

  var scale_x = $(crop_id).getWidth() / width;
  var scale_y = $(crop_id).getHeight() / height;

  $(crop_id).setStyle({
    position: 'relative',
    overflow: 'hidden' 
  });

  $(crop_id + '_img').setStyle({
    position: 'absolute',
    display: 'block',
    left: (-x * scale_x) + 'px',
    top: (-y * scale_y) + 'px',
    width: ($(img_id).getWidth() * scale_x) + 'px',
    height: ($(img_id).getHeight() * scale_y) + 'px'
  });
}

問題：Jqueryが必要で、おそらくソリューションはIE8+で機能します...IE6+が必要ですか？

于 2012-07-11T14:58:42.837 に答える