Trong bài viết trước, chúng ta đã tập trung vào việc tải và thao tác với hình ảnh bằng PHP. Chúng tôi đã học cách xoay, thay đổi kích thước, chia tỷ lệ hoặc lật hình ảnh. Chúng tôi cũng đã tìm hiểu về các bộ lọc khác nhau và ma trận tích chập. Những hướng dẫn đó cũng đề cập đến một số cách sử dụng thực tế của thư viện GD, như thay đổi kích thước tất cả hình ảnh trong một thư mục hoặc thêm hình mờ trên nhiều hình ảnh cùng một lúc
Thao tác hình ảnh trong PHP bằng GD
Monty Shokeen
28 tháng năm 2022
Thay đổi kích thước và thao tác hình ảnh trong PHP (Có ví dụ)
Monty Shokeen
30 Th06 2022
Bên cạnh việc sử dụng GD để thao tác với các hình ảnh thông thường, chúng ta cũng có thể tạo hình ảnh của riêng mình từ đầu. Chúng ta có thể sử dụng các hàm khác nhau trong thư viện để vẽ các hình cơ bản như hình elip, hình tròn, hình chữ nhật, hình đa giác và các đường đơn giản. Với một số phép toán, những hình dạng này có thể tạo ra các mẫu đẹp. Ngoài ra còn có các chức năng có sẵn để vẽ văn bản trên hình ảnh được hiển thị, mở ra rất nhiều khả năng
Hướng dẫn này sẽ dạy bạn cách vẽ các hình cơ bản trong PHP và cách hiển thị văn bản bằng phông chữ yêu thích của bạn
Đây là bản xem trước của những gì chúng ta sẽ tạo ở cuối bài viết
Vẽ các hình dạng cơ bản trong PHP với GD
Chúng ta sẽ tìm hiểu về các hình cơ bản trong phần này và sau đó sẽ đề cập đến độ dày của đường kẻ, bút vẽ và kiểu đường kẻ sau
Vẽ các đường
Bạn có thể vẽ một đường thẳng đơn giản giữa hai điểm đã cho bằng hàm 332. Tham số 333 là một tài nguyên hình ảnh sẽ được tạo trước đó bằng cách sử dụng các chức năng như 334 hoặc 335. Chúng tôi sẽ sử dụng 334 trong suốt hướng dẫn này để tạo hình ảnh mới từ đầu. Hàm sẽ vẽ một đường nằm ngang nếu 337 bằng với 338. Tương tự, nó sẽ vẽ một đường thẳng đứng nếu 339 bằng với 340
Vẽ vòng tròn và vòng cung
Hàm 341 có thể vẽ các cung tròn bằng cách sử dụng 342 và 343 làm tâm của nó. Các tham số 344 và 345 xác định kích thước của cung trên các trục khác nhau. Các tham số 346 và 347 chỉ định góc bắt đầu và góc kết thúc của cung theo độ. Nếu bạn muốn vẽ các cung hoàn chỉnh từ 0 đến 360 độ, bạn có thể sử dụng hàm thay thế 348
Vẽ hình chữ nhật và đa giác
Bạn có thể vẽ hình chữ nhật trên hình ảnh bằng cách sử dụng hàm 349. Các giá trị 339 và 337 xác định góc trên cùng bên trái của hình chữ nhật. Các giá trị 340 và 338 xác định góc dưới cùng bên phải. Ngoài ra còn có một hàm 354, có thể tạo một đa giác với bất kỳ số cạnh hoặc số điểm nào. Tham số 355 là một mảng trong đó hai phần tử được ghép nối để lấy tọa độ của một điểm cụ thể.
Một chức năng khác được gọi là 356 đã được thêm vào PHP 7, chức năng này không vẽ đường thẳng giữa điểm đầu tiên và điểm cuối cùng
Đặt nó lại với nhau để tạo một bản vẽ
Trong ví dụ sau, chúng tôi đã sử dụng tất cả các chức năng này để tạo một bản vẽ đường có túp lều, mặt trời và mặt đất
1<?php 23header("Content-type: image/png"); 45$img_width = 800; 6$img_height = 600; <?php 0<?php 1<?php 2<?php 3<?php 4<?php 5<?php 6<?php 7<?php 8<?php 92021222324252627282930313233343536373839header("Content-type: image/png"); 0header("Content-type: image/png"); 1header("Content-type: image/png"); 2header("Content-type: image/png"); 3header("Content-type: image/png"); 4header("Content-type: image/png"); 5header("Content-type: image/png"); 6header("Content-type: image/png"); 7header("Content-type: image/png"); 8header("Content-type: image/png"); 9404142
Điều quan trọng ở đây chỉ là tìm ra giá trị của các tọa độ khác nhau. Tôi muốn vẽ mọi thứ tương ứng với kích thước của ảnh gốc, vì vậy tôi đã sử dụng các biến 357 và 358 để tính toán tọa độ của các điểm khác nhau
Kiểm soát độ dày của đường kẻ, kiểu và màu tô
Hình ảnh trên có một số vấn đề, chẳng hạn như các đường rất mỏng và không có màu. Tất cả những sự cố này có thể được khắc phục dễ dàng bằng cách sử dụng các chức năng như 359 và 360
Độ dày đường
Hàm 361 đặt độ dày của các đường được hiển thị khi vẽ hình chữ nhật, đa giác, hình cung, v.v. Ví dụ: đặt 362 thành 5 sẽ làm cho bất kỳ hình nào được vẽ bằng cách sử dụng 363, 364, 365, v.v. dày 5 pixel
Vẽ hình dạng đầy
Mỗi chức năng vẽ cũng có một phiên bản tô màu để lấp đầy hình cụ thể đó bằng một màu nhất định. Ví dụ: 360 sẽ tô hình chữ nhật đã vẽ bằng màu đã cho
Sử dụng cọ
Một chức năng GD rất hữu ích là 367. Tham số 368 trong hàm này chỉ là một tài nguyên hình ảnh khác có thể được sử dụng để vẽ các đường. Chẳng hạn, bạn có thể sử dụng bản vẽ vector trong suốt của một bông hoa làm bút vẽ để thêm các mẫu hoa đẹp vào hình ảnh của mình. Đoạn mã đưa ra dưới đây được viết để sử dụng hình ảnh đám mây làm bút vẽ khi vẽ một điểm. Điều này thêm một đám mây duy nhất trên bầu trời của chúng ta
1<?php 23<?php 245___50631_______2<?php 0<?php 155<?php 357<?php 4<?php 6$img_width = 800; 0<?php 8_______27_______0_______30_______2
Tôi đã tìm thấy hình ảnh đám mây này trên Pixabay và thu nhỏ nó xuống kích thước phù hợp cho dự án của chúng tôi
Mã hoàn chỉnh cho hình ảnh túp lều được đưa ra dưới đây. Chúng tôi chỉ cần thêm hai phiên bản của mỗi hình, một để vẽ đường viền và phiên bản còn lại để tô màu
1<?php 23header("Content-type: image/png"); 4$img_width = 800; 5$img_height = 600; 6<?php 0<?php 2<?php 1<?php 350<?php 452<?php 6<?php 85520572224<?php 526<?php 727<?php 9292130<?php 06322534<?php 1035372839header("Content-type: image/png"); 0<?php 16header("Content-type: image/png"); 2header("Content-type: image/png"); 4<?php 19header("Content-type: image/png"); 5<?php 21header("Content-type: image/png"); 7header("Content-type: image/png"); 8<?php 2440<?php 2641<?php 28<?php 29
Đây là kết quả cuối cùng của mã PHP GD ở trên
Kết xuất văn bản trên hình ảnh
PHP GD đi kèm với bốn chức năng khác nhau để cho phép bạn hiển thị nhiều ký tự hoặc chỉ một ký tự theo hướng ngang hoặc dọc. Các chức năng này là 369, 370, 371 và 372. Tất cả chúng đều chấp nhận sáu tham số giống nhau, vì vậy chúng ta sẽ chỉ thảo luận về hàm 369 tại đây
Hàm 374 tham số 375 chỉ đơn giản là kích thước của văn bản được hiển thị. Nó chỉ chấp nhận các giá trị số nguyên từ 1 đến 5. Tham số 376 là văn bản mà bạn muốn hiển thị. Nếu bạn chuyển một chuỗi nhiều ký tự cho các hàm char, chỉ ký tự đầu tiên sẽ được hiển thị trên hình ảnh. Hàm 370 và 372 sẽ hiển thị văn bản theo chiều dọc từ dưới lên trên
Khi nói đến kết xuất văn bản, bốn chức năng chúng tôi đã thảo luận ở trên rất hạn chế. Bạn sẽ thấy rằng ngay cả giá trị kích thước phông chữ lớn nhất cũng quá nhỏ để sử dụng bình thường. Ngoài ra, văn bản chỉ có thể được viết theo chiều ngang và chiều dọc
May mắn thay, GD cũng có chức năng 379 có thể hiển thị văn bản ở bất kỳ phông chữ nào bạn muốn. Tham số 380 được sử dụng để chỉ định đường dẫn đến phông chữ TrueType mà bạn muốn sử dụng để hiển thị văn bản. Các tham số 381 và 382 xác định vị trí bắt đầu của văn bản được hiển thị
Ví dụ sau sử dụng tất cả các chức năng này để tạo một số hiệu ứng văn bản đẹp mắt
1<?php 23header("Content-type: image/png"); 4$img_width = 800; 5$img_height = 600; 6<?php 0<?php 2<?php 1<?php 3<?php 5<?php 4<?php 7<?php 6<?php 9<?php 82120<?php 06222524<?php 102627282930<?php 9332<?php 953435<?php 983720039header("Content-type: image/png"); 0203header("Content-type: image/png"); 2205header("Content-type: image/png"); 4header("Content-type: image/png"); 5208header("Content-type: image/png"); 7210header("Content-type: image/png"); 82124041215________26_____
Như bạn có thể thấy, chúng tôi đã hiển thị cùng một văn bản với cùng một phông chữ ở các vị trí hơi khác nhau để tạo một số hiệu ứng như đổ bóng văn bản cơ bản. Điều quan trọng cần lưu ý là văn bản được hiển thị bởi bất kỳ chức năng văn bản nào sẽ ẩn hoàn toàn văn bản bên dưới nó trong trường hợp chồng chéo. Đây là hình ảnh cuối cùng thu được sau khi chạy đoạn mã trên
Tạo các thiết kế và áp phích đơn giản
Hãy sử dụng tất cả kiến thức mà chúng ta có được cho đến nay để tạo áp phích hoặc hình ảnh đơn giản với sự kết hợp giữa văn bản và hình dạng. Tôi sẽ cố gắng tạo lại một cái gì đó tương tự như hình ảnh trong hướng dẫn thao tác hình ảnh PHP này, nơi chúng tôi đã thay thế màu sắc. Chúng tôi sẽ vẽ các vòng tròn đồng tâm để giữ cho phép tính của chúng tôi đơn giản
Một chức năng mới mà chúng ta sẽ sử dụng trong phần này được gọi là 383. Về cơ bản, nó cung cấp cho chúng ta hộp giới hạn của văn bản mà chúng ta muốn viết bằng phông chữ TrueType. Chúng tôi sẽ sử dụng chức năng để tăng tỷ lệ văn bản của mình sao cho chiều rộng hoặc chiều cao của nó đạt đến một phần nhất định của hình ảnh. Sau đó, chúng ta có thể vẽ văn bản của mình lên hình ảnh bằng hàm 384
1<?php 23244424652486<?php 2<?php 0<?php 1253<?php 3<?php 7<?php 4<?php 6258<?php 8202612224264262662726829270303227334275352773739280header("Content-type: image/png"); 0282header("Content-type: image/png"); 2284header("Content-type: image/png"); 4header("Content-type: image/png"); 5header("Content-type: image/png"); 7288header("Content-type: image/png"); 84029141<?php 2842
Chúng tôi bắt đầu với kích thước phông chữ cơ bản là 20 điểm và sau đó tiếp tục tăng nó lên 4 miễn là cả chiều rộng và chiều cao đều nằm trong giới hạn đã xác định. Khi chúng tôi đạt được kích thước phông chữ phù hợp, chúng tôi thoát khỏi vòng lặp và hiển thị văn bản trên hình ảnh bằng cách sử dụng 384
Bây giờ chúng ta có thể bao gồm đoạn mã sau trước dòng cuối cùng nơi chúng ta lưu hình ảnh để thêm các vòng tròn đồng tâm đã điền vào góc dưới cùng bên trái và trên cùng bên phải của hình ảnh
1<?php 23299430153036305<?php 0<?php 1308<?php 3<?php 4311<?php 6<?php 83142031622318243202627323293032632328343542
Như bạn có thể thấy, có thể dễ dàng tạo các mẫu thú vị bằng cách sử dụng một chút toán học và một số hàm PHP GD tích hợp
Suy nghĩ cuối cùng
Mục đích của hướng dẫn này là giúp bạn làm quen với các hàm GD khác nhau để vẽ các hình cơ bản từ đầu trong PHP. Với sự trợ giúp của một chút toán học, bạn sẽ có thể sử dụng các hàm này để tạo các hình dạng phức tạp hơn như đa giác đều, hình chữ nhật tròn, v.v.
PHP GD cũng có một số chức năng rất hữu ích để hiển thị văn bản trên hình ảnh. Việc sử dụng một phông chữ đẹp sẽ đảm bảo rằng văn bản hiển thị trông không lạ khi được đặt trên các hình ảnh thông thường được tải từ các đường dẫn tệp khác nhau