데이터 URI 체계에 대한 자세한 설명과 사용 예 및 이미지 base64 인코딩 구현 방법

데이터 URI 체계에 대한 자세한 설명과 사용 예 및 이미지 base64 인코딩 구현 방법_html5 튜토리얼 기술

WBOY

풀어 주다： 2016-05-16 15:47:56

원래의

2428명이 탐색했습니다.

1. 데이터 URI 체계 소개

데이터 URI 체계는 RFC2397에 정의되어 있습니다. 그 목적은 일부 작은 데이터를 웹 페이지에 직접 삽입하여 외부 파일에서 로드할 필요가 없도록 하는 것입니다. 예를 들어 위의 문자열은 실제로는 작은 그림입니다. 이 문자를 복사하여 Firefox의 주소 표시줄에 붙여넣고 이동하면 1X36 흰색 및 회색 png 그림이 표시됩니다.
위 데이터 URI에서 data는 데이터를 얻기 위한 프로토콜 이름을 나타내며, image/png는 데이터 유형 이름, base64는 데이터의 인코딩 방법, 쉼표 뒤에 오는 것은 이미지의 base64로 인코딩된 데이터입니다. /png 파일입니다.
아마도 일부 웹 페이지에서 이미지의 src 또는 css 배경 이미지 URL이 일반적인 온라인 이미지 링크가 아니라 다음과 같은 큰 문자열임을 눈치채셨을 것입니다.

코드 복사

코드는 다음과 같습니다.

data:image/gif;base64,R0lGODlhkQAtAKIAAAAAAP///1a 5zfn9/// / waAAAAAAAAAAAACH5BAEAAAQALAAAAACRAC0AQAP/SLrc/jDKSau9uIrsxN5cAxJeSI5MmV6q4r1w3JKRDC/2W1Mz3/GoVO8UE2GGK MEVQoKP04XKJqJBj /DpUVGXgb3vAA/GWIz2EFekxIq8WLcnxNr8sddnd7bUn7v 2V /e4BjhIaDg4WJinCBhWdvi5B/j5WIgolvelxCIU5bSRygV1kQOVoySyY0WkqfnKESr7GotDtStzi4OLNSSKgzvxZIpKC6rKKrysNWxstHzs UjZWPmYbUlpOLbZds1YeU3mjj5OWObF1565Pg7nqQ m uzz5PT2m6I3ykXPyzf8 fQd8XfMRItopqiQ0oBslUKEpgp6upJKRMVSEpccHOgi/9eDUVZqdRqGMSJGYR2JQDNWrJWtkR8hpnyZ0Ei0KTJ3meT1ZMqPnC6BlpzZ8VPFHEZt1Cgi7CIRgTGhPkVKV eFIJ judgqojj52ye/H6iQ0hTh6iPWglzTFXj5u2b rSxcUDTw6ftXceiBPkhtCcs2XNgutGTc1aTePOuQ3nd9pZCPjMbILzN2/YS265mZEQWfLkvJAjdx5LurTp0xpGoJSlNHXV1kthro4Jk8Wpn 헤라 gN4wuCWhbxaC81I03bvfcSNf1SS pnVfVAIJme4vDhtnRqnT5WqO3jS7z6Ys7a4lKn26g3FVwnZqVd460QzsnT6dLdH77 IURwqi796/P/ZnYcea/R1d9197wnoy08JwobfbMXs R5NUT yTkoC/0yZeeSCONUgoTPag2HDIjJtdSgLO5NGB8x8WHxXj9bZhMSS lGJsKqoEowoh9qhDQTdmpV6N2PGEHI4YXugfagEdxJtFr1FFwV1d2SENZZKYw SWZIBFB15y/QWml1/OM6VdoGVywV7tvF Wll2g14s2bZ IZJJ5wTsJlYnOggpiY2jMiJyTt8vmVJN36iadafaXqWZaHWFMYHm435cQ1c9TBmaJlWHrJnaIYWGklf1iAWiGCZFZbWZImV9Y2mc4rWqKmwUsonYLVWQ5iqr1IGqK pNr2fWmWmWXA3 2jrEFzJL5QAIAOw==

이게 뭐죠? 오늘 스크립트하우스에서 소개할 Data URI Scheme입니다.

현재 데이터 URI 체계에서 지원되는 유형은 다음과 같습니다.

코드 복사

코드는 다음과 같습니다. 다음:

데이터:, 텍스트 데이터
데이터:text/plain, 텍스트 데이터
data:text/html, HTML 코드
data:text/html; 인코딩된 HTML 코드
data:text/css,CSS 코드
data:text/css;base64,base64 인코딩된 CSS 코드
data:text/javascript,Javascript 코드
data:text/javascript;base64 ,base64 인코딩된 Javascript 코드
data:image/gif;base64,base64 인코딩된 gif 이미지 데이터
data:image/png;base64,base64 인코딩된 png 이미지 데이터
data:image/jpeg;base64,base64 인코딩 jpeg 이미지 데이터
data:image/x-icon; base64, base64로 인코딩된 아이콘 이미지 데이터
base64 간단히 말하면 일부 8비트 데이터를 PHP에서 사용할 수 있는 표준 ASCII 문자로 변환합니다. 함수 base64_encode() 인코딩을 수행합니다.

현재 IE8, Firefox, Chrome 및 Opera 브라우저는 모두 이 작은 파일 삽입을 지원합니다. IE7 이하 버전의 경우 데이터 URI 체계의 호환성 문제는 MHTML을 사용하여 해결할 수 있습니다.

예를 들어

웹 페이지의 사진은 다음과 같이 표시될 수 있습니다.

코드 복사

코드는 다음과 같습니다.

도 사용할 수 있습니다. 다음과 같이 표시됩니다.

코드 복사

코드는 다음과 같습니다.

두 개의 그림 base64 编码的实现方法示例

2.1 JS 🎜 >function readFile(){ var file = this.files[0]; if(!/image/w /.test(file.type)){

Alert("请确保文件为图image类型");

return false;
}
var reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = function(e){ result.innerHTML = '

'; img_area.innerHTML = '

이미지img标签展示：< ;/div>

'; }}

2.2 HTML5용 FileReader용 FileReader 이미지 base64 编码

HTML5 Javascript 版本核心代码：
var file = this.files[0];
if(!/image/w /.test(file.type)){
Alert("请确保文件为图image类型");
return false ;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
result.innerHTML = '

';
img_area.innerHTML = '

이미지img标签 확장:

';
}

}