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ố ứng dụng thực tế của thư viện GD, chẳng hạn như thay đổi kích thước tất cả cá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 ngang nếu
337 bằng
338. Tương tự, nó sẽ vẽ một đường thẳng đứng nếu
339 bằng
340
Vẽ vòng tròn và vòng cung
Hàm
341 có thể vẽ các cung tròn 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 một hình ảnh bằng cách sử dụng chức năng
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 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
35
36
37
3
39
30
31
32
33
34
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
30
31
32
33
34
35
36
37
38
39
390
391
392
393
394
395
396
397
398
399
300
301
302
Đ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ả các sự cố này có thể được khắc phục dễ dàng bằ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ẽ các hình đầy màu sắc
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
35
36
37
3
362
30
31
310
33
312
360
361
315
363
317
364
366
320
368
370
302
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
35
36
37
3
39
30
32
31
34
33
360
362
361
363
310
364
312
366
368
315
370
317
372
374
365
376
367
377
369
379
371
30
3606
32
375
34
3610
35
37
378
39
390
3616
392
394
3619
395
3621
397
398
3624
300
3626
301
3628
3629
3630
3631
3632
3633
3634
3635
3636
3637
3638
3639
3640
3641
3642
3643
3644
3645
3646
3647
3648
3649
3650
3651
320
3653
3654
3655
3656
3657
399
3659
302
Đâ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 hàm 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 ở đây
Tham số
374 Hàm
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
35
36
37
3
39
30
32
31
34
33
360
362
361
363
365
364
367
366
369
368
371
370
3606
372
375
374
3610
376
377
378
379
30
3693
32
3695
34
35
3698
37
3700
39
390
3703
392
3705
394
395
3708
397
3710
398
3712
300
301
3715
3628
3717
3630
3719
3632
3721
3633
3635
3724
3636
3726
3638
3728
3640
3730
3641
3732
3643
3734
3645
3646
399
3648
302
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
35
36
37
3
3744
30
3746
31
3748
33
362
360
361
3753
363
367
364
366
3758
368
370
3761
372
374
3764
376
3766
377
3768
379
3770
30
32
3773
34
3775
35
3777
37
39
3780
390
3782
392
3784
394
395
397
3788
398
300
3791
301
3628
302
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
35
36
37
3
3799
30
301
31
303
33
305
360
361
308
363
364
311
366
368
314
370
316
372
318
374
320
376
377
323
379
30
326
32
328
34
35
302
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 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 được 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