CODEIGNITER 3X
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Bài 11: Tìm Hiểu Library Image Trong Codeigniter

Trong bài này bạn sẽ được học:

  1. Giới thiệu về Library Image
  2. Thao tác & làm việc với nó

Lưu ý:
Tôi sử dụng Codeigniter version 2.1.4.
Tên folder của tôi là citest cho bài viết này.

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.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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.

$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.

$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 đó.

Cùng chuyên mục:

Chia sẻ theme web blog mobile đơn giản (Theme FMB1)

Chia sẻ theme web blog mobile đơn giản (Theme FMB1)

Freetuts Mobile Blog được code trên nền tảng PHP và MySQL, sử dụng Codeigniter Framework.

Bài 19: Rewrite URL trong Codeigniter

Bài 19: Rewrite URL trong Codeigniter

Sau một khoảng thời gian không đụng tới Codeigniter thì hôm nay lại có dịp…

Tìm hiểu quy trình load model trong codeigniter

Tìm hiểu quy trình load model trong codeigniter

Việc load model rất quen thuộc với những bạn sử dụng framwork codeigniter nhưng đôi…

Tự tạo thư viện load widget trong codeigniter

Tự tạo thư viện load widget trong codeigniter

Như các bạn biết mặc định hệ thống của Codeigniter hoạt động theo mô hình…

Hướng dẫn custom bộ core codeigniter

Hướng dẫn custom bộ core codeigniter

Có khi nào bạn đặt câu hỏi có nên sửa các file nằm trong bộ…

Bài 18: Tìm Hiểu Library Shopping Cart trong Codeigniter

Bài 18: Tìm Hiểu Library Shopping Cart trong Codeigniter

Chào mừng các bạn đã quay trở lại freetuts.net. Như vậy ở bài trước chúng…

Bài 17: Xây dựng crud add - update - edit user

Bài 17: Xây dựng crud add - update - edit user

Crud là một thuật ngữ không hề xa lạ với dân lập trình, nó là…

Bài 16: Kỹ thuật master layout trong codeigniter

Bài 16: Kỹ thuật master layout trong codeigniter

Đây là một vấn đề mở rộng mà CI không đề cập trong user guide,…

Bài 15: Tìm Hiểu Helper Language Trong Codeigniter

Bài 15: Tìm Hiểu Helper Language Trong Codeigniter

Trong bài viết này , chúng ta chỉ tìm hiểu ở khái niệm cơ bản…

Bài 14: Tìm Hiểu Helper Text Trong Codeigniter

Bài 14: Tìm Hiểu Helper Text Trong Codeigniter

Nhìn tiêu đề, hẳn các bạn đã đoán ra hôm nay chúng ta sẽ tìm…

Bài 13: Tìm Hiểu Helper Date Trong Codeigniter

Bài 13: Tìm Hiểu Helper Date Trong Codeigniter

Hôm nay chúng ta sẽ tiếp tục tìm hiểu sâu hơn về các helper mà…

Bài 12: Đóng dấu watermark image trong codeigniter

Bài 12: Đóng dấu watermark image trong codeigniter

Đầu tiên xin gửi lời cảm ơn các bạn đã quan tâm và theo dõi…

Bài 10: Tìm hiểu library upload trong codeigniter

Bài 10: Tìm hiểu library upload trong codeigniter

Chào mừng các bạn đã quay trở lại freetuts.net, đã lâu rồi tôi không viết…

Bài 9: Tìm Hiểu Library Form Validation

Bài 9: Tìm Hiểu Library Form Validation

Cho tới bài viết này, chắc hẵn các bạn đều đã biết rõ cách load…

Bài 8: Tìm hiểu Helper Url Và Form Trong Codeigniter

Bài 8: Tìm hiểu Helper Url Và Form Trong Codeigniter

Trong Codeigniter Framework nó chia ra 2 khái niệm đó là helper & library, vậy…

Bài 7: Load Library Pagination Trong Codeigniter

Bài 7: Load Library Pagination Trong Codeigniter

Đây là một library cũng khá là phổ biến, hay được sử dụng trong quá…

Bài 6: Load Library Database Trong Codeigniter

Bài 6: Load Library Database Trong Codeigniter

Tôi sẽ không giới thiệu về library này mà sẽ xoáy sâu vào các thao…

Bài 5: Load Library Session Trong Codeigniter

Bài 5: Load Library Session Trong Codeigniter

Đây là một thư viện khá là quan trọng , trong framework CI (Codeigniter) .…

Bài 4: Load Model Trong Codeigniter

Bài 4: Load Model Trong Codeigniter

Trong Codeigniter để kết nối với Database chúng ta phải cấu hình thông tin cho…

Bài 3: Load View Trong Codeigniter

Bài 3: Load View Trong Codeigniter

Trong Codeigniter tất cả các Views đều được đặt trong thư mục application/views. Các bạn…

Top