Làm thế nào để mã hóa dữ liệu hình ảnh trong một tệp HTML?

Question

Tôi muốn có thể xuất tệp HTML bao gồm hình ảnh (trong chính tệp đó). Bởi Googling, tôi đã đi qua một vài cách để làm điều này:

• javascript:imageData
• một dữ liệu URI như <IMG SRC="data:image/gif;base64,[...]">
• <object ... > thẻ (mặc dù điều này sử dụng một dữ liệu URI, như vậy có thể kế thừa cùng giới hạn)

Nhưng tôi không biết trình duyệt nào được trình duyệt hỗ trợ tốt hơn hoặc nếu có các lựa chọn thay thế khác.

Có ai có kinh nghiệm thực tế về đề nghị này cho tôi lời khuyên không? Cảm ơn.

Answer 1

Liên quan đến hỗ trợ trình duyệt, từ Wikipedia:

URI Dữ liệu hiện đang được hỗ trợ bởi các trình duyệt web sau đây:

• Gecko và các dẫn xuất của nó, chẳng hạn như Mozilla Firefox
• Opera
• KDE, thông qua hệ thống đầu vào/đầu ra KIO. Điều này cho phép trình duyệt KDE, Konqueror hỗ trợ URI dữ liệu.
• Safari; mặc dù công cụ dựng hình của Safari, WebKit, là một dẫn xuất của công cụ KHTML của Konqueror, Mac OS X không chia sẻ kiến ​​trúc nô lệ KIO để các triển khai không được chia sẻ.
• Safari dành cho iPhone;
• Google Chrome
• Internet Explorer 8; Microsoft đã hạn chế hỗ trợ cho một số nội dung "không thể điều hướng", chẳng hạn như trong thẻ và quy tắc CSS, vì lý do bảo mật, bao gồm các lo ngại rằng JavaScript được nhúng trong URI dữ liệu có thể không giải thích được bằng bộ lọc tập lệnh. khách hàng. URI dữ liệu phải nhỏ hơn 32k.
• Trình duyệt Thế giới; là trình duyệt trình duyệt IE có hỗ trợ tích hợp cho sơ đồ URI dữ liệu

IE không xử lý thẻ <object> chính xác, xem here để biết thêm chi tiết. Tóm lại, bạn không thể tin tưởng IE để hiển thị hình ảnh từ nó.

javascript:imageData cũng không được hỗ trợ tốt vì nó được sử dụng trong nhiều cuộc tấn công tập lệnh chéo trang web.

Có nhiều cuộc thảo luận về this trên web và tất cả đều đi đến kết luận rằng không có cách phổ biến tốt để nhúng hình ảnh. Nếu bạn chỉ cần hỗ trợ một tập hợp con của các trình duyệt, dữ liệu uri có thể hoạt động hoặc kết hợp dữ liệu uri và javascript.

Answer 2

imageData linh hoạt hơn, ví dụ: một số nghĩa là hạn chế dữ liệu chuyển thành 32k.

Answer 3

Các dữ liệu URI scheme là hợp lý được hỗ trợ tốt ngoại trừ trong Internet Explorer trước khi phiên bản 8.

Javascript URI là, tôi nghĩ rằng, tốt hơn một chút hỗ trợ nhưng thất bại nếu JS là không có.

Điều tốt nhất bạn có thể làm là gắn bó với các tài nguyên hình ảnh bên ngoài.

Answer 4

URI dữ liệu sẽ không hoạt động ở < IE8. IE8 hỗ trợ chúng lên đến 32KB.