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

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 loạt bài CI căn bản của tôi, dạo này sức khỏe của tôi không tốt nên tần suất ra bài là khá chậm, mong các bạn thông cảm và bỏ qua, kết thúc bài trước chúng ta đã tìm hiểu xong thao tác resize hình ảnh, và trong bài hôm nay chúng ta sẽ cùng tìm hiểu một khái niệm trong libs image đó chính là watermark,và mấu chốt tôi vẫn muốn nhấn mạnh nhất đó là chính là làm như thế nào để có thể thực hiện một lúc 3 công việc, upload hình ảnh, resize ảnh, watermark cho tấm ảnh đó.

Lý do tại sao chúng ta cần phải có watermark cho tấm hình là bởi vì, khi bạn upload một tấm hình nào đó là do công sức của chính tay các bạn làm ra,và không muốn nó bị người khác copy một cách dễ dàng thì chúng ta cần phải bảo hộ tấm hình bằng một logo nào đó, hoặc chèn text để lai địa chỉ website của các bạn. Làm điều đó chỉ để bảo vệ quyền sỡ hữu trí tuệ của các bạn mà thôi.

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.

Cấu hình watermark image:

Với watermark do CI cung cấp thì chúng ta có 2 giải pháp, đó là dóng dấu bằng text hoăc chèn logo lên hình. Trong bài này thì chúng ta sẽ tìm hiểu chèn một lúc một trong hai kiểu đóng dấu, tôi sẽ đi từ dễ đến khó vì thế kiểu đóng dấu hình bằng text sẽ được tìm hiểu đầu tiên.

Đây là những thông tin cần thiết cho việc cấu hình để dóng dấu theo dạng text, tôi sẽ giải thích một số giá trị quan trọng như là kiểu text, màu sắc của text, vị trị text sẽ hiển thị trên tấm hình, kiểu font cho text, và nếu bạn muốn chọn font khác cho text thì vào folder system đến folder font cho font bạn lựa chọn, sau đó vào sửa code là ok ngay thôi, vị trí sẽ nằm ở cuối tấm hình và text sẽ được canh giữa. và quan trọng là giá trị padding nên là 0, vì nó là khoảng cách của tấm hình đến các khung xung quanh, sau khi khai báo hoàn tất chúng ta tiến hình thực thi thao tác watermark bằng lệnh $this->image_lib->watermark(), xem như chúng ta vừa khai báo xong phần watermark theo dạng text, do tôi đang chỉ muốn test phần watermark nên phần code resize tôi làm ở bài trước tạm thời comment khóa nó lại.

$config['wm_text'] = 'Copyright 2014 - freetuts.net';
$config['wm_type'] = 'text';
$config['wm_font_path'] = './system/fonts/texb.ttf';
$config['wm_font_size'] = '30';
$config['wm_font_color'] = 'ffff00;
$config['wm_vrt_alignment'] = 'bottom';
$config['wm_hor_alignment'] = 'center';
$config['wm_padding'] = '0';
$this->image_lib->initialize($config);
$this->image_lib->watermark();

Full Code:

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;*/

                    $config['wm_text'] = 'Copyright 2014 - freetuts.net';
                    $config['wm_type'] = 'text';
                    $config['wm_font_path'] = './system/fonts/texb.ttf';
                    $config['wm_font_size'] = '30';
                    $config['wm_font_color'] = 'ffff00;
                    $config['wm_vrt_alignment'] = 'bottom';
                    $config['wm_hor_alignment'] = 'center';
                    $config['wm_padding'] = '0';
                    $this->image_lib->initialize($config);
                    $this->image_lib->watermark();
            }else{
                $data['errors'] = $this->upload->display_errors();
                $this->load->view("upload_view", $data);
            }
        }
    }               
Chạy link localhost/citest/index.php/upload test bằng cách upload tấm hình và kiểm tra hình trong folder có add text màu vàng chưa, nếu có thì các bạn đã thành công rồi đấy, còn chưa thấy tức là các bạn khai báo sai ở chỗ nào đó,xem kỹ code hoặc copy code của tôi bỏ vào chạy thử. Tiếp theo chúng ta sẽ tìm hiểu và cấu hình chèn logo cho watermark, xem userguide của CI và tôi có một số thông tin cấu hình như sau. kiểu type sẽ là $config['wm_type'] = 'overlay' tức là kiểu định dạng chèn logo, $config['wm_overlay_path'] = './uploads/logo.png' chính là đường dẫn chứa logo mà chúng ta sẽ chèn vào tấm hình, $config['wm_opacity'] = '50' độ tương phản màu sắc của tấm hình. logo sẽ xuất hiện ở dưới cùng tấm hình và nó sẽ nằm ở bên phải,, tương tự như chèn text vào hình, chúng ta chỉ thay đổi thông tin khai báo là có thể dễ dàng chèn logo vào hình ảnh.
$config['wm_type'] = 'overlay';
$config['wm_overlay_path'] = './uploads/logo.png';
$config['wm_vrt_alignment'] = 'bottom';
$config['wm_hor_alignment'] = 'right';
$config['wm_padding'] = '0';
$config['wm_opacity'] = '50';

