シナリオを写真で要約しましょう。
サイトにプロフィール写真を設定する機能を作ろうとしています。アップロードした画像を元のサイズで画像フィールドに表示するページが必要ですが、プロフィール写真のサイズは 200*153 にする必要があるので、それが必要です。ユーザーは写真のサイズを変更し、フレーム (フレーム サイズは 200*153) をサイズ変更された写真のプロファイル写真にしたい任意の領域にドラッグすることができます。フレームがクロップされ、その領域がサーバーに保存されます。
これらが HTML コードであると想像してください。
<div style="height:150px;width:200px;position:absolute;border:5px solid yellow;z-index:1001;" id="test1"></div>
<img id="test" src="~/Content/01052013626.jpg"/>
div はドラッグ可能で、画像はサイズ変更可能であることに注意してください。
ありがとうございました。
画像と div を同じラッパー div に配置することから始めます。画像ではなくdivでjqueryの座標関数をより簡単に使用できるようになるため、これを行います。
これらの座標を取得したら、div の寸法と座標によって指定されたその画像のトリミングされたセクションを取得し、このチュートリアルを使用できます。
http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/
そのセクションを HTML キャンバス要素に保存するには。必要に応じて、キャンバス要素を非表示にすることができます。
それが保存されたら、次の回答に従います。
サーバーに保存します。
わかりました。まず、サーバー側の言語を使用して、トリミングされた画像を実際に保存する必要があります。トリミングにはJcropを使用し、保存プロセスのためにサーバーに送信します。
繰り返しますが、javascript だけでサーバーにファイルを保存することはできません!
この php クラスを使用して、サイズ 200*153 の maskingimage で画像をマスクできます。ピクセルベースのアルパチャネルマッピングを使用して、正確な領域を正確にトリミングします。マスク イメージにアルファ チャネル 0 (透過部分) がある場合は、その領域のピクセルを取得してトリミングし、必要な新しいサイズにイメージを再生成します。使用するサーバーに 200*153 ピクセルのサイズのマスク イメージを保持する必要があります。ここでは、サイズ変更された新しい座標を ajax 呼び出しでバックエンドに渡し、それに応じて画像をトリミングすることもできます。
https://github.com/lukeissac/Image-Masking-in-php/blob/master/class_lib.php
サーバー側スクリプトを使用するオプションがあれば、それは機能します。上記のリンクは、同じ概念の証明です。