Node.js는 readAsDataURL을 사용하여 이미지 파일 예제 코드를 읽습니다.
- 零下一度원래의
- 2017-05-11 13:37:181553검색
이 기사에서는 readAsDataURL을 사용하여 이미지 파일을 읽는 JavaScript 방법을 주로 소개합니다. 관심 있는 친구는
FileReader를 참조할 수 있습니다. 읽은 파일을 데이터 URL로 인코딩합니다. 데이터 URL은 데이터(예: 사진)를 외부 파일에 배치하지 않고 웹 페이지에 삽입할 수 있는 특수 기술입니다. 데이터 URL을 사용하면 추가 데이터를 얻기 위해 서버에 추가 HTTP 요청을 보낼 필요가 없다는 장점이 있습니다. 단점은 웹 페이지의 크기가 더 커질 수 있다는 것입니다. 작은 이미지를 포함하는 애플리케이션에 적합합니다. 큰 이미지 파일을 데이터 URL로 인코딩하여 사용하는 것은 권장되지 않습니다. 이미지 파일은 브라우저의 크기 제한을 초과할 수 없습니다. 그렇지 않으면 이미지 파일을 읽을 수 없습니다.
readAsDataURL을 사용하여 이미지 파일을 읽는 다음 예를 참조하세요.
<!DOCTYPE html>
<html xmlns = "www.w3.org/1999/xhtml" >
<head>
<title> </title>
<script type = "text/javascript" >
function ProcessFile( e ) {
var file = document.getElementById('file').files[0];
if (file) {
var reader = new FileReader();
reader.onload = function ( event ) {
var txt = event.target.result;
document.getElementById("result").innerHTML = txt;
};
}
reader.readAsDataURL( file );
}
function contentLoaded () {
document.getElementById('file').addEventListener( 'change' ,
ProcessFile , false );
}
window.addEventListener( "DOMContentLoaded" , contentLoaded , false );
</script>
</head>
<body>
请选取一个图像文件: <input type = "file" id = "file" name = "file" />
<p id = "result"> </p>
</body>
</html> readAsDataURL 메서드는 인코딩에 base-64를 사용합니다. 인코딩된 데이터는 데이터 문자열로 시작됩니다. 그 뒤에 MIME 유형이 오고, base64 문자열을 추가하고, 쉼표 뒤에는 인코딩된 이미지 파일의 내용이 옵니다.
Img를 사용하여 이미지 파일 표시
읽은 이미지 파일을 웹페이지에 직접 표시하려면 JavaScript를 통해 a1f02c36ba31691bcfe87b2722de723b 태그를 생성한 후 src를 설정하면 됩니다. 속성은 데이터 URL이고 다음 예와 같이 DOM에 a1f02c36ba31691bcfe87b2722de723b 태그를 추가합니다.
<!DOCTYPE html>
<html xmlns = "www.w3.org/1999/xhtml" >
<head>
<title> </title>
<script type = "text/javascript" >
function ProcessFile( e ) {
var file = document.getElementById('file').files[0];
if ( file ) {
var reader = new FileReader();
reader.onload = function ( event ) {
var txt = event.target.result;
var img = document.createElement("img");
img.src = txt;
document.getElementById("result").appendChild( img );
};
}
reader.readAsDataURL( file );
}
function contentLoaded() {
document.getElementById('file').addEventListener( 'change' ,
ProcessFile , false );
}
window.addEventListener( "DOMContentLoaded" , contentLoaded , false );
</script>
</head>
<body>
请选取一个图像文件: <input type = "file" id = "file" name = "file" />
<p id = "result"> </p>
</body>
</html>파일의 일부 읽기
때때로 읽기 파일이 너무 커서 세그먼트로 읽고 싶은 경우, 또는 파일의 일부만 읽고 싶은 경우, 브라우저에 따라 다음 방법을 사용할 수 있습니다. 🎜>webkitSlice: Chrome과 같은 Webkit 엔진 브라우저를 지원하는 데 적용 가능합니다.
mozSlice: Firefox용.
이 두 가지 방법은 시작 바이트 인덱스와 끝 바이트 인덱스를 전달해야 합니다. 인덱스는 0으로 시작합니다. 다음 프로그램 예제에서는 FileReader 개체의 readAsBinaryString 메서드를 사용하여 파일의 세 번째 바이트만 읽고 여섯 번째 바이트를 읽습니다.
<!DOCTYPE html>
<html xmlns ="www.w3.org/1999/xhtml" >
<head>
<title> </title>
<script type = "text/javascript" >
function ProcessFile( e ) {
var file = document.getElementById( 'file' ).files[0];
if ( file ) {
var reader = new FileReader ();
reader.onload = function ( event ) {
var txt = event.target.result;
document.getElementById( "result" ).innerHTML = txt;
};
}
if ( file.webkitSlice ) {
var blob = file.webkitSlice( 2, 4 );
} else if ( file.mozSlice ) {
var blob = file.mozSlice( 2, 4 );
}
reader.readAsBinaryString( blob );
}
function contentLoaded() {
document.getElementById( 'file' ).addEventListener( 'change' ,
ProcessFile , false );
}
window.addEventListener( "DOMContentLoaded", contentLoaded , false );
</script>
</head>
<body>
<input type = "file" id = "file" name = "file" />
<p id = "result" > </p>
</body>
</html>참고: php.cn Dugu Jiujian (3) - JavaScript 비디오 튜토리얼
위 내용은 Node.js는 readAsDataURL을 사용하여 이미지 파일 예제 코드를 읽습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!