照片上传,裁剪和保存使用Codeigniter


Photo upload, Crop and Save using Codeigniter

我们正在做一个基于CI框架的社交网络项目。我在网上搜索,但很困惑。如何上传照片,允许用户裁剪照片并使用数据库保存,以便在调用时检索?我用这个作为头像。

在视图:

<?php echo form_open_multipart ('index.php/Main/do_upload'); ?>
<table class="table">
    <tr>
        <td>Title</td>
        <td><?php echo form_input('title'); ?></td>
    </tr>
    <tr>
        <td>Image</td>
        <td><?php echo form_upload('userfile'); ?></td>
    </tr>
    <tr>
        <td></td>
        <td><?php echo form_submit('submit', 'Save', 'class="btn btn-primary"'); ?></td>
        <?php echo form_close(); ?>
    </tr>       
</table>

在控制器:

public function do_upload()
{
    $config['upload_path']          = './uploads/';
    $config['allowed_types']        = 'gif|jpg|png';
    $config['max_size']             = 100;
    $config['max_width']            = 1024;
    $config['max_height']           = 768;
    $this->load->library('upload', $config);
    if ( ! $this->upload->do_upload('userfile'))
    {
        $error = array('error' => $this->upload->display_errors());
        $this->load->view('Material_view', $error);
    }
    else
    {
        $data = array('upload_data' => $this->upload->data());
        $this->load->view('upload_success', $data);
    }
}

同时使用Bluimp多个fileupload (https://blueimp.github.io/jQuery-File-Upload)和Croppr (https://fengyuanchen.github.io/cropperjs/)插件。在Bluimp中,您可以获得足够的代码(在他们的网站中有一个codeigniter类)来处理在codeigniter中上传文件。

请尝试使用cropper js。我用过这个,它很简单,可以满足你的要求

https://github.com/fengyuanchen/cropper

创建一个Image模型并粘贴代码

<?php 
class Image_model extends CI_Model {
 public function __construct()  {
    parent::__construct();
    $this->load->helper('url');
    $this->load->library('upload');
    $this->load->library('image_lib');
}
public function do_resize($filename)
{
    $source_path =  'uploads/' . $filename;
    $target_path =  'uploads/thumb/thumb_'.$filename;
    $config_manip = array(
        'image_library' => 'gd2',
        'source_image' => $source_path,
        'new_image' => $target_path,
        'maintain_ratio' => TRUE,
        'width' => 150,
        'height' => 150
    );
    $this->image_lib->initialize($config_manip);
    $this->load->library('image_lib', $config_manip);

    if (!$this->image_lib->resize()) {
        echo $this->image_lib->display_errors();
        die();
    }
}
public function img_upload()
{
    $config = array(
        'upload_path' => "uploads",
        'allowed_types' => "*",
        'overwrite' => TRUE,
        'max_size' => "5048000", // Can be set to particular file size , here it is 2 MB(2048 Kb)
        'max_height' => "3000",
        'max_width' => "3000"
    );
    $this->upload->initialize($config);
    $this->load->library('upload', $config);
    if($this->upload->do_upload()) {
        $response   =    array('upload_data' => $this->upload->data());
        $this->do_resize($response['upload_data']['file_name']);
    }
    /*else{
        $error              =   array('error'=>$this->upload->display_errors());
        //print_r($error);die(); 
    }*/
  }
}

在控制器中像这样调用这个函数

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 class Post extends CI_Controller {
   public function __construct(){
    parent::__construct();
    $this->load->model('image_model');
    }
   public function add() {
       if(isset($_FILES)){
             $config                =   $this->image_model->img_upload();
             $file_data             =   $this->upload->data();
             $data['feature_image'] =   $file_data['file_name'];
            }
   $lat_id      =       $this->your_model->save($data);
 }