Thiên Thái Blog

Kết thúc bài trước, chúng ta đã hoàn thành khá xuất sắc phần upload hình ảnh trong CI, dựa vào library upload đó chúng ta hoàn toàn có thể upload hình ảnh từ máy tính lên web server , cũng như có thể tạo ra những ràng buộc về kích thước hình ảnh, file đó có hợp lệ hay không, dung lượng tấm hỉnh tối thiểu là bao nhiêu mb. Như vậy là chưa đủ, khi các bạn bắt tay vào xây dựng hoàn chỉnh một ứng dụng website sẽ phát sinh ra một số vấn đề nửa, ví dụ như làm thế nào để tạo những cái hình nhỏ hơn, thay thế cho hình đại diện trong từng sản phẩm, bời vì không thể nào nén tấm hình lớn lại, đều đó làm cho tốc độ load rất là chậm, thế nên chúng ta cần phải tạo ra các hình nhỏ mà mọi người hay gọi nó là hình thumbnail, để làm được điều tôi vừa nói thì chúng ta sẽ cùng nhau tìm hiểu khái niệm library image trong codeigniter.

Giới thiệu library Image:

Với library image thì chúng ta hoàn toàn có thể làm được những gì nào?

1/ Resize Image : Từ hình mặc định được upload lên sẽ cắt nhỏ thành hình thumbnail.
2/ Image Crop: Làm việc với thao tác này tức là mình sẽ cắt hình.
3/ Image Rotate: Làm việc với thao tác là xoay hình ảnh.
4/ Image Watermark: Chèn logo hoặc đoan text bất kì vào tấm hình.

Thực tế thì 2 phương thức mà chúng ta thường xài nhiều nhất chính là resize & watermark, đối với việc cắt hình với xoay hình thì tôi nghĩ photoshop sẽ làm tốt việc này hơn so với nếu chúng ta dùng PHP để thao tác. Và trong bài này tôi chúng ta sẽ cùng nhiêu tìm hiểu thao tác resize.

Cấu hình library image:

Đầu tiên thì tất nhiên là sẽ phải gọi library với cú pháp.

1	`$this->load->library('image_lib');`

Và phải cần có một số thông tin cấu hình như sau.

$config['image_library'] = 'gd2';
$config['source_image'] = '/path/to/image/mypic.jpg';
$config['create_thumb'] = TRUE;
$config['maintain_ratio'] = TRUE;
$config['width'] = 75;
$config['height'] = 50;

Nếu tôi giải thích hết toàn bộ thuộc tính ở phía trên thì sẽ mất rất nhiều time của các bạn, nên tôi chi tập trung nói về các thuộc tính quan trọng mà các bạn cần phải hiểu rõ về nó trong quá trình làm việc với library image. thuộc tính $config['image_library'] chính là một dạng library image đặc biệt và chúng ta có rất nhiều library giống như thế,ví dụ GD, GD2, ImageMagick, NetPBM, tuy nhiên thông dụng và phổ biến nhất vẫn là GD2, và bản thân library này cũng cấu hình mặc định là GD2 rồi đấy, ngoài ra chúng ta còn phải chỉ ra đường dẫn tấm hình ban đầu mà chúng ta đã upload lên, bởi vì chúng ta cần phải tạo ra hình nhỏ với thuộc tính $config['source_image'] , còn có thiết lập cho chất lượng tấm hình đó có thay đổi hay không.

Sau khi cấu hình đầy đủ các thông tin cần thiết, các bạn phải tiến hành gọi lệnh thực thi thao tác resize hình ảnh gì đó bằng cú pháp sau.

1	`$this->image_lib->resize();`

Và sau đây chúng ta sẽ có một ví dụ nho nhỏ, giúp các bạn hình dung vấn đề tốt & hiệu quả hơn là cứ đi tìm hiểu lý thuyết khô cằn.

Thực hành resize với library image:

Tôi sẽ sử dụng lại controller upload mà tôi đã làm ở bài trước, vì để có thể resize được thì bắt buộc phải upload được tấm hình lên web server.

<?php
class Upload extends CI_Controller{
    public function __construct(){
        parent::__construct();
        $this->load->helper(array("form", "url"));
    }
      
    public function index(){
        $data['errors'] = '';
        $this->load->view("upload_view", $data);
    }
      
    public function doupload(){
        if($this->input->post("ok")){
            $config['upload_path'] = './uploads/';
            $config['allowed_types'] = 'gif|jpg|png';
            $config['max_size'] = '900';
            $config['max_width']  = '1024';
            $config['max_height']  = '768';
            $this->load->library("upload", $config);
            if($this->upload->do_upload("img")){
                echo 'Upload Ok';
                    $check = $this->upload->data();
                    echo "<pre>";
                    print_r($check);
                    echo "</pre>";
            }else{
                $data['errors'] = $this->upload->display_errors();
                $this->load->view("upload_view", $data);
            }
        }
    }       
}

