JavaScriptを使用した画像ズーム？

StackOverflow https://stackoverflow.com/questions/194761

  •  10-07-2019
  •  | 
  •  

質問

JavaScriptを使用して画像を拡大するための優れたコードを入手した人はいますか？

サイズを変更するなどできるが、怠け者で、異なるレベルにズームしたり、ズームしたときに動き回ったりする賢いものを探していた

役に立ちましたか？

解決

これは、あなたが求めている品質に本当に依存します。詳細なズームレベルと適切な補間を備えた高品質の画像を採用する必要がある場合は、画像のズーム部分を提供するバックエンドサービスを作成する必要があります。品質や速度を気にしない場合は、画像全体をダウンロードして、絶対位置にあるdiv内に表示するように合わせ、表示する領域のオフセットとズームレベルに応じてサイズを調整できます。

おそらく最初のオプションの後にいると思います。 このために作成されたいくつかのツールがあります。 ;他の人があなたが試すことができる他の人へのリンクを投稿すると確信しています。私は自分のサービスとクライアントを書きました。プロプライエタリとして正確な詳細を説明することはできませんが、私がやっていることの概要を説明できます。

私はasp.netジェネリックハンドラを持っています。このハンドラは、どの画像（IDによる）とズームする座標とターゲット画像サイズを示すクエリ文字列を受け取ります。私はサービスに画像をロードして切り取り、サイズを変更させます（ファイルの最初のアップロード時に多くの最適化と準備を行うため、ファイルの複数の断面など、ズーム時に高速に提供するため、それよりも複雑ですが、こちらが基本です。

このサービスは単にimage / jpeg型を返し、画像を送信します。

クライアント側で、ユーザーがズームインしたい画像上の領域をマーキーできるマーキーボックスコントロールを作成しました。領域をマーキーし、ズームをクリックします。次に、元の画像サイズと表示可能な画像サイズに基づいて、選択した座標の画像へのオフセットを計算します。前述のハンドラーにheseの座標を送信します。サービスのクエリ文字列を含むURLをImageオブジェクトにロードし、onloadを処理します。すべてがうまくいった場合、それを表示された画像に交換し、クライアント側のすべての変数を更新して、画像のどこにズームインするかを決定します。その後、再度ズームするか、そこからさらにズームアウトまたはパンできます。

今、あなたの怠requirementな要件を理解していますが、これを書くことは、基本を実行するために実際に非常に簡単であると言う必要があります。最も難しいのは、選択ボックスを実行することです。しかし、それでも2クリックの追跡と同じくらい簡単です。ズームの左上を選択し、右下を選択します。または、選択ボックスをまったく持たず、所定の間隔でのみズームインおよびズームアウトします。私のプロジェクトでは、かなり複雑な画像解析ソリューションとしてズームボックスが必要でした。

これが少なくとも役に立つことを願っています。そして、あなたが何か役に立つものにつながることを期待しています。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top