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

test php

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

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.

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.

Bài viết này được đăng tại [free tuts .net]

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

Bài trước Bài tiếp