Khi đã upload thành công tức là ở ngay vị trí $this->upload->do_upload("img") thì chúng ta sẽ có một số thao tác cũng nhưng muốn resize hình ảnh, chúng ta sẽ cấu hình thông số ngay tại vị trí này, đầu tiên sẽ phải load library imge ra, sau đó tiến hành cấu hình thông tin cho nó. do chúng ta cần phải có tên gốc của tấm hình mới có thể resize được , tôi dùng phương thức $check = ['file_name'] nối chuỗi phía sau đường dẫn tấm hình, sau đó tôi sẽ cho độ rộng tấm hình khi resize sẽ là 150 và chiều cao của nó là 120, sau khi hoàn tất các thông số trên thì sẽ phải nạp tất cả thông tin này bằng cú pháp $this->image_lib->initialize($config) , sau đó chúng cần phải gọi lệnh thực thi thao tác resize với cú pháp $this->image_lib->resize(), với hàm này nó sẽ giúp chúng ta cắt hình lớn sang hình nhỏ và thỏa mãn toàn bộ yêu cầu mà chúng ta đã khai báo ở phần thông tin cấu hình.

public function doupload(){
        if($this->input->post("ok")){
            $config['upload_path'] = './uploads/';
            $config['allowed_types'] = 'gif|jpg|png';
            $config['max_size'] = '900';
            $config['max_width']  = '1024';
            $config['max_height']  = '768';
            $this->load->library("upload", $config);
            if($this->upload->do_upload("img")){
                echo 'Upload Ok';
                    $check = $this->upload->data();
                    echo "<pre>";
                    print_r($check);
                    echo "</pre>";
                    $this->load->library("image_lib");
                    $config['image_library'] = 'gd2';
                    $config['source_image'] = './uploads/'.$check['file_name'];
                    $config['create_thumb'] = TRUE;
                    $config['maintain_ratio'] = TRUE;
                    $config['width']     = 150;
                    $config['height']   = 120;
                    $this->image_lib->initialize($config);
                    $this->image_lib->resize();
            }else{
                $data['errors'] = $this->upload->display_errors();
                $this->load->view("upload_view", $data);
            }
        }
    }

Kiểm tra bằng cách chạy link localhost/citest/index.php/upload, sau đó upload bất kì tấm hình nào đó và vào folder uploads xem điều gì sẽ xảy ra nhé. Ví dụ ở đâu tôi upload tấm hình lighhou.jpg, và lúc kiểm tra tôi thấy ngoài hình gốc là lighthou thì còn xuất hiện thêm file lighthou_thumb.jpg, nó sẽ dựa vào độ rộng hoặc độ cao của tấm hình và xem xét cân đối khi thực hiện thao tác resize.

Lý do tại sao chúng ta phải sử dụng hình thumbnail, xin thưa nếu một trang web mà chỉ sử dụng tấm hình gốc ban đầu sẽ làm cho website của bạn load rất chậm, dung lượng của hình gốc là rất nặng, và chúng ta có hàng chục tấm hình cho sản phẩm, mà sản phẩm nào cũng phải load hình ảnh gốc đại diện thì rõ ràng website của các bạn sẽ load rất là chậm. Đó là lý do chúng ta buộc phải sử dụng hình ảnh thumbnail để giảm thiểu thiệt hại băng thông cho website.

Full code resize image:

Controller

<?php
class Upload extends CI_Controller{
    public function __construct(){
        parent::__construct();
        $this->load->helper(array("form", "url"));
    }
      
    public function index(){
        $data['errors'] = '';
        $this->load->view("upload_view", $data);
    }
      
    public function doupload(){
        if($this->input->post("ok")){
            $config['upload_path'] = './uploads/';
            $config['allowed_types'] = 'gif|jpg|png';
            $config['max_size'] = '900';
            $config['max_width']  = '1024';
            $config['max_height']  = '768';
            $this->load->library("upload", $config);
            if($this->upload->do_upload("img")){
                echo 'Upload Ok';
                    $check = $this->upload->data();
                    echo "<pre>";
                    print_r($check);
                    echo "</pre>";
                   $this->load->library("image_lib");
                    $config['image_library'] = 'gd2';
                    $config['source_image'] = './uploads/'.$check['file_name'];
                    $config['create_thumb'] = TRUE;
                    $config['maintain_ratio'] = TRUE;
                    $config['width']     = 150;
                    $config['height']   = 120;
                    $this->image_lib->initialize($config);
                    $this->image_lib->resize();
            }else{
                $data['errors'] = $this->upload->display_errors();
                $this->load->view("upload_view", $data);
            }
        }
    }       
}

View

<?php
$upload=array(
    "name" => "img",
    "size" => "25",
);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Freetuts.net</title>
</head>
  
<body>
    <?php
        if($errors != ""){
            echo $errors;
        }
        echo form_open_multipart(base_url()."index.php/upload/doupload");
        echo form_label("Avartar: ").form_upload($upload)."<br />";
        echo form_label(" ").form_submit("ok", "Upload");
        echo form_close();
    ?>
</body>
</html>

Kết thúc bài học:

Ở bài tiếp theo chúng ta sẽ làm quen với một thao tác trong library image , chính là watermark, hy vọng qua bài viết này sẽ giúp các bạn dễ dàng hơn trong việc tối ưu việc upload hình ảnh, đây là một trong những bước khá là quan trọng trong quá trình xây dựng bất kì website nào đó.