Văn bản trên hình ảnh css
|
Một trong những công việc thường xuyên mà chúng ta thường thao tác với ảnh đó là upload ảnh lên website, sau đó nhân tiện thêm luôn watermark để đảm bảo bản quyền và gây khó khăn cho những đứa trẻ nào tính ăn cắp ảnh của mình cũng như “ Show Trong bài viết này, tôi sẽ hướng dẫn bạn thêm hình mờ dưới dạng văn bản lên ảnh bằng PHP Những thứ chúng ta cần quan tâm và sẽ thực hiện là
Tạo Watermark cho ảnh bằng PHPBạn có 2 cách tạo hình mờ là sử dụng ảnh (ví dụ logo của bạn) hoặc sử dụng văn bản. Trong bài viết này chúng ta sử dụng cách đơn giản nhất là sử dụng Văn bản nhé. Xin lưu ý một chút về hình ảnh và phông chữ được sử dụng trong ví dụ này. Bạn cần đặt chúng ở vị trí phù hợp – ở đây là cùng một thư mục với tệp PHP của bạn Đây là đoạn mã PHP mà bạn có thể sử dụng
header('Content-type: image/jpeg');
$image = imagecreatefromjpeg('image.jpg');
$textcolor = imagecolorallocate($image, 255, 255, 255);
$font_file = 'myfont.ttf';
$custom_text = "Watermark Text";
imagettftext($image, 225, 0, 3450, 3000, $textcolor, $font_file, $custom_text);
imagejpeg($image);
imagedestroy($image); // for clearing memory
?>Chúng ta sẽ dừng lại một chút và giới thiệu với bạn vài điều trong đoạn mã này mà có thể bạn sẽ quan tâm $image = imagecreatefromjpeg('image.jpg'); Chúng ta tạo một ảnh mới bằng PHP sử dụng thông tin trong ảnh có sẵn, nói cách khác bạn tạo ảnh mới từ ảnh có sẵn. Ở đây mình sẽ sử dụng ảnh sau Hình mờ hình ảnh PHP To change color for Watermark will be more, mình sử dụng màu RGB với đoạn mã sau $textcolor = imagecolorallocate($image, 255, 255, 255); Bạn có thể thay đổi mã RGB của mình nếu muốn sử dụng màu sắc khác Tiếp theo là chữ chữ $font_file = 'myfont.ttf'; Cuối cùng là văn bản mà chúng ta sử dụng làm Watermark $custom_text = "Watermark Text"; Sau khi cấu hình tất cả, chúng ta tiến hành thêm đoạn văn bản đã cấu hình lên trên ảnh được tạo ra bằng mã PHP ở đầu như sau imagettftext($image, 225, 0, 3450, 3000, $textcolor, $font_file, $custom_text); Để lưu ảnh lại và xuất ra, chúng ta sử dụng đoạn mã sau khi tạo ảnh JPG mới dựa trên ảnh đã được tạo từ thư viện - Việc thiết lập hình nền cho phần tử không phải chỉ có thể sử dụng duy nhất một tấm ảnh, ta có thể sử dụng nhiều tấm hình bằng cách sử dụng nhiều url giá trị() (tấm hình nào được khai báo trước đó thì nó sẽ - Lưu ý. Việc sử dụng nhiều tấm hình để thiết lập hình nền cho phần tử chỉ thích hợp khi các tấm hình đó thuộc định dạng GIF hoặc PNG (loại hình ảnh có một số vị trí trong suốt). Nếu sử dụng loại hình không có phần trong suốt, thì nó sẽ đảo ngược hoàn toàn lên tấm bên dưới, tấm bên dưới không được hiển thị 3. 2) Hình nền kết hợp với màu nền- Nếu bạn thiết lập hình nền cho phần tử bằng loại hình ảnh có một số vị trí trong suốt, thì khi đó bạn có thể sử dụng kết hợp với thuộc tính màu nền để thêm màu nền vào những vị trí trong suốt, làm 4) Giới thiệu sơ lược về "sự lặp lại của hình nền"- Mặc định, hình nền sẽ xuất phát từ vị trí góc "phía trên - bên trái" của phần tử - Nếu hình ảnh được sử dụng để làm hình nền cho phần tử có kích thước nhỏ hơn kích thước của phần tử thì hình nền sẽ tự động được lặp lại để lấp đầy diện tích của phần tử (Xem ví dụ) - Chúng ta có thể thiết lập lặp lại của hình nền (lặp lại, không lặp lại, chỉ lặp theo chiều ngang, chỉ lặp theo chiều dọc,. ) bằng cách sử dụng thuộc tính lặp lại nền trong CSS |
