HTML 파일 내에서 이미지 데이터를 인코딩하는 방법은 무엇입니까?

Question

이미지를 포함하는 HTML 파일을 출력 할 수 있기를 원합니다 (파일 자체 내에서). 인터넷 검색, 나는이 작업을 수행하는 몇 가지 방법을 통해 왔어요 :

• javascript:imageData
• 데이터 URI 등 <IMG SRC="data:image/gif;base64,[...]">
• <object ... > 태그 (이 데이터 URI를 사용하지만, 그래서 동일한을 상속 할 수있다 제한)

그러나 브라우저에서 더 잘 지원되는지 또는 다른 대안이 있는지 알 수 없습니다.

실용적인 경험이있는 사람이라면 누구에게 조언 해 줄 수 있습니까? 감사.

Answer 1

, Wikipedia에서 :

데이터 URI를 현재 지원되는 에 의해 다음과 같은 웹 브라우저 :

• 게코 및 그 유도체, 모질라 파이어 폭스
로
• Opera
• KIO 입/출력 시스템을 통해. 이렇게하면 KDE 브라우저 인 Konqueror에서 데이터 URI를 지원할 수 있습니다.
• Safari; Safari의 렌더링 엔진 인 WebKit은 Konqueror의 KHTML 엔진의 파생물이지만 Mac OS X은 KIO 슬레이브 아키텍처를 공유하지 않으므로 구현이 공유되지 않습니다.
• iPhone 용 Safari;
• Google 크롬
• Internet Explorer 8; Microsoft는 데이터 URI에 포함 된 JavaScript가 웹 기반 전자 메일과 같은 스크립트 필터로 해석 할 수 없다는 우려를 포함하여 보안상의 이유로 태그 및 CSS 규칙과 같은 특정 "탐색 할 수없는"콘텐츠에 대한 지원을 제한했습니다 고객. 데이터 URI는 32k보다 작아야합니다.
• 월드 브라우저; 올바르게 <object> 태그를 처리 자세한 내용은 here가 표시되지 않는 데이터 URI 방식

IE를위한 내장 지원이있는 IE 셸 브라우저입니다. 간단히 말해, IE가 IE에서 이미지를 표시하는 것을 신뢰할 수 없습니다.

javascript:imageData도 많은 사이트 간 스크립팅 공격에 사용되므로 잘 지원되지 않습니다.

web에는 this에 대한 많은 토론이 있으며, 이미지를 퍼갈 수있는 보편적 인 방법이 없다는 결론에 도달했습니다. 브라우저의 하위 집합 만 지원하면 데이터 uri가 작동하거나 데이터 uri와 javascript가 함께 작동 할 수 있습니다.

Answer 2

imageData는 좀 더 융통성이 있습니다. 예를 들어 일부에서는 데이터 유 리를 32k로 제한합니다.

Answer 3

데이터 URI 방식이 잘 나는 약간 더 나은 지원하지만, JS를 사용할 수없는 경우 실패 할 생각입니다 버전 8

자바 스크립트 URI를하기 전에 인터넷 익스플로러를 제외하고 합리적인 지원됩니다.

당신이 할 수있는 최선의 일은 외부 이미지 자원에 집중하는 것입니다.

Answer 4

데이터 URI는 < IE8에서 작동하지 않습니다. IE8은 최대 32KB까지 지원합니다.

브라우저 지원에 관해서