이 글에서는 HTML5에서 이미지의 절대 경로를 파일 객체로 변환하고 모든 사람과 공유하는 방법을 소개합니다.
이미지의 절대 경로를 base64 인코딩으로 변환하려면 이 문서를 참조하세요.
먼저 기본 지식 포인트를 이해해 봅시다:
1. HTML5의 FileList 객체와 파일 객체를 이해합니다.HTML5에서 FileList 객체는 사용자가 선택한 파일 목록을 나타냅니다. multipe 속성을 추가하면 파일 제어 내에서 여러 파일을 한 번에 선택할 수 있습니다. 컨트롤에서 사용자가 선택한 각 파일은 파일 개체이고 FileList 개체는 파일 개체 목록입니다. 사용자가 선택한 모든 파일을 나타냅니다. 먼저 간단한 데모를 통해 파일 객체에 어떤 속성이 있는지 살펴보겠습니다. 다음 코드:
<!DOCTYPE html><html> <head> <title>filesystem:URL</title> </head> <body> <div> <label>선택:</label> <input type='file' 다중 id= file /> <input type=button value=파일 업로드 onClick=showFile() /> </div> <script> function showFile() { var files = document.getElementById('file').files; 선택한 모든 파일 반환 for (var i = 0, ilen = files.length; i < ilen; i++) { // 단일 파일 객체의 정보를 인쇄합니다. console.log(files[i]) /* * Printed The 정보는 다음과 같습니다: 파일 { lastModified: 1457946612000 lastModifiedDate: Mon Mar 14 2016 17:10:12 GMT+0800 (CST) {} name: test.html size: 796 type: text/html webkitRelativePath: */ /* 이미지가 업로드되면 다음 정보가 반환됩니다. File { lastModified: 1466907500000 lastModifiedDate: Sun Jun 26 2016 10 : 18:20 GMT+0800(CST) {} 이름: a.jpg 크기: 23684 type: image/jpeg webkitRelativePath: } */ /* 따라서 업로드한 파일이 이미지 파일인지 판단해야 하는 경우 다음과 같이 유형에 따라 판단하면 됩니다. var file = files[i] if (! /image// /w+/.test(file.type)) { console.log('이 파일은 이미지 파일이 아닙니다.') } else { console.log('이 파일은 이미지 파일입니다.') }; 그러나 이미지만 전송하려는 경우 이미지 컨트롤에 accept=image/* 속성을 추가하면 다음과 같이 코드를 작성할 수 있습니다. <input type='file' multiple accept = 'image/gif,image/jpeg ,image/ jpg,image/png' /> */ } } </script> </body></html> 2. Blob 객체 이해요점: HTML5에서는 원본 바이너리 데이터를 나타내기 위해 새로운 Blob 객체가 추가되었습니다. 실제로 파일 객체도 Blob 객체를 상속합니다.
Blob 객체에는 두 가지 속성이 있습니다. size 속성은 Blob 객체의 바이트 길이를 나타내고, type 속성은 Blob의 MIME 유형을 나타냅니다.
다음 코드를 살펴보십시오.
<!DOCTYPE html><html> <head> <title>filesystem:URL</title> </head> <body> <div> <label>파일 선택:</label> <input type=file id=file / > <input type=button value=파일 정보 표시 onClick=showFileType() /> <p>파일 바이트 길이: <span id=size></span></p> <p>파일 형식: <span id=type></span></p> </div> <script> function showFileType() { var file; // 사용자가 선택한 첫 번째 파일 가져오기 file = document.getElementById('file').files[ 0]; var size = document.getElementById('size'); var type = document.getElementById('type'); // 파일 길이를 바이트 단위로 표시합니다. 파일 유형을 표시합니다. type.innerHTML = file.type; // 반환된 파일 객체를 보려면 콘솔을 엽니다. console.log(file) } </script> </body></html>참고: Blob과 File은 동시에 사용할 수 있으며 FileReader를 사용하여 Blob에서 데이터를 읽을 수 있습니다.
다음은 Base64로 인코딩된 이미지로 변환된 절대경로 이미지 주소이며, Base64로 인코딩된 이미지를 Blob 객체로 변환한 것이다. 코드는 다음과 같습니다:
<!DOCTYPE html><html> <head> <title>base64 이미지 URL 데이터를 Blob으로 변환</title> </head> <body> <script> /** * base64 이미지 URL 데이터를 Blob용으로 변환 * @param urlData * url 모드로 표현된 base64 이미지 데이터 */ function ConvertBase64UrlToBlob(base64){ var urlData = base64.dataURL var type = base64.type; var bytes = window.atob(urlData.split(',')[1]); //url의 헤더를 제거하고 바이트로 변환합니다. //예외를 처리하고 0보다 작은 ASCII 코드를 0보다 큼 var ab = new ArrayBuffer(bytes.length); var ia = new Uint8Array(ab) for (var i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } return new Blob( [ab] , {type : type}) } /* * 다음과 같이 이미지의 절대 경로 주소를 base64 인코딩으로 변환합니다. */ function getBase64Image(img) { var 캔버스 = document.createElement(캔버스); canvas.width = img.width = img.height; canvas.getContext(2d); ctx.drawImage(img, 0, 0, img.width, img.height); var ext = img.src.substring(img.src.lastIndexOf(.)+1).toLowerCase() ; var dataURL = canvas.toDataURL(image/+ext); return { dataURL: dataURL, 유형: 이미지/+ext }; } var img = https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg; image.crossOrigin = ''; (){ var base64 = getBase64Image(image); console.log(base64); 인쇄 정보는 다음과 같습니다. { dataURL: data:image/png;base64,xxx type: image/jpg } */ var img2 = ConvertBase64UrlToBlob(base64); console.log(img2); : Blob {크기: 9585 , 유형: 이미지/jpg} */ } </script> </body></html>참고: HTML5에서는 원래 바이너리 데이터를 나타내기 위해 새로운 Blob 객체가 추가되었습니다. 실제로 파일 객체도 Blob 객체를 상속합니다. 따라서 이미지의 절대 주소를 사용하여 이미지를 파일 객체로 변환할 수 있습니다.
따라서 이미지의 절대 주소를 사용하여 파일 객체로 변환할 수 있습니다. 자세한 데모를 보려면 플러그인이 먼저 이미지 업로드를 지원하는 것을 볼 수 있는데 갑자기 그 사실을 알게 되었습니다. 편집 페이지로 이동하면 기본 이미지를 표시해야 합니다. 동시에 기본적으로 사진을 표시할 때 새 사진을 계속 업로드하거나 모든 사진을 삭제하는 것도 지원됩니다. 나에게 그림의 절대 주소가 있어서, 그림의 절대 주소를 파일 객체로 변환하는 방법이 궁금합니다. 변환하지 않으면 파일 객체가 된다면 이 코드를 사용할 때 var reader = new FileReader()는 오류를 보고하므로 위에서 설명한 blob 개체를 사용하여 먼저 이를 blob 개체로 변환한 다음 파일 작업 개체 fileReader를 사용할 수 있습니다.
자세한 코드는 내 git(https://github.com/tugenhua0707/html5UploadImage)의 이미지 업로드 컨트롤을 참조하세요. 효과는 https://tugenhua0707.github.io/html5UploadImage/index.html을 참조하세요.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.