Như bạn đã biết, để nhúng hình ảnh từ bên ngoài vào website, thì ta sẽ cần bỏ cả link ảnh vào thẻ trong HTML hoặc vào background-image trong CSS. Nhưng hôm nay, mình sẽ giới thiệu đến bạn cách “biến” ảnh hoặc file thành chuỗi dữ liệu và nhúng trực tiếp vào website với Data URIs trong HTML hoặc vào background-image trong CSS. Nhưng hôm nay, mình sẽ giới thiệu đến bạn cách “biến” ảnh hoặc file thành chuỗi dữ liệu và nhúng trực tiếp vào website với Data URIs
Mục bài viết
- Data URIs là gì ?
- Tại sao phải dùng Data URIs ?
- Tạo Data URIs như thế nào ?
- Sử dụng tool có sẵn
- Sử dụng PHP
Là 1 tập tin được mã hóa base64 thành chuỗi dữ liệu. Bạn có thể dùng chuỗi dữ liệu này để nhúng vào HTML hoặc CSS. Khi trình duyệt gặp 1 chuỗi Data URIs trong website của bạn, nó sẽ tự động giải mã và xuất ra thành file hình ảnh trên màn hình. Không khác gì khi bạn nhúng link tập tin theo cách cổ điển.
Với Data URIs, bạn có thể dùng cho nhiều loại file khác nhau, nhưng phổ biến nhất là dùng cho hình ảnh trên website hoặc font chữ.
Đây là format của Data URIs
data:[][;charset=][;base64],
Data URIs trong thực tế
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAiAAAAC0CAMAA.......còn rất là dài
Tại sao phải dùng Data URIs ?
Tạo Data URIs như thế nào ?
Sử dụng tool có sẵn
Sử dụng PHP
Tạo Data URIs như thế nào ?
Sử dụng tool có sẵn
Sử dụng PHP
Sử dụng PHP
Là 1 tập tin được mã hóa base64 thành chuỗi dữ liệu. Bạn có thể dùng chuỗi dữ liệu này để nhúng vào HTML hoặc CSS. Khi trình duyệt gặp 1 chuỗi Data URIs trong website của bạn, nó sẽ tự động giải mã và xuất ra thành file hình ảnh trên màn hình. Không khác gì khi bạn nhúng link tập tin theo cách cổ điển.
function imageEncode[$img]{
$image = file_get_contents[$img];
$type = pathinfo[$img, PATHINFO_EXTENSION];
$src = 'data:image/'. $type .';base64,'. base64_encode[$image];
return $src;
}Với Data URIs, bạn có thể dùng cho nhiều loại file khác nhau, nhưng phổ biến nhất là dùng cho hình ảnh trên website hoặc font chữ.