suchen

Heim  >  Artikel  >  Web-Frontend  >  Ausführliche Erläuterung der Konvertierung des absoluten Pfads eines Bildes in ein Dateiobjekt in HTML5

Ausführliche Erläuterung der Konvertierung des absoluten Pfads eines Bildes in ein Dateiobjekt in HTML5

小云云
小云云Original
2018-01-13 11:15:198045Durchsuche

In diesem Artikel wird hauptsächlich vorgestellt, wie man den absoluten Pfad eines Bildes in ein Dateiobjekt in HTML5 konvertiert. Der Editor findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Konvertieren Sie den absoluten Pfad des Bildes in Base64-Codierung. Bitte lesen Sie diesen Artikel.

Lassen Sie uns zunächst die grundlegenden Wissenspunkte verstehen:

1. Verstehen Sie das HTML5-FileList-Objekt und Dateiobjekt.

In HTML5 stellt ein FileList-Objekt eine Liste der vom Benutzer ausgewählten Dateien dar. Durch Hinzufügen des Multipe-Attributs können innerhalb der Dateisteuerung mehrere Dateien gleichzeitig ausgewählt werden. Jede vom Benutzer ausgewählte Datei im Steuerelement ist ein Dateiobjekt, und das FileList-Objekt ist eine Liste von Dateiobjekten. Stellt alle vom Benutzer ausgewählten Dateien dar. Schauen wir uns zunächst eine einfache Demo an, um zu sehen, welche Attribute das Dateiobjekt hat. Der folgende Code: 


<!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. Das Blob-Objekt verstehen

Wichtige Punkte: In HTML5 ein neues Blob-Objekt Stellt die ursprünglichen Binärdaten dar. Tatsächlich erbt das Dateiobjekt auch das Blob-Objekt.

Das Blob-Objekt verfügt über zwei Attribute. Das Größenattribut stellt die Bytelänge eines Blob-Objekts dar, und das Typattribut stellt den MIME-Typ des Blobs dar. Wenn es sich um einen unbekannten Typ handelt, wird eine leere Zeichenfolge zurückgegeben.

Bitte beachten Sie den folgenden Code: 


<!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>

Hinweis: Blob und File können gleichzeitig verwendet werden, und FileReader kann zum Lesen verwendet werden Daten von Blob.

Das Folgende ist eine absolute Pfadbildadresse, die in ein Base64-codiertes Bild konvertiert wird, und dann wird das Base64-codierte Bild in ein Blob-Objekt konvertiert. Der Code lautet wie folgt: 


<!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>

Hinweis: In HTML5 wird ein neues Blob-Objekt hinzugefügt, um die ursprünglichen Binärdaten darzustellen. Tatsächlich erbt auch das Dateiobjekt das Blob-Objekt. Daher können wir die absolute Adresse des Bildes verwenden, um es in ein Dateiobjekt umzuwandeln.

Daher können wir die absolute Adresse des Bildes verwenden, um es in ein Dateiobjekt umzuwandeln. Eine detaillierte Demo finden Sie in meinem Git. Das Plugin unterstützt zunächst das Hochladen von Bildern. Und dann stellte ich plötzlich fest, dass es beim Bearbeiten der Seite angezeigt werden muss. Das Standardbild kann auch das Hochladen neuer Bilder unterstützen, während die Bilder standardmäßig angezeigt werden, oder das Löschen aller Bilder, also Ich wollte schon immer die absolute Adresse des Bildes in ein Dateiobjekt umwandeln. Wenn es nicht in ein Dateiobjekt konvertiert wird, meldet var reader = new FileReader(); einen Fehler, sodass Sie den Blob verwenden können Um das Objekt, über das wir oben gesprochen haben, zuerst in ein Blob-Objekt umzuwandeln, können Sie dann das Dateioperationsobjekt fileReader verwenden.

Verwandte Empfehlungen:

Javascript konvertiert den absoluten Pfad des Bildes in Base64-Kodierung

So verwenden Sie den absoluten Pfad und den relativen Pfad von HTML

Detaillierte Analyse des Unterschieds zwischen relativen HTML-Pfaden und absoluten Pfaden

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Konvertierung des absoluten Pfads eines Bildes in ein Dateiobjekt in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HTML5-Web-Caching und Anwendungs-CachingNächster Artikel：HTML5-Web-Caching und Anwendungs-Caching

In Verbindung stehende Artikel

Mehr sehen