ホームページ >ウェブフロントエンド >jsチュートリアル >HTML5で画像の絶対パスをファイルオブジェクトに変換する方法を詳しく解説

HTML5で画像の絶対パスをファイルオブジェクトに変換する方法を詳しく解説

小云云オリジナル: 2018-01-13 11:15:198063ブラウズ

この記事では主にHTML5で画像の絶対パスをファイルオブジェクトに変換する方法を紹介します。編集者が非常に良いと思ったので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

画像の絶対パスをbase64エンコードに変換するには、この記事を読んでください

まず基礎知識のポイントを理解しましょう:

1. HTML5のFileListオブジェクトとファイルオブジェクトを理解します。

HTML5 では、FileList オブジェクトはユーザーが選択したファイルのリストを表します。 multipe 属性を追加すると、ファイルコントロール内で複数のファイルを一度に選択できます。コントロール内でユーザーが選択した各ファイルはファイルオブジェクトであり、FileList オブジェクトはファイルオブジェクトのリストです。ユーザーが選択したすべてのファイルを表します。まず、ファイルオブジェクトがどのような属性を持っているかを確認するための簡単なデモを見てみましょう。次のコード:

<!DOCTYPE html>
<html>
  <head>
    <title>filesystem:URL</title>
  </head>
  <body>
    <p>
      <label>选择：</label>
      <input type=&#39;file&#39; multiple id="file" />
      <input type="button" value="文件上传" onClick="showFile()" />
    </p>
    <script>
      function showFile() {
        var files = document.getElementById(&#39;file&#39;).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) {}
              name: "a.jpg"
              size: 23684
              type: "image/jpeg"
              webkitRelativePath: ""
            }
          */
          /*
           因此 如果需要判断该上传的文件是不是图像文件的话，可以根据type类型来判断如下：
           var file = files[i];
           if (!/image\/\w+/.test(file.type)) {
              console.log(&#39;该文件不是图像文件&#39;);
           } else {
              console.log(&#39;该文件是图像文件&#39;);
           }

           但是如果只让传图片的话，可以在image控件添加一个属性 accept="image/*" 即可；我们可以如下写代码：
           <input type=&#39;file&#39; multiple accept = &#39;image/gif,image/jpeg,image/jpg,image/png&#39; />
           */
        }
      }
    </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>
    <p>
      <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>
    </p>
    <script>
      function showFileType() {
        var file;
        // 获取用户选择的第一个文件
        file = document.getElementById(&#39;file&#39;).files[0];
        var size = document.getElementById(&#39;size&#39;);
        var type = document.getElementById(&#39;type&#39;);
        // 显示文件字节的长度
        size.innerHTML = file.size;
        // 显示文件的类型
        type.innerHTML = file.type;

        // 打开控制台 查看返回的file对象
        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(&#39;,&#39;)[1]); //去掉url的头，并转换为byte
        //处理异常,将ascii码小于0的转换为大于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.height = img.height;
        var ctx = 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.crossOrigin = &#39;&#39;;
      image.src = img;
      image.onload = function(){
        var base64 = getBase64Image(image);
        console.log(base64);
        /*
         打印信息如下：
         {
          dataURL: "data:image/png;base64,xxx"
          type: "image/jpg"
         }
         */
        var img2 = convertBase64UrlToBlob(base64);
        console.log(img2);
        /*
         打印信息如下：
         Blob {size: 9585, type: "image/jpg"}
         */
      } 
    </script>
  </body>
</html>

注: HTML5 では、元のバイナリデータを表すために新しい Blob オブジェクトが追加されます。実際、ファイルオブジェクトも Blob オブジェクトを継承します。したがって、画像の絶対アドレスを使用して画像をファイルオブジェクトに変換できます。

したがって、画像の絶対アドレスを使用して画像をファイルオブジェクトに変換できます。詳細なデモについては、私の git で画像アップロードコントロールを参照してください。プラグインは最初に画像のアップロードをサポートしていましたが、その後、突然そのことがわかりました。編集ページに移動するときは、デフォルトの画像を表示する必要があります。デフォルトで画像を表示しながら新しい画像をアップロードしたり、すべての画像を削除したりすることもできます。ただし、開発者は画像の絶対アドレスしか教えてくれませんでした。画像の絶対アドレスをファイルオブジェクトに変換する方法を疑問に思ったのですが、ファイルオブジェクトに変換しないと、このコードを使用するとエラーが報告されます。上で説明した BLOB オブジェクトを最初に BLOB オブジェクトに変換してから、ファイル操作オブジェクト fileReader を使用できます。

HTML5で画像の絶対パスをファイルオブジェクトに変換する方法を詳しく解説

関連記事