ゆるキャラのペパクラ情報サイトを改善する(3)画像をアップロードする

0
    JUGEMテーマ:ホームページ作成

    えーと今回は、予告から順番を入れ替えて、先に画像登録処理について解説することにします。

    1.画像のアップロード&受け取り方
    まず画像のアップロードですが、これはフォームの「file」を使用します。
    <form action="ypmod.php" method="post" enctype="multipart/form-data">
    <p>写真:<input type="file" name="photodata" /><br/>
    &nbsp;&nbsp;&nbsp;&nbsp;(写真は自動的に120×80ピクセルに縮小されます。)</p>
    
    とこんな感じです。ポイントは1行目でenctype="multipart/form-data"を指定するところです。これで

    こんな感じのフォームが表示され、「参照」をクリックするとアップロードしたいファイルを指定できます。
    ここでファイルを指定してフォームをPOSTで送信すると、ファイルがテンポラリーフォルダに置かれ、$_FILESという変数にファイルの情報が入力されて送信されます。その中身は、
    $_FILES["photodata"]["name"]:ファイル名
    $_FILES["photodata"]["type"]:ファイルの種類(image/jpg等)
    $_FILES["photodata"]["tmp_name"]:仮置き場所のパス
    $_FILES["photodata"]["error"]:エラー有無
    $_FILES["photodata"]["size"]:ファイルサイズ
    
    となっています。これを受け取るだけでしたら、
    $path=$_FILES["photodata"]["tmp_name"];
    $photodata=file_get_contents($path);
    
    で受け取ることができます。


    2.画像の縮小方法
    フォームから送られたデータを、規定のサイズに縮小します。今回は検索結果の一覧表に表示されるサムネール画像ですので、120×80の大きさに縮小したいと思います。
    縮小には2つの種類があります。

    (1)短い方に合わせる
    120×80ですから3:2の比になりますが、これより比の小さい方に合わせて長すぎる方はトリミングする、という方法です。ブログの記事一覧などでアイキャッチ画像の一部を表示させて目を引きたいような場合に良く使われますが、これはクリックすれば全体の画像が見えるようになっているのが前提だと思います。

    (2)長い方に合わせる
    逆に3:2の比より長い方にあわせて縮小する。例えば300×300の画像などは80×80に縮小して、120×80の枠をはみ出ないようにする。画像の形がばらばらになってしまいますが、画像が切り取られてしまうことはありません。

    今回は後者で行こうと思います。
    では早速コードを。
    $path = $_FILES["photourl"]["tmp_name"];
    $imginfo = getimagesize($path);
    switch ($imginfo[2]){
      case 1: $im = imagecreatefromgif($path); break;
      case 2: $im = imagecreatefromjpeg($path); break;
      case 3: $im = imagecreatefrompng($path); break;
      default: // エラー処理
        $errlrflg=1; $errlrflg2=2; break;
    }
    $wratio = $imginfo[0]/120;
    $hratio = $imginfo[1]/80;
    if($wratio>=$hratio){
      $new_width=120;
      $new_height=round($imginfo[1]/$wratio);
    }else{
      $new_width=round($imginfo[0]/$hratio);
      $new_height=80;
    }
    $new_image = imagecreatetruecolor($new_width, $new_height);
    imagecopyresampled($new_image, $im, 0, 0, 0, 0, $new_width, $new_height, $imginfo[0], $imginfo[1]);
    imagejpeg($new_image,$_FILES["photourl"]["tmp_name"],100);
    $photodata = file_get_contents($path);
    
    1行目で、先ほどの例の通り、パスを取得しています。
    2行目で、今度は画像ファイルの情報を取得します。内容は
     $imginfo[0]:画像の幅
     $imginfo[1]:画像の高さ
     $imginfo[2]:画像の種類、1:gif, 2:jpeg, 3:png
    となっています。
    4〜6行目でこの画像の種類に応じて、imagecreatefrom***関数で画像リソースを作成しています。
    10〜18行目では、画像の縦横の比をチェックして、120×80に収まるような縦横の長さを設定しています。
    19行目で、この新たなサイズの空の画像をまず作ります。
    20行目で、元の画像をサンプリングして新しい画像にはめ込んでやります。
    21行目は、作成した画像をjpeg形式で一旦テンポラリーファイルに落とします。
    そして最後にこのファイルを文字列に読み込んでいます。


    3.画像の形式変換方法
    この手法を応用すると、4行目の、imagecreatefromjpeg(png,gif)で画像リソースを作成し、これをセーブするときに21行目のようにimagejpeg(png)とすることで自在に画像の形式変更が可能です。


    4.画像のデータベースへの登録方法
    画像をデータベースに登録する場合、次の手順になります。
    (1)準備:データベースに「BLOB」形式のカラムを準備しておく。
    (2)画像ファイルを、file_get_contents()関数で文字列に読み込む。
    (3)queryのひな型をprepareして置き、
    (4)文字列に読み込んだ画像ファイルをバインド。
    $stmt->bindValue(':photo',$photodata, PDO::PARAM_LOB);

    これでOKです。


    今回はここまで。次回は本命のデータベース修正スクリプトを作成していきます。

    (4)DB修正スクリプトの作成
    ・ypmod.phpの内部構成
    ・ypmod.phpの作成
    (5)削除スクリプトの作成
    ・ypdelete.phpの作成

     


    コメント
    コメントする








       

    calendar

    S M T W T F S
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    << November 2019 >>

    アクセスカウンタ

    合計:
    今日:
    昨日:

    selected entries

    categories

    archives

    recent comment

    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      小田きく江
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      てちくん
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      suraugi
    • いそべぇのペーパークラフトを作る(初級編)(12)
      てちくん
    • いそべぇのペーパークラフトを作る(初級編)(12)
      だべえ
    • noomでマイナス12kgのダイエットに成功!
      Yoko

    recommend

    recommend

    recommend

    ドール デザートメーカー ヨナナス901
    ドール デザートメーカー ヨナナス901 (JUGEMレビュー »)

    結構高いんです、でも欲しいんです!

    links

    profile

    書いた記事数:173
    最近の更新日:2017/01/30

    search this site.

    others

    mobile

    qrcode

    powered

    無料ブログ作成サービス JUGEM

    Google Adsense

    楽天ブックス

    楽天