0

HTMLページの一部を選択し、画像ではなく選択範囲の座標を取得する必要があります- 画像のトリミング(正方形の選択領域)のようにこれを実現したいのですが、どうすればよいですか?

より詳細に次に欲しい: html ページのブラウザでボタンをクリックすると、すべてのページが無効になり、ダークグレーの色になりますが、小さなウィンドウが実際のページの色で表示されます。このウィンドウを操作できます: 大きくしたり小さくしたりします -結果として、このウィンドウの座標が必要です。

4

5 に答える 5

2

ターゲット要素 (ドキュメント、テーブルなど) にいくつかのマウス イベント ハンドラーを設定します。

  • マウスダウンで、クリックした位置にサイズ 0,0 の div を作成します。
  • mousemove で、マウスダウン イベントの元の x、y を原点として使用して、div のサイズを変更して新しい座標に拡張します。
  • マウスアップで、作成したばかりの div 座標 (「選択」) を使用して、好きなことを行います。

このオーバーレイ div で css クラスを使用して、OS 選択ボックスを模倣するように破線または点線の境界線を付けることができます。

編集:選択範囲の座標を指定するだけです。ユーザーのコンピューターでレンダリングされる html ページのトリミングされた画像を実際にスクレイピングしようとしている場合は、そのために何らかのクライアント ブラウザー プラグインが必要になります。

于 2010-08-25T22:17:33.657 に答える
1

Firefox の Web Developer Toolbar プラグインを試してください。座標を表示できるオプションがあります。

于 2010-08-25T22:16:36.107 に答える
1

私があなたをよく理解していれば、これが私のやり方です: ページを a でレンダリングするだけ<div>です (html に直接、または を介し​​て配置できます<iframe>) 。<div>{overflow: hidden; width: 100px; height: 70px}

オフセットを制御するには、インナーを挿入<div>して最初のコンテンツをラップし、css 値を次のように設定する{margin-left: -50px; margin-top: -40px;}必要があります。これで完了です。

于 2010-08-25T22:17:50.917 に答える
1

キャンバス要素でない限り、これは不可能です。画像をレンダリングするには、クライアント側のアドオンが必要です。

選択範囲の座標だけが必要な場合は、透明な要素 (キャンバスまたは div) をページ全体に重ねることができます。次にmousedownとイベントを使用してマウスの座標mouseupをキャプチャし、オプションで透明な四角形を描画して、何を選択しているかを認識させます。

于 2010-08-25T22:06:02.887 に答える
1

何を達成したいのか完全にはわかりませんが、ページの大部分の一部だけを表示しようとしている可能性があります。

overflowその場合、たとえば画像の一部のみを表示するために、「非表示」に設定できるcss プロパティを探していると思います。

overflow物件の詳しい情報。

于 2010-08-25T22:12:56.987 に答える