js+canvas effet de téléchargement de compression d'aperçu d'image en ligne

Cette fois, je vais vous proposer js+canvas en ligne imagecompression d'aperçutélécharger et notes pour obtenir l'effet de téléchargement de compression d'aperçu d'image en ligne js+canvas Quels sont-ils ? Voici des cas concrets.

Jetons d'abord un œil aux rendus pour calmer la surprise

La première étape : l'utilisateur sélectionne l'image à télécharger

<input type="file" accept="image/*" type="file"" name="imageFile" onchange="upload()">

Une fois l'image sélectionnée, la fonction de téléchargement sera déclenchée. Dans cette fonction, nous devons obtenir la ressource de l'image, la compresser et la dessiner à l'aide de Canvas. Si nous devons la télécharger sur le serveur, nous pouvons également utiliser ajax ou d'autres méthodes pour le télécharger.

Étape 2 : Obtenez l'aperçu compressé de la ressource image et téléchargez-la

function upload() { 
  let file = document.querySelector('input[type=file]').files[0] // 获取选择的文件，这里是图片类型 
  let reader = new FileReader() 
    reader.readAsDataURL(file) //读取文件并将文件以URL的形式保存在resulr属性中 base64格式 
    reader.onload = function(e) { // 文件读取完成时触发  
      let result = e.target.result // base64格式图片地址  
      var image = new Image() image.src = result // 设置image的地址为base64的地址  
      image.onload = function(){  
        var canvas = document.querySelector("#canvas");  
        var context = canvas.getContext("2d");  
        canvas.width = image.width; // 设置canvas的画布宽度为图片宽度  
        canvas.height = image.height;  
        context.drawImage(image, 0, 0, image.width, image.height) // 在canvas上绘制图片  
        let dataUrl = canvas.toDataURL('image/jpeg', 0.92) // 0.92为压缩比，可根据需要设置，设置过小会影响图片质量  
                                  // dataUrl 为压缩后的图片资源，可将其上传到服务器  
      }  
    } 
 }

Comparons maintenant si l'image a été compressée avec succès :

Taille de l'image originale :

Le taux de compression est fixé à 0,92 :

Le taux de compression est fixé à 0,52

À première vue, pensez-vous qu'il soit étrange que l'image soit plus grande que l'image originale lorsque le taux de zoom est réglé sur 0,92 ? En fait, une fois l'image codée en base64, elle deviendra plus grande que l'image originale. Pour des raisons spécifiques, vous pouvez vérifier le principe d'encodage en base64. Il semble que nous ayons réussi à compresser l'image !

Remarque : Canvas n'est pas pris en charge sous IE9 ; essayez de ne pas utiliser base64 pour les grandes images, car cela affecterait la vitesse de réponse.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Emballage du projet Vuejs et optimisation du chargement du premier écran

Explication détaillée des étapes d'utilisation du composant spécifié mise en cache dans Vue

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!