Full Code:

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;*/

                    $config['wm_type'] = 'overlay';
                    $config['wm_overlay_path'] = './uploads/logo.png';
                    $config['wm_vrt_alignment'] = 'bottom';
                    $config['wm_hor_alignment'] = 'right';
                    $config['wm_padding'] = '0';
                    $config['wm_opacity'] = '50';
                    $this->image_lib->initialize($config);
                    $this->image_lib->watermark();
            }else{
                $data['errors'] = $this->upload->display_errors();
                $this->load->view("upload_view", $data);
            }
        }
    }               

Sau khi upload xong thì kiểm tra xem logo đã chèn vào hình hay chưa, tôi nghĩ là các bạn sẽ hoàn toàn làm được, vì thao tác này khá giống với thao tác add text vào hình, việc sử dụng watermark trong CI thật sự là quá đơn giản phải không các bạn ? nhưng điều tôi muốn nói với các bạn rằng, làm sau thực hiện được cùng lúc 3 việc là upload hình , resize hình, watermark và CI có làm được hay không, câu trả lời là có, trong quá trình tìm hiểu về phần library images, tôi có trao đổi với vài người bạn và họ cho tôi vài giải pháp trong việc xử lý vấn đề này, và tôi cũng đã chọn cho mình cách tối ưu nhất để đơn giản hóa 3 thao tác thực hiện trong một phiên upload duy nhất.

Vấn đề mở rộng & tối ưu trong library image:

Sau khi tiến hành resize xong thì chúng ta phải clear các thông tin mà chúng ta đã cấu hình ở phía trên, thì library image có cung cấp cho chúng ta câu lệnh $this->image_lib->clear(), sau khi clear xong thì các bạn phải nhớ là vì $config chúng ta sẽ sử dụng lại với phần watermark nên buộc chúng ta phải hủy sự hoạt động của nó bằng hàm unset($config) , do cả resize lẫn watermark đều phải sử dụng lại đường dẫn gốc của tấm hình nên chúng ta sẽ copy phần đường dẫn ở resize đưa xuống chỗ watermark, và điều quan trọng mà tôi muốn các bạn lưu ý nhất chính là khi chúng ta bắt đầu kết hợp resize & watermark chỉ trong một lần upload, thì chúng ta phải cho $config['create_thumb'] = FALSE ngay tại vị trí cấu hình của watermark, vì nếu không sửa thành FALSE thì chúng ta sẽ không thể nào làm môt lúc 2 thao tác được.

Full Code resize & watermark:

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 thanh cong";
                echo "<pre>";
                print_r($this->upload->data());
                echo "</pre>";
                $check=$this->upload->data();
                $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();
                $this->image_lib->clear();
                unset($config);
               
                $config['source_image']	= './uploads/'.$check['file_name'];
                $config['create_thumb'] = FALSE;
                $config['wm_type'] = 'overlay';
                $config['wm_overlay_path'] = './uploads/logo.png';
                $config['wm_vrt_alignment'] = 'bottom';
                $config['wm_hor_alignment'] = 'right';
                $config['wm_padding'] = '0';
                $config['wm_opacity'] = '50';
                $this->image_lib->initialize($config);
                $this->image_lib->watermark();
            }else{
                $data['errors'] = $this->upload->display_errors();
                $this->load->view("upload_view", $data);
            }
        }
    }

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

Hiện tại tôi nghĩ đây là cách đơn giản và nhanh nhất nếu các bạn muốn sử dụng một lúc 2 thao tác chỉ với một lần upload thì tôi khuyên nên dùng cách này, còn nếu bạn có giải pháp khác thì hãy chia sẽ với tôi bằng cách comment ở phía dưới bài viết này. Chào tạm biệt và chúc các bạn học tốt.

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 11: Tìm Hiểu Library Image Trong Codeigniter

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

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…

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