この記事では、HTML5で画像の絶対パスをファイルオブジェクトに変換してみんなで共有する方法を紹介します。詳細は次のとおりです。
画像の絶対パスをbase64エンコードに変換するには、この記事を参照してください。
まずは基本的な知識を理解しましょう。
1. HTML5 の FileList オブジェクトとファイル オブジェクトを理解します。HTML5 では、FileList オブジェクトはユーザーが選択したファイルのリストを表します。 multipe 属性を追加すると、ファイル コントロール内で複数のファイルを一度に選択できます。コントロール内でユーザーが選択した各ファイルはファイル オブジェクトであり、FileList オブジェクトはファイル オブジェクトのリストです。ユーザーが選択したすべてのファイルを表します。まず、ファイル オブジェクトがどのような属性を持っているかを確認するための簡単なデモを見てみましょう。次のコード:
<!DOCTYPE html><html> <head> <title>filesystem:URL</title> </head> <body> <div> <label>Select:</label> <input type='file' multiple id= file /> <input type=button value=ファイルアップロード onClick=showFile() /> </div> <script> function showFile() { var files = document.getElementById('file').files; // Return all selected files for (var i = 0, ilen = files.length; i < ilen; i++) { // 単一のファイル オブジェクトの情報を出力します console.log(files[i]); /* * 出力します情報は次のとおりです: File { 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: } */ /* したがって、アップロードされたファイルが画像ファイルであるかどうかを判断する必要がある場合は、次のようにタイプに応じて判断できます。 /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 オブジェクトには 2 つの属性があり、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=Show file information 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; 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 Canvas = document.createElement(canvas); Canvas.width = img.width; 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, type: image/+ext var img = https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg; var image = new Image(); image.src = image.onload = 関数(){ varbase64 = getBase64Image(image); /*印刷情報は次のとおりです: { dataURL: data:image/png;base64,xxx type: image/jpg } */ var img2 = ConvertBase64UrlToBlob(base64); /* 印刷情報は次のとおりです。 : Blob {サイズ: 9585 、タイプ: image/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 をご支援いただければ幸いです。