js et canvas implémentent le téléchargement de la compression de l'aperçu de l'image

Cet article partage principalement la méthode de compression et de téléchargement d'aperçus d'images avec js et canvas, combinée avec un exemple de code et des explications, dans l'espoir d'aider tout le monde.

É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. Nous devons obtenir la ressource image dans cette fonction. Compressez-le et dessinez-le à l'aide de Canvas. Si vous devez le télécharger sur le serveur, vous pouvez é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-le

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 est compressée avec succès :

Taille de l'image originale :
Le taux de compression est réglé sur 0,92 :
Le taux de compression est réglé sur 0,52

À première vue, pensez-vous que c'est étrange pourquoi le taux de mise à l'échelle est réglé sur 0,92, image Elle est en fait plus grande que l'image originale ? 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.

Recommandations associées :

php télécharge les fichiers sur le serveur et implémente l'aperçu de l'image

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!