php-はがきに画像の顔を使用します(スクリーンショットを参照)
santayourself(Facebookアプリケーション)に似たアプリを作成したいと思っています。下のスクリーンショット
アプリケーションは写真を受け入れ、ユーザーはズームと回転のコントロールを使用して写真を移動したり、画像を右、左、上、下に移動したりできます。次に、顔が必要に応じて、ユーザーは[保存]をクリックして画像をサーバー(php、apache、linux)に保存できます。
このプロジェクトの進め方について何かアドバイスはありますか? javascriptソリューションの方が良いと思います。どんな提案も歓迎します。
答え :
解決策:
javascriptとphpGD-libraryがそれを行います-上記のほとんどのことはjavascriptだけで実行できます。これを行う最も速い方法は、サンタマスクを、同じように配置されたクライアント写真の上に絶対に配置された透明なpngで実行することですが、オーバーフローが非表示に設定されたマスクと同じサイズのdivに配置されます。クライアントフォトはdiv内で絶対的であるため、移動したり、上記のようなメカニズムを介してユーザーがサイズを操作したりできます。ただし、ローテーションは雌犬になり、ここではphpgd-libraryまたはimagemajikを使用する必要があります(個人的にはローテーションをダンプします)。これは単純な作業ですが、時間がかかります。画像操作へのユーザーインターフェイスは扱いにくいものです。この出力が画面からの印刷用である場合、サーバー側でさらに操作する必要はありませんが、データの位置関係(1/2 kb)をマスクするために画像を保存するだけです...
答え :
解決策:
うん。 javascriptは、このようなインタラクティブなことを行う方法です。これは、単純なスクリプトといくつかのPNGを使用して簡単に実行できることがわかります(ただし、回転のために何か創造的なことをしなければならない場合があります)。 PHPは保存にのみ必要です。
編集:実際、私が考えると、HTML5キャンバスアプローチが最適です。変換やピクセル操作の方法がたくさんあり、クライアント側で画像を保存することもできます。 HTML 5はすべてのブラウザ(基本的にIEを除くすべて)でサポートされているわけではないことを覚えておいてください。 ( HTML 5キャンバス仕様)
drawImage
メソッドは、探しているものです。
(仕様から引用)
void drawImage(HTMLImageElementイメージ、float dx、float dy、オプションのfloat dw、float dh);
つまり、HTMLには、ユーザーの画像を描画するキャンバス要素が含まれます。
<canvas id="canvasElement" width="xx px" height="xx px">
<!-- What to display in browsers that don't support canvas -->
<p>Your browser doesn't support canvas</p>
</canvas>
次に、JavaScript:
var view;
varコンテキスト;
var userPhoto = new Image;
userPhoto.src = "uploaded.jpg";
//これらをUI設定で更新します
var position = {x:x、y:y};
var scale;
var回転;
関数init(){
//ページの読み込み時にこれを1回実行します
view = document.getElementById( "canvasElement");
context = view.getContext( "2d");
}
関数update(){
//画像のサイズ、位置、回転を更新するたびにこれを実行します
context.clearRect(0、0、view.width、view.height);
//XとYをスケーリングします
context.scale(scale、scale);
//回転(度をラジアンに変換)
context.rotate(rotation / 3.14159 * 180)
//XとYに画像を描画します
context。drawImage(userPhoto、position.x、position.y)
}
HTML 5 Canvasは非常に強力であるため、この方向に進むと、画像に対して実行できることが他にもたくさんあります。ただし、別の実行可能な解決策は、どこでもサポートされているフラッシュを使用することです。ただし、将来の方法としてHTML 5をお勧めします( Steve Jobs:Thoughts on Flash )。
答え :
解決策:
jCropライブラリ(jQuery)を見てください。やりたいことを実行するのに十分な調整ができるかもしれません。
http://deepliquid.com/content/Jcrop.html (明らかにいくつかのデモを提供しています)
同様の質問
私たちのウェブサイトで同様の質問で答えを見つけてください。