Javascript Girl
  1. Javascript Girl
  3. Comment compresser la taille de l'image en JavaScript?
Intereting Posts
Supprime tous les éléments d'une certaine classe avec JavaScript Panneau de dessin collaboratif en temps réel en HTML5 / JS et websockets? Appuyez-vous sur la touche de capture sans placer un élément de saisie sur la page? Comment faire apparaître un navigateur comme "enregistrer comme boîte de dialogue" afin que l'utilisateur puisse enregistrer le contenu d'une chaîne dans un fichier sur son système? Est-il sûr de comparer JavaScript getTime () sur différents systèmes? Passer un élément de sélection de HTML dans un arbre avec des sous-menus CasperJs, comment répéter une étape X fois sur WaitTimeout? Suppression de l'événement $ (window) .resize dans jQuery Textures trois.js travaillant avec CanvasRenderer, mais apparaissent en noir avec WebGLRenderer Est-ce que quelqu'un a eu le traitement.js fonctionnant dans IE? La sélection déroutante n'est pas prise en charge par erreur dans google chrome and chrome IBrame en marquage avec `target =" _ blank "` n'ouvre pas un nouvel onglet ou une fenêtre Le module interne ne fonctionne pas s'il a une déclaration d'importation avant Load processing.js sketch avec ajax sur le clic de l'utilisateur Modification des variables CSS via JS dans Polymer

Comment compresser la taille de l'image en JavaScript?

J'essaie de compresser la taille de l'image en utilisant JavaScript. Mais il renvoie une erreur de toile. Ci-dessous est mon code. 

var reader = new FileReader(); reader.readAsDataURL(fileItem._file); reader.onload = function (event) { var base64 = event.target.result.substring(event.target.result.indexOf(',') + 1, event.target.result.length); var cvs = document.createElement('canvas'); var source_img_obj = event.target.result; cvs.width = source_img_obj.naturalWidth; cvs.height = source_img_obj.naturalHeight; var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0); var newImageData = cvs.toDataURL(type, 70 / 100); var result_image_obj = new Image(); result_image_obj.src = newImageData; console.log(result_image_obj); };

Erreur: Entrez la description de l'image ici

Je pense que vous regardez quelque chose comme ça ~

Mise à jour Cette implémentation comporte deux méthodes pour réduire la taille de l'image. Une méthode redimensionne l'image que l'autre méthode comprime l'image en maintenant la même taille, mais elle réduit la qualité. 

 //Console logging (html) if (!window.console) console = {}; var console_out = document.getElementById('console_out'); var output_format = "jpg"; console.log = function(message) { console_out.innerHTML += message + '<br />'; console_out.scrollTop = console_out.scrollHeight; } var encodeButton = document.getElementById('jpeg_encode_button'); var encodeQuality = document.getElementById('jpeg_encode_quality'); function previewFile() { var preview = document.getElementById('source_image'); var previewCompress = document.getElementById('result_compress_image'); var file  = document.querySelector('input[type=file]').files[0]; var reader = new FileReader(); reader.addEventListener("load", function(e) { preview.src = e.target.result; preview.onload = function() { resizeFile(this, preview); compressFile(this, previewCompress) }; // preview.src = reader.result; }, false); if (file) { reader.readAsDataURL(file); } } function resizeFile(loadedData, preview) { console.log(loadedData.width + ' ' + loadedData.height); var canvas = document.createElement('canvas'), ctx; canvas.width = Math.round(loadedData.width / 2); canvas.height = Math.round(loadedData.height / 2); var resizedImage = document.getElementById('result_resize_image'); resizedImage.appendChild(canvas); // document.body.appendChild(canvas); ctx = canvas.getContext('2d'); ctx.drawImage(preview, 0, 0, canvas.width, canvas.height); } function compressFile(loadedData, preview) { console.log('width: ' + loadedData.width + ' height: ' + loadedData.height); var result_image = document.getElementById('result_compress_image'); var quality = parseInt(encodeQuality.value); console.log("Quality >>" + quality); console.log("process start..."); var time_start = new Date().getTime(); var mime_type = "image/jpeg"; if (typeof output_format !== "undefined" && output_format == "png") { mime_type = "image/png"; } var cvs = document.createElement('canvas'); cvs.width = loadedData.width; cvs.height = loadedData.height; var ctx = cvs.getContext("2d").drawImage(loadedData, 0, 0); var newImageData = cvs.toDataURL(mime_type, quality / 100); var result_image_obj = new Image(); result_image_obj.src = newImageData; result_image.src = result_image_obj.src; result_image.onload = function() { } var duration = new Date().getTime() - time_start; console.log("process finished..."); console.log('Processed in: ' + duration + 'ms'); } 
 <input type="file" onchange="previewFile()"><br> <div> <h3>Original Image<h3> <img id="source_image" alt="Image preview..." /> </div> <div> <h3>Resized Image<h3> <div id="result_resize_image"> </div> </div> <div> <h3>Compressed Image<h3> <img id="result_compress_image" class='img_container' /> </div> <br><br> <div> <fieldset> <legend>Compressor settings</legend> <div id='controls-wrapper'> Compression ratio : <input id="jpeg_encode_quality" size='3' readonly='true' type="text" value="30" /> % </div> </fieldset> </div> <div> <fieldset> <legend>Console output</legend> <div id='console_out'></div> </fieldset> </div>

Vous devrez peut-être redimensionner la taille de la toile

Reportez ici l' exemple suivant 

 function resizeImg(base, width, height) { var canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; var context = canvas.getContext("2d"); var deferred = $.Deferred(); $("<img/>").attr("src", "data:image/gif;base," + base).load(function() { context.scale(width/this.width, height/this.height); context.drawImage(this, 0, 0); deferred.resolve($("<img/>").attr("src", canvas.toDataURL())); }); return deferred.promise(); }