JS+Canva active les fonctions de compression d'aperçu et de téléchargement d'images

Cette fois, je vous propose JS+Canva pour prévisualiser, compresser et télécharger imagesJS+Canva pour prévisualiser, compresser et télécharger des Notes Quoi. le sont-ils ? Voici des cas réels.

Cet article présente principalement JS et Canvas pour implémenter les fonctions de prévisualisation, de compression et de téléchargement d'image. Il y a environ deux étapes pour implémenter cette fonction. La première étape consiste pour l'utilisateur à sélectionner l'image qui doit être téléchargée. La deuxième étape consiste à obtenir un aperçu compressé de la ressource image. Téléchargez, veuillez vous référer à cet article pour le code d'implémentation spécifique

Prenons d'abord un rendu pour calmer la surprise

Étape 1 : 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, compressez-la et dessinez-la à 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 la 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 utiliser le filtre de contenu jquery

Explication détaillée de l'utilisation du sélecteur composé de jQuery

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!