JS et Canvas implémentent des fonctions de prévisualisation, de compression et de téléchargement d'images

Cet article présente principalement JS et Canvas pour implémenter la fonction de prévisualisation, de compression et de téléchargement de l'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. L'étape consiste à obtenir la ressource image, à compresser l'aperçu et à la télécharger Plus précisément Veuillez vous référer à cet article pour implémenter le code

Jetons d'abord un coup d'œil aux rendus 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 canevas. Si nous devons la télécharger sur le serveur, nous pouvons également utiliser ajax ou télécharger par d'autres méthodes.

É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.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Implémentation JavaScript étape par étape d'une expression régulière de date de naissance

Tutoriel sur l'utilisation de Vue pour développer des composants Echarts à actualisation dynamique Explication détaillée

Exemple d'utilisation de la liste déroulante selectpicker dans bootstrap

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!