Hướng dẫn dùng composite image trong PHP

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.

• Readmore : Code hiển thị nội dung bài viết trong PHP

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

• photo: dùng để lưu hình ảnh trên máy tính
• connect.php; kết nối tới Database
• style; thêm CSS để trang trí form
• upload.php; file upload ảnh
• xuly.php; xử lý ảnh sau khi upload

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

 
 
 
 
 
 
 
 
 
 
 
POST

 
 
 

Bước 3: Tiếp theo sẽ tạo một file là xuly.php

 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 '';
}else{
echo '';
}
}
$result = mysqli_query($conn, "SELECT * FROM images");
?>








   
";
echo "
Xử 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
jimp
npm 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 images
Resizing
Syntax:
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 



Crop
Syntax:
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 style
Rotate
Syntax:
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 
Flip
Syntax:
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ý 
Opacity
Syntax:
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 images
Grayscale
greyscale();
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: 
Blur
blur(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 nodejs
Image overlay
composite( 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 overlay
Example:
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ề Jimp
Trê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