HTMLページの一部を選択し、画像ではなく選択範囲の座標を取得する必要があります- 画像のトリミング(正方形の選択領域)のようにこれを実現したいのですが、どうすればよいですか?
より詳細に次に欲しい: html ページのブラウザでボタンをクリックすると、すべてのページが無効になり、ダークグレーの色になりますが、小さなウィンドウが実際のページの色で表示されます。このウィンドウを操作できます: 大きくしたり小さくしたりします -結果として、このウィンドウの座標が必要です。
HTMLページの一部を選択し、画像ではなく選択範囲の座標を取得する必要があります- 画像のトリミング(正方形の選択領域)のようにこれを実現したいのですが、どうすればよいですか?
より詳細に次に欲しい: html ページのブラウザでボタンをクリックすると、すべてのページが無効になり、ダークグレーの色になりますが、小さなウィンドウが実際のページの色で表示されます。このウィンドウを操作できます: 大きくしたり小さくしたりします -結果として、このウィンドウの座標が必要です。
ターゲット要素 (ドキュメント、テーブルなど) にいくつかのマウス イベント ハンドラーを設定します。
このオーバーレイ div で css クラスを使用して、OS 選択ボックスを模倣するように破線または点線の境界線を付けることができます。
編集:選択範囲の座標を指定するだけです。ユーザーのコンピューターでレンダリングされる html ページのトリミングされた画像を実際にスクレイピングしようとしている場合は、そのために何らかのクライアント ブラウザー プラグインが必要になります。
Firefox の Web Developer Toolbar プラグインを試してください。座標を表示できるオプションがあります。
私があなたをよく理解していれば、これが私のやり方です: ページを a でレンダリングするだけ<div>
です (html に直接、または を介して配置できます<iframe>
) 。<div>
{overflow: hidden; width: 100px; height: 70px}
オフセットを制御するには、インナーを挿入<div>
して最初のコンテンツをラップし、css 値を次のように設定する{margin-left: -50px; margin-top: -40px;}
必要があります。これで完了です。
キャンバス要素でない限り、これは不可能です。画像をレンダリングするには、クライアント側のアドオンが必要です。
選択範囲の座標だけが必要な場合は、透明な要素 (キャンバスまたは div) をページ全体に重ねることができます。次にmousedown
とイベントを使用してマウスの座標mouseup
をキャプチャし、オプションで透明な四角形を描画して、何を選択しているかを認識させます。
何を達成したいのか完全にはわかりませんが、ページの大部分の一部だけを表示しようとしている可能性があります。
overflow
その場合、たとえば画像の一部のみを表示するために、「非表示」に設定できるcss プロパティを探していると思います。