JS+Canvas effectue la compression et le téléchargement de l'aperçu de l'image

Cette fois, je vais vous proposer JS+Canvas pour faire une compression d'aperçude l'imageet télécharger, JS+Canvas pour faire une compression d'aperçu d'image et télécharger des notes

Quoi le sont-ils ? Voici des cas réels.

Regardons d'abord les rendus pour calmer la surprise

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 :

Comment créer un projet vue2.0+boostrap

Comment résoudre la mise à niveau d'Angular5 RxJS vers 5.5.3 Rapport d'erreurs

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!