JS模倣フラッシュアップロードアバターエフェクト実装コード

JS模倣フラッシュアップロードアバターエフェクト実装コード_javascriptスキル

WBOY

リリース： 2016-05-16 18:04:39

オリジナル

1011 人が閲覧しました

最初にレンダリングを確認します (FF の下):

以下は私のアイデア全体です:
1. ajaxFileUpload.js を使用して画像を非同期にアップロードします。言うまでもなく、これは非常に簡単です。
2. div のドラッグには jquery-ui を使用します。これについてはあまり言うことはありません。
3. アップロードされた画像の処理。
編集コンテナは 300*300 です。画像が 300*300 以内にない場合は、ここで maxHeight=300 および maxWidth=300 のサムネイルが生成され、編集コンテナの背景が設定されます。元のファイルが 123 .jpg の場合、ここで生成されるファイルは 123.jpg.view.jpg です。もちろん、123.jpg.view.jpg が生成されない場合もあります。
返されるデータは { result:" result ",size:" size ",msg:"" msg "",w:" ww ",h:" hh "}" です。
result は 1 または 0 、テーブルが正常にアップロードされたかどうか、
size は拡大縮小率、デフォルトは 1、サムネイルがある場合は縮小倍数、元の 3/4 に縮小された場合、サイズは 0.75
msg result=1 の場合、msg はファイルアドレスです。result=0 の場合、msg はエラーメッセージです。
w、h は元の画像の幅と高さ、サムネイルがある場合は幅と高さです。 4. 画像領域
アバターを選択します。ターゲットのサイズは、編集中に右側に表示されます。これは、選択範囲の移動に合わせて移動する必要があります。背景の位置によっても変わりますが、背景ではこれを実現するのが難しいかもしれません。
とにかく、私は実際の写真を使用することにしました。ここで、画像はどこから取得されるのでしょうか? 誰もが画像検証コードをよく知っているはずです。これは、選択範囲をドラッグしてサイズ変更した後、その効果を取得する方法です。のほうが動的ですが、ふふふ...)、つまり、停止時にサーバーは表示された画像をリクエストする必要があり、リクエストデータには位置とサイズに加えて、上で取得したサイズ (0.75) が含まれている必要があります。
サーバーに到着すると、選択範囲の位置 (x, y) とサイズ (w, h) がサムネイル用であることがわかります。このとき、size は便利です。省略形はサイズで復元されます。x、y、w、h をサイズで除算すると、結果の位置とサイズが元の画像に一致します。、 @# に戻ります! うわー、まだここに戻ることはできません! カット後のサイズが
の目標サイズ (175*175) を満たすかどうかわからないため、ここでは実行できません。ユーザーに返したいと思っていますが、返す前に最終的なパッケージ化を行って、大きいものを圧縮し、小さいものを拡大して、すべてを 175*175 にする必要があります。それで、私たちのアバターを見ることができます。
ページで選択します。 ~
5.
を保存することを確認します。ここでのロジックは、画像領域を選択するときに、画像を生成してページに出力します。メソッドで画像を生成し、保存すれば問題ありません。ここで別のクリーニング操作を行います。
最後の 123.jpg は役に立たず、123.jpg.view.jpg も役に立ちません。 123.jpg.view.jpg .jpg を使用して 132.jpg から抽出されました。
6. 関数全体は HTML に配置され、
js のどこにでもロードできます。 >

コードをコピーします

コードは次のとおりです: $(function() { $( "#divUp").load("uploadAvatar.htm?n=" Math.random()) ;

})

function OnAvatarUploaded(file) { 
$("#img").attr( "src", file "?n=" Math.random()); //キャッシュを防止します
} 

 
html: 

コードをコピー

コードは次のとおりです:

< ;div id="divUp" style="幅: 520px; float: left; margin-left: 20px"> ;

****************
一般的なアイデアと手順は以上です。
この機能は Flash ほど強力ではありませんが、一般的なアバターをアップロードするのに十分です。アバターのサムネイルを生成するのも非常に簡単です。ソースコードを参照すると、どこに追加するかがわかります。。

ハンドラー内のコードは少し乱雑で、整理されていません。申し訳ありません。

AvaterUpload_jb51.rar