Maison > interface Web > Tutoriel H5 > Partager un exemple de code pour la compression d'images et le téléchargement à l'aide de HTML5

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

零下一度
Libérer: 2017-05-08 13:47:04
original
2589 Les gens l'ont consulté
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/*" />
Copier après la connexion
Utilisez FileReader pour obtenir les données de l'image, et utilisez la compression de toile
function addPic(e){
  if (typeof FileReader === &#39;undefined&#39;) {
    return alert(&#39;你的浏览器不支持上传图片哟!&#39;);
  }
  var files = e.target.files || e.dataTransfer.files;
  if(files.length > 0){
    imgResize(file[0], callback);
  }
}
Copier après la connexion
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(&#39;canvas&#39;),
      ctx = canvas.getContext(&#39;2d&#39;);
      if(window.navigator.userAgent.indexOf(&#39;iPhone&#39;) > 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(&#39;image/jpeg&#39;, maxSize.level);
      convertBlob(window.atob(base64.split(&#39;,&#39;)[1]), callback);
    }
  };
  fileReader.readAsDataURL(file);
}
Copier après la connexion
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)
}
Copier après la connexion
pour télécharger des données
[Recommandations associées]
function callback(fileResize){
  var data = new FormData();
  data.append(&#39;file&#39;, fileResize);
  var config = {
    headers: {&#39;Content-Types&#39;: &#39;multipart/form-data&#39;}
  };
  // 这里用的es6语法发起请求,可以无视
  axios.post(url, data, config).then().catch(e){}
}
Copier après la connexion
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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal