의견 : 인라인 이미지가 Base64로 인코딩 되더라도 HTTP 요청을 줄일 수 있지만 단점은 도메인에 걸쳐 캐싱 할 수 없다는 것입니다. HTML5 파일 API에서 readasdataurl 함수를 사용하십시오. 파일을 Base64로 변환하는 코드입니다.
방금 감인 된 그림의 개념과 접촉했습니다. 상감 된 그림이 Base64로 인코딩 되더라도 다음 코드를 보면 인라인 문제입니다.HTTP 요청을 줄일 수 있지만 단점은 도메인을 가로 질러 캐싱 할 수 없다는 것입니다!
<img src = "data : image/jpeg; base64,/9j/4qqsrx ...">
그런 다음 사진을 Base64 Online으로 변환하는 방법
간단한 JavaScript에만 의존하는 경우 권한 문제가 있으며 보안 문제에 대해 로컬 파일 파일 또는 폴더가 작동하지 않습니다.
이제 HTML5가 Baidu에 오 셨기 때문에 W3C에 대한 중국어 및 기타 많은 문서에 대한 정보가 많이 있습니다.
이제 우리는 html5 파일 API에서 readasdataurl 함수를 사용합니다.이 파일은 Base64 인코딩으로 변환됩니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> PIC2BASE64에 대한 간단한 HTML5 파일 테스트 </title>
<스타일>
</스타일>
<cript>
Window.onload = function () {
var input = document.getElementById ( "demo_input");
var result = document.getElementById ( "결과");
var img_area = document.getElementById ( "img_area");
if (typeof (filereader) === 'undefined') {
result.innerhtml = "죄송합니다. 브라우저는 Filereader를 지원하지 않으므로 최신 브라우저를 사용하여 작동하십시오!";
input.setattribute ( 'disabled', 'disabled');
} 또 다른 {
input.addeventListener ( 'change', readfile, false);}
}
함수 readFile () {
var file = this.files [0];
// 여기에서 우리는 유형이 그림이 아닌 경우 유형을 판단한 다음 반환하고 제거하고 파일을 업로드합니다.
if (!/image /// w+/. test (file.type)) {
알림 ( "파일이 이미지 유형인지 확인하십시오");
거짓을 반환합니다.
}
var reader = new Filereader ();
reader.readasdataurl (파일);
reader.onload = function (e) {
result.innerhtml = '<img src = "'+this.result+'" />';
img_area.innerhtml = '<div> 이미지 IMG 태그 디스플레이 : < /div> <img src = "'+this.result+'" />';
}
}
</스크립트>
</head>
<body>
<입력 유형 = "파일"value = "sdgsdg" />
<TextRea Rows = 30 cols = 300> </textarea>
<p> </p>
</body>
</html>