0

私は経験豊富な C++ 開発者で画像処理を行っていますが、1 つの画像に適用された複数のアルゴリズムの異なる結果を比較する Web ページを作成するタスクがあります。

私は Web プログラミングに関連することはまったくの初心者なので、質問は、そのような Web ページを作成するためにどのツールを使用すればよいかということです。いくつかの画像が表示されます: ソース 1 と、いくつかのアルゴリズムによって生成されたそのバリエーション。課題は、さまざまな場所でさまざまなレベルの倍率で、これらすべての画像を一度に調べられるようにしたいということです。

つまり、最初のページは、ソース画像が上にある次のようになります。

ここに画像の説明を入力

次に、マウス カーソルをソース イメージに合わせ、マウス ホイールを回して拡大し、関心のある領域に少しドラッグすると、次のように表示されます。

ここに画像の説明を入力

それだけです。きれいなアニメーションや派手なマーキー プレビューは必要ありません。これは単なる実用的なタスクです。これを行うには何十もの方法があると思いますが、初心者にとってこれを行う最も簡単な方法は何ですか?

ありがとう。おそらく、この質問は Web プログラミングに関連する別のサイトに投稿されるべきでしたか? どこに投稿するかについてのアドバイスは大歓迎です。

4

1 に答える 1

1

CSS トリック (CSS を制御する JS) で JS を使用する必要があると思います。

たとえば、幅\高さパラメーター (CSS\HTML) を使用して画像をズームし、ネガティブ マージン (CSS) を使用して視点を設定してから、画像を囲む div で overflow:hidden を使用して画像をトリミングします。

jQueryの使用をお勧めします。

  • これを使用して画像を操作できます (http://api.jquery.com/animate/)

  • インタラクティブなズームのために、マウスの追跡 (http://docs.jquery.com/Tutorials:Mouse_Position) とスクロール (http://api.jquery.com/scroll/) に使用できます。

  • .cssメソッドでCSSの操作も簡単です(http://api.jquery.com/css/)

ここに例があり ます http://cs.scaytrase.ru/image_clip.html

.clipinクラス値 ( clip、top、left ) で画像を制御してビューポートを設定し、画像の幅と高さのパラメーターを設定してズームを設定できます

左のサムネイルは、右の写真を 4 倍に拡大したものです (元の 1280x1024、配置するために 500px に拡大)

共通の.clipoutクラスで制御される画像のサイズ

1 つの大きな画像を表示し、その上にマウスを移動すると、同じサイズの他の複数の画像で必要なパッチが表示されます。

于 2012-04-27T12:29:16.467 に答える