Ajax+PHP+jQuery 画像のスクリーンショットのアップロード

1. 機能分析

ユーザーは、「アップロード」ボタンをクリックした後、画像プレビューで画像をプレビューし、「トリミング」ボタンをクリックすると、トリミングされた画像が確認されて表示されます。 「トリミング結果」エリア トリミング後の効果。

(注: アップロードされたファイルは「/uploads」フォルダーに保存され、スクリーンショットの結果は「/avatar」フォルダーに保存されます)

効果のプレビュー:

2. 解決策

1. プラグインの選択

• jQuery: これは公式 Web サイトからダウンロードできる必須のプラグインです

http://docs.jquery.com/Downloading_jQuery

• imgAreSselect: これはクライアント上の画像領域を選択するために使用されます

http://odyniec.net/projects/imgaraselect/

• uploadify: ファイルアップロード機能を実装し、複数のファイルアップロードをサポートし、非常にカスタマイズ可能です。

http://www.uploadify.com/download/

上記のプラグインはクライアント上で使用しています。実際、私もこのプログラムでPHPを書く際にいくつかのプラグインを使用しています。実は「画像の切り抜きとアップロード」を書いたのは、「PHP Rapid Development Toolbox」を読んで自分でも実践してみたかったからです。この本には Web サイト (http://www.pluginphp.com/) があり、そこには本全体のコードが含まれており、各プラグインには対応するデモがあり、非常に優れています。使用される PHP プラグインは次のとおりです。

• PIPHP_UploadFile.php: これはファイルアップロード機能を備えたphpファイルです

http://www.pluginphp.com/plug-in11.php

• PIPHP_ImageCrop.php: このphpファイルには画像をトリミングする機能があります

http://www.pluginphp.com/plug-in15.php

2. クライアントとサーバー間の対話図

理解しやすいように、最初に相互作用図をここに置きます。緑色の部分はクライアント側の主な手順であり、ピンク色の部分はサーバー側の主な手順であり、サーバーとクライアント間の対話は AJAX を通じて行われます。ほとんどの操作はクライアント側で実行され、サーバー側とクライアント間の通信は単純な JSON データのみであるため、ユーザー エクスペリエンスが非常に高いことがわかります。

スクリーンショット 1 クライアントとサーバー間の対話図

3. クライアントファイル

ユーザーに表示されるのは HTML ページです。CSS の知識を学び、定着させるために、DIV+CSS を使用して次のようなフロントエンド ページを構築しました。スクリーンショット 2 を参照してください。

スクリーンショット 2 フロントページ

クライアントに関係するファイルは主にindex.htmlで、他のプラグインファイルもこのファイル内で参照することになるので、クライアント側のhtmlファイルは一つと言えます。

さらに、ここではクライアントとブラウザ間の対話について主に説明するため、CSS の側面については省略します。ここには 部分から始まる HTML コードのみがリストされています。

imgareaselect-default.css" />

layout.css" />

uploadify.css" type="text/css" rel="スタイルシート" />

写真の切り取りとアップロード

主にいくつかのプラグインファイルを参照していることがわかります。上記のファイル（CSSファイルとjsファイルを含む）は私が与えたリンクからダウンロードできますが、スタイルシートlayout.cssは私が書いたスタイルシートです。あなた自身のCSSの知識に基づいて書くことができます。

次のステップは本体部分です。このように表示すると、コードが少し乱雑になる可能性があります。それができない場合は、DreamWeaver などの IDE などのツールを使用することをお勧めします。 Firefox の「ソースコードの表示」を使用して表示することもできます。 (Firefox は優れたブラウザであるだけでなく、優れたデバッガでもあります!)

便宜上、「ナビゲーションバー」やフッターの著作権表示などの装飾を削除し、必要なHTMLコードのみを記載しました。

写真のアップロード

写真をアップロード

画像プレビュー

収穫結果:

クロッププレビュー:

div id="プレビュー">

上面我用颜色区分开主要DIV区，这三块分别代表"上传图片区"、"大图展示区"、"截图结果区"与"选择预览区"。其中三个粗体部分是带有ID属性的空DIV，用来放图片用的。（到时时候动态加载图片到这些DIV中），因此这段代码形成的HTML框架如截图 2所示。（蓝色线条是block元素边界，此效果较是由火狐的插件制作而成）：

截图 3 页面大体框架

基本的准备工作已经完成，待会儿再继续在这个框架上添加代码。咱们先介绍一下服务器上的PHP是怎么个情况。

 

4、服务器文件

服务器上主要用到两个PHP文件，一个用来处理上传图片的process.php，另外一个则是处理图片截图用的crop.php。不过，process.php文件包括插件PIPHP_UploadFile.php，而crop.php中包括PIPHP_ImageCrop.php插件。（这些插件的地址我在上面已经给出了）

＝＝＝＝＝＝＝

process.php主要接收上传图片，设置限制（比如文件的大小与格式），处理一些上传错误等，最后返回给客户端JSON，里面包含了所上传文件的一些信息（比如路径、大小等）；当在客户端点击"上传"按钮的时候，会用异步（AJAX）的方式调用这个php文件。

＝＝＝＝＝＝＝

crop.php主要负责真正裁剪上传的图片，当在客户端返回裁剪的位置后（点击"裁剪"按钮后），以异步方式将数据以JSON的方式传递给服务器，crop.php真正裁剪图片后，将图片另存到网络的目录下，同时返回此图片的存储路径，然后再让客户端显示图片即可

 

三、用到的技术摘要

现在根据上面的交互图继续完善代码。因此我这节会交叉地完善html、js与php代码，并不会单独分开完善，这样在逻辑上会更好理解。

声明：新增的代码部分用粗体表示

 

１、uploadify上传

在html的head部分加入<script>标签，里面开始写主要的处理程序： </script>

…

<script><span style="font-family: 微软雅黑;">　</script>type="text/javascript" 　src="/uploadify/jquery.uploadify.v2.1.4.min.js">

    

　　$(document).ready(function(){

        //uploadify设置

            $('#pic_upload').uploadify({

                'uploader' : '/uploadify/uploadify.swf',

                'script' : 'process.php',        

                'cancelImg' : '/uploadify/cancel.png',

            });

　　}

    

…

上面的代码只是uploadify这一个插件的配置项而已。为了增强用户体验可以详细配置其他选项，这参考这个插件的官方文档：http://www.uploadify.com/documentation/。上面的'script'选项就是选择服务器的处理脚本，我们这里就使用process.php了。上传文件到服务器后会让服务器自动调用这个程序。那么客户端怎么知道服务器的process.php调用完了呢？如何获取process.php反馈回来的信息呢？——其实uploadify它提供了一个"触发"选项onComplete，就是用来处理服务器的反馈信息的，我们稍后再写这个选项的内容，先看看process.php是返回哪些内容的呢。

2. process.php フィードバックアップロード情報

process.php のタスクは、JSON データをブラウザに返すことです (JSON が何であるかについては、他のチュートリアルを参照してください。JSON を「キーと値」のペアとして考えてください。これは、データの送信と読む）。 PHP では、通常、まずデータが配列に編成され、次に json_encode() を使用してデータが JSON に変換されます。それでは、process.php はどのような種類のデータをブラウザに返すべきでしょうか?

• ファイルが正常にアップロードされたかどうか —> メッセージ
• ファイルアップロードステータスコード —> コード
• ファイルアップロード用のストレージパス —> path
• 画像の幅 —> 幅
• 写真の高さ —> 高さ
• 写真のズーム率 —> スケール
• 写真の名前 -> 名前

画像の拡大率を設定する理由は、ユーザーがアップロードした画像のサイズが大きすぎる場合（800x８００など）、ブラウザ内のDIVが「引き伸ばされて」レイアウトが崩れてしまうためです。混乱した。したがって、ブラウザーが画像を表示するときは、どの辺の長さも 400px を超えてはいけないという制限を設けています。それ以外の場合は、表示時に同じ比率で拡大縮小されます。 (たとえば、上の 800x800 の画像は 400x400 として表示され、ブラウザもスケールを 0.5 に設定します)。

さらに、この php ファイルは、アップロードされたファイルを「識別」し「移動」するために使用される PIPHP_UploadFile.php プラグインを呼び出します。

process.phpのプログラムは以下の通りです。

require_once(dirname(__FILE__)."/../PIPHP_UploadFile.php");

$response=array(

「メッセージ」=>「不明なアップロードエラー」、

'パス'=>'',

‘code’=>-4, //結果コードをアップロードします、0は成功を意味します、-1は失敗を意味します

「幅」=>100、

「身長」=>100、 ​​​​

'名前'=>'' );

if (!empty($_FILES))

{

$name='写真';

$uploadFile='アップロード/';

$maxLen=9*1024*1024;

$result=PIPHP_UploadFile($name,$uploadFile,$maxLen);

$response['code']=$result[0];

//

成功の簡単なレポート

if($result[0]==0) {

$response['message']='

アップロード成功! ';

//$response['message']=$result[2];

$response['path']=$result[1];

$response['name']=$result[2];

//画像の高さと幅をget $fileName=iconv("utf-8","gb2312",$result[2]);

list($width,$height)=getimagesize($_SERVER['DOCUMENT_ROOT'].$uploadFile.$fileName);

$response['width']=$width;

$response['height']=$height;

}

その他

switch($result[0])

case -1: $response['message']="

アップロードに失敗しました"; case -2: $response['message']="

ファイルの種類が間違っています";break; : ケース -3: $ Response ['Message'] = " ファイル サイズが制限を超えています";

デフォルト: $response['message']="エラーコード: $result[0]";

}

}

他{

$response['message']="

ファイルのアップロード中にエラーが発生しました!

"."";

}
$json_str=json_encode($response);

echo $json_str;

?>

実際、このプログラムの表示は if 判定文のせいで少し大きくなっていますが、実際にはロジックは非常に単純です。いずれの場合も、このプログラムは上記で説明した画像アップロード情報を返します ($json_str 変数に入れます)。

３. uplodify の設定を改善し続けます

上記のことからわかるように、process.php は画像のパスを含む $json_str 変数を返し、ブラウザーで画像を表示できるようになります。 (この時に表示される画像はすでにサーバー上にあるので注意してください)

次に、uploadify の「onComplete」オプションを追加します。これは、process.php がデータを返したときにブラウザーに何を行うかを指示します。

$('#pic_upload').uploadify({

'アップローダー' : '/uploadify/uploadify.swf',

'スクリプト': 'process.php',

'cancelImg' : '/uploadify/cancel.png',

'onComplete': function(event, ID, fileObj, response, data) {

json_str=JSON.parse(response);

var maxSize=400;

var width=json_str.width

;

var height=json_str.height;

varscale=json_str.scale

;

If(json_str.code == 0)

$('#uploadInfo').html(json_str.message+'

平均アップロード速度: '+ data.speed。 toFixed(2) + 'Kb/s');

// 画像のサイズを変更する

if (json_str.width > maxSize || json_str.height >maxSize){ if（json_str.width> json_str.height）

高さ = maxSize / json_str.width * json_str.height;

json_str.scale= maxsize / json_str.width;

高さ = maxSize

;

width = maxSize / json_str.height * json_str.width

;

json_str.scale = maxSize / json_str.height;

stosスルー

// プレビュー画像を同時に挿入

$('#preview').empty().html('').css({ オーバーフロー:'非表示'、

幅: '150px' から、 高さ:'150px'

else{

#$ ('#Uploadinfo').HTML ('

エラー コード ['+json_Str.Code+']: '+json_Str.message+'

');

}、

});

…

ここでのプログラムは主に 2 つのことを行います。まず、アップロードされた画像 (最初のカラー マーク) を表示します。ただし、画像が大きすぎる場合は、スケーリングされた画像を表示し、スケーリング率をスケール変数に保存します。次に、(2 番目のカラー マークで) トリミング プレビューを初期化します (jQuery メソッドを使用)。これは単なる初期化であり、トリミング プレビューを動的に表示するわけではないことに注意してください。動的表示部分は imgAreaSelection プラグインを使用して完了する必要があります。このプラグインについて話しましょう。 4. imgAreaSelection を使用してスクリーンショット ポイントの座標を取得します

imgAreaSelection の使用方法については、公式 Web サイトを確認してください。ここでは詳しく説明しません。

画像は動的に読み込まれるため、このプラグインを事前に画像に適用することはできません。画像がアップロードされて表示されたら、「Load Cropping Box」ボタンをクリックして、このプラグインを画像にバインドするボタンを設定できます。そこで、まず HTML にボタンを追加して、「画像プレビュー」DIV を読み込みます。

画像プレビュー

クロップフレームを読み込み中

然后在head中的<script>标签中写点击事件处理程序：</script>

$(document).ready(function(){

        $('#pic_upload').uploadify({

                …

        });

        //加载裁剪框    

        $('#initCrop').click(function(e){

                ias=$('#oriImage img').imgAreaSelect({instance:true});

                ias.setOptions({ aspectRatio: '1:1', handle:true,

                                 hide:false,

                                 onSelectChange:preview2,

                                 onSelectEnd: function (img, selection) {

                                    json_str.x1=selection.x1;

                                    json_str.y1=selection.y1;

                                    json_str.cropWidth=selection.x2-selection.x1;

                                    json_str.cropHeight=selection.y2-selection.y1;

                                 },

                                });                    

        });

}

这里的onSelectChange选项就是当改变裁剪框时所要调用的函数，这里使用preview2函数名作为值，这个函数我是另外写在下面的，当然你也可以使用匿名函数的。我是为了强调这个函数，所以写成实名函数：

//图像预览函数

    function preview2(img, selection) {

        realWidth=json_str.width * json_str.scale;

        realHeight=json_str.height * json_str.scale;

        sizeWidth=150;sizeHeight=150;

        var scaleX = sizeWidth / selection.width ;

        var scaleY = sizeHeight / selection.height ;

    

        $('#preview img').css({

            width: Math.round(scaleX * realWidth) + 'px',

            height: Math.round(scaleY * realHeight) + 'px',

            marginLeft: - Math.round(scaleX * selection.x1) + 'px',

            marginTop: -Math.round(scaleY * selection.y1) + 'px'

        });

    };

这个函数的功能是实现动态显示截图区域图像的，这个区域大小是150x150像素的一个小框，这里它动态加载css，注意要跟上一节中的uploadify中onComplete中预加载此截图框要联系起来。那里它是这么设置的：

//同时插入预览图

             $('#preview').empty().html('').css({

                    overflow:'hidden',

                    width:'150px',

                    height:'150px'

             });                         

        }

overflow:hidden は、画像内の 150x150 ピクセルを超える画像を非表示にすることを意味することに注意してください。実際、このメソッドは から借用しています: http://odyniec.net/projects/imgaraselect/examples-callback.html

さらに、このプラグインの onSelectEnd オプション設定: マウスがドラッグ ボックスから離れると、トリミング領域の左上隅の座標とトリミング領域の長さと幅が json_str 変数に保存されます。そして Crop.php 関数に送信されます 。

５. json_strデータをcrop.phpに転送します

jQuery の ajax() メソッドを使用して、json_str 変数をサーバーに転送します。まず、HTML に「切り抜き」ボタンを追加します。

作物" />

ここでは

要素を使用しましたが、jQuery の強力な ajax() メソッドを使用しているため、これは実際には必要ありません。

ユーザーがトリミングしたいと判断した場合、このボタンを押すと ajax() メソッドが呼び出されます。 head セクションの <script> 要素にハンドラーを記述します。 </script>

//クロップフレームをロード

$('#initCrop').click(function(e){

…

});

//アクションをトリミングし、データをサーバーに送信し、同時にajax画像を返します

$("#crop").click(function(e){

If(!(typeof json_str == '未定義'))

jsondata='data='+JSON.stringify(json_str);

タイプ: 「POST」、

; データについて: jsondata, // $ ('#cropdata'). Serialize (),

});

//画像プレビュー機能

関数プレビュー 2(画像、選択) {…}; 上記のコードは、crop.php がファイル パスを送信するのを待機しています。ファイル パスが送信されると、「success」オプションが設定された関数によって、ID が「cropResult」の DIV に画像が表示されます。

６、crop.phpはアップロードされた画像を本当にトリミングします

この Crop.php ファイルの機能も非常にシンプルで、ブラウザーから返された json_str 変数を使用します。この変数には、スクリーンショットに必要な開始点の座標と、PIPHP_ImageCrop.php が含まれています。次に、プラグインが呼び出されて、画像の実際の編集が実行されます。次に、切り取った画像を別のフォルダーに保存し（私はアップロードしたファイルをuploadsフォルダーに、スクリーンショットの結果をavatarフォルダーに保存します）、対象フォルダーのパスをブラウザに返して閲覧します。切り取った画像がディスプレイに表示されます。

このプログラムのソースコード: require_once('../PIPHP_ImageCrop.php');

$json_str=json_decode($_POST['data']);

$x=$json_str->x1;

$y=$json_str->y1; $scale=$json_str->scale;

$cropWidth=$json_str->cropWidth;

$cropHeight=$json_str->cropHeight;

$path=$json_str->パス;

$filename=$json_str->名前;

$tofilename=iconv("utf-8","gb2312",$filename);

    

$realX=$x/$scale;

$realY=$y/$scale;

$realWidth=$cropWidth/$scale;

$realHeight=$cropHeight/$scale;

    

$cropedImage=PIPHP_ImageCrop('http://'.$_SERVER['SERVER_NAME'].'/'.$path, $realX, $realY, $realWidth, $realHeight);

    

$targetDir='アバター/';

$targetFile=$targetDir.$tofilename;

    

imagejpeg($cropedImage,$_SERVER['DOCUMENT_ROOT'].$targetFile);

    

echo $targetDir.$filename.'?'.time();