htmlで必要な座標に合わせた画像表示

Question

私は画像クロッピングのウィジェットを1つ持っています。これはユーザーが切り抜いたx1 y1とx2 y2座標を与えてくれます。今私の要件は、いくつかの他のhtmlページにその切り抜かれた座標を置くことです。ここで

は、ディスプレイへの私のコード

私の幅と窓の高さは200pxの200pxのです。 この200×200ピクセルのウィンドウにクロップされた座標を合わせたいと思います。

私は4つの座標を持っています。これはユーザーが画像を切り抜くときに得られます。

これを達成する方法

ありがとうございました。

---

「私のコードはこちらです」と書いて申し訳ありませんが、何か書いています。

私はユーザーに画像をアップロードするように指示していますが、ユーザーは必要な領域を1つ選択して画像ファイルをサーバーに保存し、画像をトリミングします座標はデータベースに格納されます。

私はx1、y1、x2、y2を持っていることを実際にユーザーが選択した座標を知っています。私はユーザーがアップロードしたものを完全なイメージで持っています。

私の必要性は、200px * 200pxのフレームで切り取った画像のみをユーザーに表示することです。

言い換えれば、私は座標を持っており、その座標で始まりその座標で終わるイメージを200×200ピクセルの幅と高さのフレームで表示したいと考えています。

ありがとうございました

Answer 1

私はこれまでにこれを行いました。あなたが位置して200x200のdiv要素を持っている

：私は、次のを思い付いた相対オーバーフロー：隠された、それが位置してimgタグ含まれてみましょう：絶対、ユーザーの画像と幅と高さのsrc属性がスケーリング：

を

width = user_image_width * 200/(x2 - x1) 
height = user_image_height * 200/(y2 - y1) 

、あなたが適切に左とトップを設定する必要があります。

left = -x1 * 200/(x2 - x1) 
top = -y1 * 200/(y2 - y1) 

あなたは（と私はミスをしなかった）img要素の対応するCSSプロパティを設定した場合、それだけで選択したセクションの充填を示すべき200x200 div全体