Explication détaillée de la conversion du chemin absolu d'une image en un objet fichier en HTML5-js tutoriel-php.cn

Explication détaillée de la conversion du chemin absolu d'une image en un objet fichier en HTML5

小云云

Libérer： 2018-01-13 11:15:19

original

8047 Les gens l'ont consulté

Cet article présente principalement comment convertir le chemin absolu d'une image en un objet fichier en HTML5. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Convertissez le chemin absolu de l'image en encodage base64, veuillez lire cet article

Commençons par comprendre les points de connaissances de base :

1. Comprendre l'objet HTML5 FileList. et objet fichier.

En HTML5, un objet FileList représente une liste de fichiers sélectionnés par l'utilisateur. En ajoutant l'attribut multipe, plusieurs fichiers peuvent être sélectionnés à la fois dans le contrôle de fichier. Chaque fichier sélectionné par l'utilisateur dans le contrôle est un objet fichier et l'objet FileList est une liste d'objets fichier. Représente tous les fichiers sélectionnés par l'utilisateur. Examinons d'abord une démo simple pour voir quels attributs possède l'objet fichier. Le code suivant :

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

Copier après la connexion

2. Comprendre l'objet Blob

Points clés : En HTML5, un nouvel objet Blob est ajouté. Représente les données binaires d'origine. En fait, l'objet fichier hérite également de l'objet Blob.

L'objet Blob a deux attributs. L'attribut size représente la longueur en octets d'un objet Blob, et l'attribut type représente le type MIME du Blob. S'il s'agit d'un type inconnu, une chaîne vide est renvoyée.

Veuillez consulter le code suivant :

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

Copier après la connexion

Remarque : Blob et File peuvent être utilisés en même temps, et FileReader peut être utilisé pour lire données de Blob.

Ce qui suit est une adresse d'image de chemin absolu qui est convertie en une image codée en base64, puis l'image codée en base64 est convertie en un objet blob. Le code est le suivant :

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

Copier après la connexion

Remarque : En HTML5, un nouvel objet Blob est ajouté pour représenter les données binaires d'origine. En fait, l'objet fichier hérite également. l'objet Blob. On peut donc utiliser l’adresse absolue de l’image pour la convertir en objet fichier.

Par conséquent, nous pouvons utiliser l'adresse absolue de l'image pour la convertir en objet fichier. Pour une démo détaillée, vous pouvez voir le contrôle de téléchargement d'image sur mon git. Le plug-in prend d'abord en charge le téléchargement d'image, puis j'ai soudainement découvert qu'elle devait être affichée lors de la modification de la page. L'image par défaut peut également prendre en charge le téléchargement de nouvelles images tout en affichant les images par défaut, ou en supprimant toutes les images. Cependant, le développeur ne m'a donné que l'adresse absolue de l'image, donc. J'ai toujours voulu convertir l'adresse absolue de l'image en objet fichier, si elle n'est pas convertie en objet fichier, lors de l'utilisation de ce code, var reader = new FileReader(); objet dont nous avons parlé ci-dessus pour le convertir d'abord en objet blob, puis vous pouvez utiliser l'objet d'opération de fichier fileReader.

Recommandations associées :

Javascript convertit le chemin absolu de l'image en codage base64

Comment utiliser le chemin absolu et le chemin relatif du HTML

Analyse détaillée de la différence entre les chemins relatifs HTML et les chemins absolus

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!