Với mọi trang web đều phải có chức năng upload image lên đưa Database với mục đích thêm hình ảnh vào cơ sở dữ liệu MySQL. Bài viết này sẽ hướng dẫn bạn cách upload ảnh bằng PHP và MySQL với những đoạn code dễ hiểu đọc xong bạn hoàn toàn có thể làm được. Show Nội dung chính
Với bài tập này bạn sẽ biết cách lưu đường dẫn ảnh vào Database và hiển thị bức ảnh lên trên website. Nào hãy bắt đầu thôi! Bước 1: Bạn sẽ khởi tạo 4 file như trong hình
Tạo 1 cơ sở dữ liệu Database tên là ‘upload_image‘ => sau đó tạo bảng Table tên là images bằng paste đoạn MySQL vào Database CREATE TABLE IF NOT EXISTS `images` ( `id` int(11) NOT NULL AUTO_INCREMENT, `image` varchar(100) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ; Bước 2: Tiếp theo bạn sẽ tạo một file upload.php <!DOCTYPE html> <html> <head> <title>Image Upload</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="content"> <form method="POST" action="upload.php" enctype="multipart/form-data"> <input type="hidden" name="size" value="1000000"> <input type="file" name="image"> <button type="submit" name="upload">POST</button> <?php require "xuly.php"?> </form> </div> </body> </html> Bước 3: Tiếp theo sẽ tạo một file là xuly.php <?php include 'connect.php'; if (isset($_POST['upload'])) { $errors= array(); $file_name = $_FILES['image']['name']; $file_size = $_FILES['image']['size']; $file_tmp = $_FILES['image']['tmp_name']; $file_type = $_FILES['image']['type']; $file_parts =explode('.',$_FILES['image']['name']); $file_ext=strtolower(end($file_parts)); $expensions= array("jpeg","jpg","png"); if(in_array($file_ext,$expensions)=== false){ $errors[]="Chỉ hỗ trợ upload file JPEG hoặc PNG."; } if($file_size > 2097152) { $errors[]='Kích thước file không được lớn hơn 2MB'; } $image = $_FILES['image']['name']; $target = "photo/".basename($image); $sql = "INSERT INTO images (image) VALUES ('$image')"; mysqli_query($conn, $sql); if (move_uploaded_file($_FILES['image']['tmp_name'], $target)) { echo '<script language="javascript">alert("Đã upload thành công!");</script>'; }else{ echo '<script language="javascript">alert("Đã upload thất bại!");</script>'; } } $result = mysqli_query($conn, "SELECT * FROM images"); ?> <!DOCTYPE html> <html> <head> <title>Image Upload</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="content"> <?php while ($row = mysqli_fetch_array($result)) { echo "<div id='img_div'>"; echo "<img src='photo/".$row['image']."' >"; echo "</div>"; } ?> </div> </body> </html> Bước 4: Tạo file connect.php để kết nối database <?php $host ="localhost"; $uname = "root"; $pwd = ''; $db_name = "upload_image"; $conn = mysqli_connect($host, $uname, $pwd, $db_name); mysqli_set_charset($conn, 'UTF8'); ?> Bước 5: Thêm file style.css #content{ margin: 20px auto; border: 1px solid #cbcbcb; overflow: auto; padding: 20px; } form{ margin: 20px auto; } form div{ margin-top: 5px; } #img_div{ padding: 5px; border: 1px solid #cbcbcb; float: left } #img_div:after{ content: ""; display: block; clear: both; } #img_div img{ float: left; margin: 5px; width: 400px; height: auto; } Sau khi tạo xong 4 file: thư mục photo trong máy tính, upload.php, xuly.php và connect.php, style.css bạn thử chạy vào xem kết quả như thế nào. Kết luận: Trên đây là code upload hình ảnh lên Database bằng PHP và MySQL, với bài hướng dẫn với các bước đơn giản trên hi vọng sẽ giúp bạn học thêm một chút kiến thức về lập trình PHP.
Nội dung bài viết Video học lập trình mỗi ngàyXử lý hình ảnh với Node giờ đây dễ dàng hơn bao giờ hết. Có rất nhiều thư viện hỗ trợ chúng ta như sharp, cloudinary... Nhưng trong bài biết này, tôi sẽ giới thiệu cho bạn một thư viện mới, cung cấp mạnh mẽ những API như Resizing, Crop... Chắc hẳn các bạn còn nhớ "Resize image trong nodejs sử dụng multer và sharp" thì các bạn cũng sẽ dễ hình dung hơn về các thư viện xử lý hình ảnh của nodejs. Nếu một trang web hay một ứng dụng của bạn dùng nhiều tư liệu bằng hình ảnh, hay cung cấp cho người dùng upload hình ảnh lên, thì việc xử lý mỗi hình ảnh đó là một công việc được ưu tiên hàng đầu trong việc phát triển ứng dụng. Việc xử lý tối ưu hoá hình ảnh cho kích thước tệp tối thiểu nhưng phải đảm bảo chất lượng hình ảnh đó cũng là một việc phức tạp nếu chúng ta tự làm và nghiên cứu. Với việc sử dụng thư viện Jimp, bạn có thể thay đổi kích thước và cắt hình ảnh, chuyển đổi chúng sang định dạng hình ảnh phù hợp với nhu cầu của bạn và áp dụng các bộ lọc và hiệu ứng. Trong hướng dẫn này, chúng tôi sẽ thảo luận về cách thư viện hoạt động và mô tả một số trường hợp sử dụng phổ biến cho thao tác hình ảnh khi sử dụng thue viện Jimp. Lưu ý ở đây Jimp chỉ giúp chúng ta xử lý hình ảnh. Nếu một trong số các bạn chưa biết cách upload images với nodejs thì vui lòng tham khảo bài viết "Example upload files using multer in nodejs, express js" để có thể upload files lên host một cách dễ dàng. Installation jimpnpm install --save jimp Trước khi bạn bắt đầu làm việc với thư viện, chúng tôi muốn các bạn phải đảm bảo rằng nó hỗ trợ các định dạng bạn dự định đưa vào ứng dụng của mình. Định dạng được hỗ trợ bao gồm: @jimp/jpeg @jimp/png @jimp/bmp @jimp/tiff @jimp/gif Jimp hỗ trợ callback, ngoài ra cũng hỗ trợ Promise một cách dễ dàng. Và trong bài viết này, chúng tôi sẽ sử dụng demo với Promise Tips: Series toàn tập callback - Promise - Async/Await trong Javascript Ví dụ cơ bản: Jimp.read('http://www.example.com/path/to/lenna.jpg') .then(image => { // Do stuff with the image. }) .catch(err => { // Handle an exception. }); Chúng ta có thể cung cấp cho imp.read một url hoặc một file location trong system của bạn. Và bây giờ chúng ta thử làm demo về những tính năng sau đây. Hy vọng, bạn sẽ thích và sử dụng chúng ngay hoặc sau này nếu bạn cần. Resizing and cropping imagesResizingSyntax: resize( w, h[, mode] ) Example: const Jimp = require('jimp'); async function resize() { // Read the image. const image = await Jimp.read('https://images.pexels.com/photos/298842/pexels-photo-298842.jpeg'); // Resize the image to width 150 and heigth 150. await image.resize(150, 150); // Save and overwrite the image await image.writeAsync(`test/${Date.now()}_150x150.png`); } resize(); Images gốc HÌnh ảnh sau khi đã Resized CropSyntax: crop( x, y, w, h) Example: async function crop() { // Read the image. const image = await Jimp.read('https://images.pexels.com/photos/298842/pexels-photo-298842.jpeg'); await image.crop(500, 500, 150, 150); // Save and overwrite the image await image.writeAsync(`test/${Date.now()}_crop_150x150.png`); } crop() Hình ảnh sau khi đã Cropped Modifying image shape and styleRotateSyntax: rotate( deg[, mode] ); Example: async function rotate() { // Read the image. const image = await Jimp.read('https://images.pexels.com/photos/298842/pexels-photo-298842.jpeg'); await image.rotate(45); // Save and overwrite the image await image.writeAsync(`test/${Date.now()}_rotate_150x150.png`); } rotate() Output FlipSyntax: image.flip( horz, vert ) Example: async function flip() { // Read the image. const image = await Jimp.read('https://images.pexels.com/photos/298842/pexels-photo-298842.jpeg'); await image.flip(true, false); // Save and overwrite the image await image.writeAsync(`test/${Date.now()}_flip_150x150.png`); console.log("flipped") } flip() Hình ảnh sau khi xử lý OpacitySyntax: opacity( f ); Example: async function opacity() { // Read the image. const image = await Jimp.read('https://images.pexels.com/photos/298842/pexels-photo-298842.jpeg'); await image.opacity(.5); // Save and overwrite the image await image.writeAsync(`test/${Date.now()}_opacity_150x150.png`); } Hình ảnh sau khi xử lý Opacity Xử lý hiệu ứng cho imagesGrayscalegreyscale(); Example: async function greyscale() { // Read the image. const image = await Jimp.read('https://images.pexels.com/photos/298842/pexels-photo-298842.jpeg'); await image.greyscale(); // Save and overwrite the image await image.writeAsync(`test/${Date.now()}_greyscale_150x150.png`); } greyscale() Output: Blurblur(r) // fast blur the image by r pixels Example: async function blur() { // Read the image. const image = await Jimp.read('https://images.pexels.com/photos/298842/pexels-photo-298842.jpeg'); await image.blur(20); // Save and overwrite the image await image.writeAsync(`test/${Date.now()}_blur_150x150.png`); } blur() Output: Add text cho images sử dụng nodejsImage overlaycomposite( src, x, y, [{ mode, opacitySource, opacityDest }] ); Example: async function waterMark(waterMarkImage) { let watermark = await Jimp.read(waterMarkImage); watermark = watermark.resize(300,300); const image = await Jimp.read('https://images.pexels.com/photos/298842/pexels-photo-298842.jpeg'); watermark = await watermark image.composite(watermark, 0, 0, { mode: Jimp.BLEND_SOURCE_OVER, opacityDest: 1, opacitySource: 0.5 }) await image.writeAsync(`test/${Date.now()}_waterMark_150x150.png`); } waterMark('https://destatic.blob.core.windows.net/images/nodejs-logo.png'); Output: Text overlayExample: async function textOverlay() { const font = await Jimp.loadFont(Jimp.FONT_SANS_32_BLACK); const image = await Jimp.read(1000, 1000, 0x0000ffff); image.print(font, 10, 10, 'Hello World!'); } textOverlay(); Output: Tìm hiểu thêm về JimpTrên đây là những demo có thể giúp các bạn hình dung được cách xử lý hình ảnh trên nodejs. Ngoài ra bạn có thể tìm hiểu kỹ hơn về Jimp qua GITHUB Ref: blog.logrocket.com |