Khác biệt

Đây là những khác biệt giữa hai phiên bản của trang.

--- programming4:class:image [2020/11/02 09:24] – [Chuẩn bị] hoaquynhtim99
+++ programming4:class:image [2020/11/02 10:37] (hiện tại) – hoaquynhtim99
@@ Dòng 7: / Dòng 7: @@
   - Cài đặt NukeViet 4.4.02 (link tải [[https://github.com/nukeviet/nukeviet/releases/download/4.4.02/nukeviet4.4.02setup.zip|NukeViet 4.4.02]]) hoặc tương đương.
   - Cài đặt module mẫu samples ({{ :programming4:class:nv4_module_samples.zip |}}) để lập trình
-  - Dùng class upload ([[programming4:class:upload|Xem hướng dẫn]]), chức năng quản lý file hoặc copy trực tiếp ảnh này  vào thư mục uploads
+  - Dùng class upload ([[programming4:class:upload|Xem hướng dẫn]]), chức năng quản lý file hoặc copy trực tiếp ảnh này {{ :programming4:class:nukeviet.png?linkonly |}} vào thư mục uploads
 ===== Hướng dẫn lập trình =====
-==== Tải file từ máy tính ====
+Trong file ''modules/samples/admin/main.php'' bên dưới đoạn
-=== Chuẩn bị một form để gửi file từ máy tính lên server: ===
-Mở file ''themes/admin_default/modules/samples/main.tpl'' thêm vào đoạn HTML để tạo ra form gửi file lên máy tính, code html như sau
-<file html main.tpl>
-<!-- BEGIN: main -->
-<form action="{NV_BASE_ADMINURL}index.php?{NV_LANG_VARIABLE}={NV_LANG_DATA}&amp;{NV_NAME_VARIABLE}={MODULE_NAME}&amp;{NV_OP_VARIABLE}={OP}" method="post" enctype="multipart/form-data">
-    <div class="panel panel-default">
-        <div class="panel-body">
-            <div class="form-group">
-                <label>File:</label>
-                <input type="file" name="uploadfile">
-            </div>
-            <input class="btn btn-primary" name="submit" type="submit" value="{LANG.save}" />
-        </div>
-    </div>
-</form>
-<!-- END: main -->
-</file>
-Với file này ta sẽ có được một form upload file như ảnh
-{{ :programming4:class:form.png |}}
-> Lưu ý: Thẻ ''form'' cần có thuộc tính ''enctype="multipart/form-data"'' mới có thể gửi file lên server.
-=== Lập trình xử lý để lưu file gửi lên trên server ===
-Trong file ''modules/samples/admin/main.php'' bên dưới đoạn
 <code php>
@@ Dòng 48: / Dòng 17: @@
 // Viết code xử lý chung vào đây
 //------------------------------
 </code>
-Chúng ta bắt đầu lập trình:
-**Nhận diện được có file tải lên:**
+Ta tiến hành lập trình xử lý ảnh:
-Dùng lệnh
+Khởi tạo class Image bằng lệnh
 <code php>
-if ($nv_Request->isset_request('submit', 'post') and isset($_FILES, $_FILES['uploadfile'], $_FILES['uploadfile']['tmp_name']) and is_uploaded_file($_FILES['uploadfile']['tmp_name'])) {
+$image = new NukeViet\Files\Image(NV_UPLOADS_REAL_DIR . '/nukeviet.png', NV_MAX_WIDTH, NV_MAX_HEIGHT);
-    //
-}
 </code>
 Trong đó:
+  * Tham số thứ nhất là đường dẫn tuyệt đối đến ảnh, trong ví dụ này ảnh là nukeviet.png trong thư mục uploads
+  * Tham số thứ 2, 3 là chiều rộng tối đa và chiều cao tối đa được phép xử lý. Có thể không giới hạn bằng cách bỏ hai tham số này
-  * Điều kiện ''$nv_Request->isset_request('submit', 'post')'' để kiểm tra sự kiện submit form
+Sau đó sử dụng theo quy luật sau
-  * Điều kiện ''isset($_FILES, $_FILES['uploadfile'], $_FILES['uploadfile']['tmp_name']) and is_uploaded_file($_FILES['uploadfile']['tmp_name'])'' để kiểm tra có file tải lên hợp lệ.
-**Tiến hành lưu file tải lên:**
+<code php>
+$image->[Phương thức 1/Chức năng 1]
+$image->[Phương thức 2/Chức năng 2 ...]
+$image->save(NV_UPLOADS_REAL_DIR, $newname, $quality);
+$image->close();
-Sau khi kiểm tra xong, tiến hành lưu file tải lên bằng các lệnh sau
+$info = $image->create_Image_info;
+</code>
-<code php>
+Mô tả:
-// Khởi tạo Class upload
+  * Đầu tiên gọi ra chức năng xử lý, có thể gọi nhiều lần, các chức năng này được mô tả bên dưới
-$upload = new NukeViet\Files\Upload($admin_info['allow_files_type'], $global_config['forbid_extensions'], $global_config['forbid_mimes'], NV_UPLOAD_MAX_FILESIZE, NV_MAX_WIDTH, NV_MAX_HEIGHT);
+  * Sau khi xử lý các chức năng gọi phương thức lưu ''$image->save'' để lưu ảnh, tham số truyền vào gồm
+    * Thư mục lưu ảnh
+    * Tên ảnh mới, nếu không chỉ ra hệ thống tự động lưu ảnh mới với dạng [tên-ảnh-cũ_rộng_cao].[loại-file]
+    * Chất lượng ảnh mới, nếu không chỉ ra hệ thống lưu với chất lượng 100%. Giá trị truyền vào từ 1 => 100
+  * Cuối cùng kiểm tra ''$image->create_Image_info'' để lấy kết quả lưu ảnh mới
+==== Các chức năng xử lý ảnh ====
-// Thiết lập ngôn ngữ, nếu không có dòng này thì ngôn ngữ trả về toàn tiếng Anh
+=== Chỉnh kích thước theo % ===
-$upload->setLanguage($lang_global);
-// Tải file lên server
+<code php>
-$upload_info = $upload->save_file($_FILES['uploadfile'], NV_UPLOADS_REAL_DIR, false, $global_config['nv_auto_resize']);
+$image->resizePercent(100);
 </code>
-Các tham số khởi tạo bao gồm:
+Tham số tuyền vào là số nguyên, nhỏ nhất = 1.
-  * ''$admin_info['allow_files_type']'' là các loại file được phép tải lên, nếu tải lên file không thuộc các loại này sẽ báo lỗi. Lập trình viên có thể thay biến này bằng mảng một chiều khác thuộc các giá trị này ''text, images, archives, audio, video, xml, documents, adobe, flash, real, application''. Chi tiết các giá trị đó xem ở file ''includes/ini/mime.ini''
-  * ''$global_config['forbid_extensions'], $global_config['forbid_mimes']'' là hai tham số không đổi, đây là mảng chứa các phần mở rộng bị cấm và mime bị cấm
-  * ''NV_UPLOAD_MAX_FILESIZE'' dung lượng tối đa tính bằng byte của file tải lên.
-  * ''NV_MAX_WIDTH, NV_MAX_HEIGHT'' là kích thước rộng, cao tối đa của file tải lên nếu là ảnh.
-Các tham số lưu file tải lên bao gồm:
+=== Cắt ảnh từ giữa ===
-  * ''$_FILES['uploadfile']'' đây là biến file tải lên của php (tham khảo thêm ở [[https://www.php.net/manual/en/features.file-upload.post-method.php|POST method uploads]])
-  * ''NV_UPLOADS_REAL_DIR'' là địa chỉ tuyệt đối của thư mục lưu file. Trong ví dụ này giá trị ''NV_UPLOADS_REAL_DIR'' biểu thị thư mục lưu file là ''uploads''
-  * Tham số tiếp theo đang mang giá trị ''false'', tại đây lập trình viên đặt true hoặc false tương ứng với việc thay thế nếu tồn tại hoặc lưu với tên khác nếu tồn tại.
-  * Tham số tiếp theo đang để giá trị ''$global_config['nv_auto_resize']'' tham số này có thể truyền giá trị 1, 0 biểu thị nếu file tải lên là ảnh mà vượt quá kích thước tối đa sẽ tự động thay đổi về kích thước tối đa hoặc là dừng upload.
-Kết quả trả về trong ví dụ được lưu vào biến ''$upload_info'', đây là mảng một chiều lưu trữ thông tin tải file lên.
+<code php>
+$image->cropFromCenter(100, 100);
+</code>
-Có 3 trường hợp:
+Tham số tuyền vào là kích thước rộng, cao của ảnh mới.
-. Có lỗi, mảng này sẽ như sau
+=== Cắt ảnh từ bên trái ===
-<code>
+<code php>
-Array
+$image->cropFromLeft(50, 50, 200, 200);
-(
-    [error] => Lỗi: loại file không được phép tải lên
-)
 </code>
-. Thành công, file tải lên là ảnh
+Tham số thứ 1, 2 cho biết khoảng cách từ bên trái và bên trên sẽ bắt đầu cắt ảnh.
+Tham số thứ 3, 4 cho biết kích thước rộng, cao cần cắt lấy
+=== Cắt ảnh từ bên trên ===
-<code>
+<code php>
-Array
+$image->cropFromTop(200, 200);
-(
-    [error] =>
-    [complete] => 1
-    [name] => D:/webroot/www/nukeviet4/tmp2.nukeviet4.my/uploads/uq7c94b.jpg
-    [basename] => uq7c94b.jpg
-    [ext] => jpg
-    [mime] => image/jpeg
-    [size] => 40892
-    [is_img] => 1
-    [is_svg] =>
-    [img_info] => Array
-        (
-            [0] => 720
-            [1] => 720
-            [2] => 2
-            [3] => width="720" height="720"
-            [bits] => 8
-            [channels] => 3
-            [mime] => image/jpeg
-        )
-)
 </code>
-. Thành công, file tải lên là loại file khác
+Hai tham số truyền vào cho biết kích thước ảnh cần cắt. Hướng cắt từ trái, bên trên. Thương thức cắt ảnh này giống với ''cropFromLeft'' với tham số 1,2 bằng 0
+=== Chỉnh kích thước theo hai phương ===
-<code>
+<code php>
-Array
+$image->resizeXY(200, 200);
-(
-    [error] =>
-    [complete] => 1
-    [name] => D:/webroot/www/nukeviet4/tmp2.nukeviet4.my/uploads/nv4_module_samples.zip
-    [basename] => nv4_module_samples.zip
-    [ext] => zip
-    [mime] => application/zip
-    [size] => 19148
-    [is_img] =>
-    [is_svg] =>
-)
 </code>
-Giải thích các giá trị:
+Hai tham số truyền vào là kích thước tối đa cần resize theo phương rộng, cao. Ảnh được resize có tỉ lệ đúng với tỉ lệ của ảnh gốc.
-  * ''error'' giá trị này biểu thi nguyên nhân lỗi nếu có
-  * ''complete'' mang giá trị 1 biểu thị file đã được lưu thành công
-  * ''name'' là đường dẫn tuyệt đối của file đã lưu
-  * ''basename'' là tên file đã lưu
-  * ''ext'' là phần mở rộng của file
-  * ''mime'' Mime type của file
-  * ''size'' kích thước file tải lên tính bằng byte
-  * ''is_img'' giá trị 1 hoặc 0 tương ứng với file tải lên là ảnh hoặc không phải là ảnh
-  * ''is_svg'' giá trị 1 hoặc 0 tương ứng với file tải lên là SVG hoặc không phải là SVG
-  * ''img_info'' là mảng một chiều chứa thông tin ảnh nếu file tải lên là ảnh, đây là kết quả của hàm [[https://www.php.net/manual/en/function.getimagesize.php|getimagesize]]
-Lập trình viên căn cứ vào biến ''$upload_info'' để xử lý cho ứng dụng của mình.
+=== Tạo bóng đổ ===
-==== Tải file trên internet ====
+<code php>
+$image->reflection();
+</code>
-=== Chuẩn bị form tải lên ===
+Chức năng này tạo ảnh mới có chiều cao gấp rưỡi ảnh gốc, phần cao của ảnh thêm vào có dạng bóng đổ xuống mờ dần.
-Trong file tpl ở hướng dẫn bên trên bổ sung thêm một nút gửi file từ internet như sau:
+=== Xoay ảnh ===
-<code html>
+<code php>
-<div class="form-group">
+$image->rotate(-45);
-    <label>Remote File:</label>
-    <input type="text" class="form-control" name="remotefile">
-</div>
-<input class="btn btn-primary" name="submitremote" type="submit" value="{LANG.save}" />
 </code>
-=== Lập trình để tải file về ===
+Tham số tuyền vào giá trị dương hoặc âm từ 0 đến 360 độ. Nếu dương ảnh xoay cùng chiều kim đồng hồ và ngược lại giá trị âm ảnh xuay ngược chiều kim đồng hồ.
-Trong file php như bên trên, dùng code nhận diện có thông tin gửi lên của người dùng ví dụ như sau:
+=== Chèn logo vào ảnh ===
 <code php>
-if ($nv_Request->isset_request('submitremote', 'post')) {
+$config = [
-    $remotefile = $nv_Request->get_string('remotefile', 'post', '');
+    'w' => 113,
-    if (!empty($remotefile)) {
+    'h' => 32,
-        //
+    'x' => 30,
-    }
+    'y' => 30
-}
+];
+$image->addlogo(NV_ROOTDIR . '/' . NV_ASSETS_DIR . '/images/logo_small.png', 'right', 'bottom', $config);
 </code>
-Với code đó, nếu có thông tin gửi lên thì địa chỉ file ở biến ''$remotefile''
+Trong đó biến ''$config'' có nghĩa như sau:
+  * w => Kích thước chiều rộng logo
+  * h => Kích thước chiều cao logo
+  * x => Khoảng cách logo tính từ bên trái của ảnh
+  * y => Khoảng cách logo tính từ bên trên của ảnh
-**Xử lý lưu file**
+''$config'' có thể chỉ ra hoặc không chỉ ra.
-Dùng đoạn code như sau:
+Các tham số phương ''addlogo'' có ý nghĩa như sau:
+  * Tham số thứ nhất là đường dẫn tuyệt đối đến logo
+  * Tham số thứ 2 là 1 trong 3 giá trị left, center, right. Nếu không chỉ ra ''$config['w']'' và ''$config['h']'' thì giá trị này sẽ chỉ định logo nằm bên trái cách lề 10px nằm giữa hoặc nằm bên phải cách lề 10px
+  * Tham số thứ 3 là 1 trong 3 giá trị top, middle, bottom. Nếu không chỉ ra ''$config['w']'' và ''$config['h']'' thì giá trị này sẽ chỉ định logo nằm bên trên cách lề 10px nằm giữa hoặc nằm bên dưới cách lề 10px
+  * Tham số thứ 4 là biến ''$config'' bên trên.
+=== Chèn chữ vào ảnh ===
 <code php>
-// Khởi tạo Class upload
+$image->addstring('NukeViet CMS', 'right', 'bottom', NV_ROOTDIR . '/includes/fonts/Pixelation.ttf', 36);
-$upload = new NukeViet\Files\Upload($admin_info['allow_files_type'], $global_config['forbid_extensions'], $global_config['forbid_mimes'], NV_UPLOAD_MAX_FILESIZE, NV_MAX_WIDTH, NV_MAX_HEIGHT);
-// Thiết lập ngôn ngữ, nếu không có dòng này thì ngôn ngữ trả về toàn tiếng Anh
-$upload->setLanguage($lang_global);
-// Lưu file trên internet về server
-$upload_info = $upload->save_urlfile($remotefile, NV_UPLOADS_REAL_DIR, false, $global_config['nv_auto_resize']);
 </code>
-Cách viết hoàn toàn tương tự như hướng dẫn lưu file từ máy tính bên trên, chỉ khác:
+Trong đó:
-  * Thay phương thức ''save_file'' bằng ''save_urlfile''.
+  * Tham số thứ nhất là nội dung chữ cần chèn
-  * Thay ''$_FILES['uploadfile']'' bằng ''$remotefile''.
+  * Tham số thứ 2, 3 cho biết phương của chữ, tương tự như chức năng ''addlogo'' bên trên.
+  * Tham số thứ 4 là đường dẫn tuyệt đối đến font chữ cần chèn
-Kết quả trả về lưu vào biến ''$upload_info'' cũng có nội dung tương tự như cách lưu file từ máy tính bên trên.
+  * Tham số thứ 5 là kích thước của chữ đơn vị pt
 ===== Code mẫu =====
-Tham khảo toàn bộ module trong hướng dẫn này tại đây {{ :programming4:class:nv4_module_samples_upload.zip |}}
+Tải module chứa code mẫu của bài hướng dẫn tại đây {{ :programming4:class:nv4_module_samples_image.zip |}}