Partager un exemple de code pour la compression d'images et le téléchargement à l'aide de HTML5

Processus de mise en œuvre :

• Récupérez le fichier téléchargé avec

• Utilisez FileReader pour lire l'image et créez un nouvel objet Image pour mettre les données d'image lues par FileReader ;

• Utilisez le canevas pour redimensionner l'objet Image proportionnellement, écrivez-le sur le canevas et enregistrez-le en tant que données. au format base64 (le téléchargement de l'objet FormData est utilisé ici. En fait, les données base64 peuvent être téléchargées directement sur le serveur via ajax en utilisant la méthode post, ce qui peut éviter les deux étapes suivantes

• ) ;

  Créer un nouveau Blob L'objet y place des données base64

• utilise l'objet FormData pour le télécharger sur un serveur de stockage cloud tiers ; >

  utilise HTML natif Téléchargez des images. Voici quelques pièges :

accepter définit ici le type de fichier téléchargé. utilisé directement sans spécifier de nom de suffixe spécifique. Sinon, les images ne peuvent pas être téléchargées sur certains téléphones Android

• Ajoutez l'attribut multiple
• pour sélectionner plusieurs images (cet exemple uniquement). sélectionne une seule image);
  l'attribut capture="camera" peut appeler la caméra (l'ajout de cet attribut appellera directement la caméra sur iPhone sans lire l'album photo; et actuellement Android et iOS devices use accept="image/*" Vous pouvez choisir d'utiliser l'appareil photo pour prendre des photos ou d'utiliser des photos de l'album, cet attribut peut donc être ignoré).
Récupérez le fichier téléchargé lorsque le fichier d'entrée déclenche l'événement de changement

<input id="imgUpload" type="file" onchange="addPic" accept="image/*" />

Utilisez FileReader pour obtenir les données de l'image, et utilisez la compression de toile

function addPic(e){
  if (typeof FileReader === 'undefined') {
    return alert('你的浏览器不支持上传图片哟！');
  }
  var files = e.target.files || e.dataTransfer.files;
  if(files.length > 0){
    imgResize(file[0], callback);
  }
}

Le téléphone iOS pivotera de 90 degrés lors de la prise de photos. Ici, vous devez déterminer si le téléphone iOS l'a traité en conséquence avant de le télécharger

• .

Les données base64 sont converties en objet Blob

function imgResize(file, callback){
  var fileReader = new FileReader();
  fileReader.onload = function(){
    var IMG = new Image();
    IMG.src = this.result;
    IMG.onload = function(){
      var w = this.naturalWidth, h = this.naturalHeight, resizeW = 0, resizeH = 0;
      // maxSize 是压缩的设置，设置图片的最大宽度和最大高度，等比缩放，level是报错的质量，数值越小质量越低
      var maxSize = {
        width: 500,
        height: 500,
        level: 0.6
      };
      if(w > maxSize.width || h > maxSize.height){
        var multiple = Math.max(w / maxSize.width, h / maxSize.height);
        resizeW = w / multiple;
        resizeH = w / multiple;
      } else {
        // 如果图片尺寸小于最大限制，则不压缩直接上传
        return callback(file)
      }
      var canvas = document.createElement('canvas'),
      ctx = canvas.getContext('2d');
      if(window.navigator.userAgent.indexOf('iPhone') > 0){
        canvas.width = resizeH;
        canvas.height = resizeW;
        ctx.rorate(90 * Math.PI / 180);
        ctx.drawImage(IMG, 0, -resizeH, resizeW, resizeH);
      }else{
        canvas.width = resizeW;
        canvas.height = resizeH;
        ctx.drawImage(IMG, 0, 0, resizeW, resizeH);
      }
      var base64 = canvas.toDataURL('image/jpeg', maxSize.level);
      convertBlob(window.atob(base64.split(',')[1]), callback);
    }
  };
  fileReader.readAsDataURL(file);
}

Les téléphones Android ne prennent pas en charge la méthode constructeur Blob

Utilisez l'objet FormData

HTML5

function convertBlob(base64, callback){
  var buffer = new ArrayBuffer(base64.length);
  var ubuffer = new Uint8Array(buffer);
  for (var i = 0; i < base64.length; i++) {
    ubuffer[i] = base64.charCodeAt(i)
  }
  var blob;
  try {
    blob = new Blob([buffer], {type: &#39;image/jpg&#39;});
  } catch (e) {
    window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;
    if(e.name === &#39;TypeError&#39; && window.BlobBuilder){
      var blobBuilder = new BlobBuilder();
      blobBuilder.append(buffer);
      blob = blobBuilder.getBlob(&#39;image/jpg&#39;);
    }
  }
  callback(blob)
}

pour télécharger des données

[Recommandations associées]

function callback(fileResize){
  var data = new FormData();
  data.append('file', fileResize);
  var config = {
    headers: {'Content-Types': 'multipart/form-data'}
  };
  // 这里用的es6语法发起请求，可以无视
  axios.post(url, data, config).then().catch(e){}
}

1.

Tutoriel vidéo en ligne h5 gratuit

2 . Manuel de la version complète HTML5

3 Tutoriel vidéo HTML5 original php.cn

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!