June 7, 2013

FuelPHPで画像を選択、表示、範囲選択、アップロード、切り取った画像の表示を画面遷移なしでやる

そのままの流れで以下の続きを書いちゃいます。
http://madroom-project.blogspot.jp/2013/06/fuelphp.html

尚、動かすのに最低限な内容なので、アップロードされるファイルは画像が大前提だったり、トークンやアップロードされたファイルのチェック等は割愛していますm(_ _)m
(それでも結構長くなってしまいますね。。。)

--

Jcropをダウンロードします。
http://deepliquid.com/content/Jcrop.html

解凍したディレクトリを
public/assets/jcrop
として配置します。

コントローラは以下のようになります。

classes/controller/file.php
<?php

class Controller_File extends Controller
{
 
    public function action_index()
    {
        Asset::add_path('assets/jcrop/css/', 'css');
        Asset::add_path('assets/jcrop/js/', 'js');

        return Response::forge(View::forge('file/index'));
    }
 
    public function action_upload()
    {
        Upload::process(array('path' => APPPATH.'tmp'));
        Upload::save(0);

        $file = Upload::get_files(0);

        $path = APPPATH.'tmp/'.$file['saved_as'];

        $x = Input::post('x');
        $x2 = Input::post('x2');
        $y = Input::post('y');
        $y2 = Input::post('y2');

        Image::load($path)->crop($x, $y, $x2, $y2)->save($path);
        
        return $file['saved_as'];
    }

    public function action_image($file = null)
    {
        Image::load(APPPATH.'tmp/'.$file.'.'.Input::extension())->output();
    }

}
ビューは以下のようになります。

views/file/index.php
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<?php echo Asset::css('jquery.Jcrop.min.css'); ?>
<?php echo Asset::js('jquery.Jcrop.min.js'); ?>
</head>
<body>
     
<input id="file" type="file" />
<button id="upload" disabled="disabled">Upload</button>
<img id="selected_img" />
<img id="uploaded_img" />

<script>
var file;
var img = $('#selected_img');
var coordinate;

$('#file').change(function(e) {
    file = e.target.files[0];

    var fileReader = new FileReader();

    fileReader.readAsDataURL(file);

    fileReader.onload = function(e) {
        img.attr('src', e.target.result);

        img.Jcrop({
            onSelect: function(c) {
                coordinate = c;
                $('#upload').attr('disabled', false);
            }
        });
    };
});
$("#upload").click(function() {
    $(this).attr('disabled', true);
 
    var formData = new FormData();
    formData.append('file', file);
    formData.append('x', coordinate.x);
    formData.append('x2', coordinate.x2);
    formData.append('y', coordinate.y);
    formData.append('y2', coordinate.y2);

    $.ajax({
        url: '<?php echo Uri::create('/file/upload'); ?>',
        type: 'post',
        data: formData,
        processData: false,
        contentType: false,
        success: function(file) {
            $('#uploaded_img').attr('src', '<?php echo Uri::create('file/image/'); ?>' + file);
        }
    });
});
</script>
 
</body>
</html>

* JS: 画像を選択後、選択した画像が表示されます。
* JS: 画像の範囲選択をすると、アップロードボタンが押せるようになります。
* JS: アップロードボタンを押すと、非同期で画像をアップロードします。
* PHP: FuelPHP側で切り取って保存、ファイル名を返します。
* JS: 返されたファイル名から画像を表示します。

P.S.
IE9では動かないらしいです。(確認はしてないです。)その他、ブラウザによって動かない可能性は否定出来ません。(Chromeで確認しています。)

あと、input type fileにはBootstrapのデザインは当たりません。デザインするなら、以下のように、input type fileは非表示にしつつ、別のボタンでclickイベントを発生させる必要があります。
<input id="file" type="file" name="xxx" style="display: none;" />
<button class="btn" onclick="$('#file').click();" type="button">Change image</button>

No comments:

Post a Comment