Wie komprimiere ich die Bildgröße in JavaScript?

Question

Ich versuche, Bildgröße mit JavaScript zu komprimieren. aber es gibt einen Leinwandfehler zurück. unten ist mein 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); 
}; 

Fehler:

Answer 1

die Größe muss ich denken, dass Sie so etwas wie dieses suchen ~

Aktualisieren Diese Implementierung verfügt über zwei Methoden, um die Größe des Abbilds zu reduzieren. Bei einer Methode wird die Größe des Bilds geändert, bei der anderen Methode wird das Bild bei gleicher Größe komprimiert, aber die Qualität wird verringert.

//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>

Answer 2

Sie könnten die Leinwandgröße

siehe folgendes Beispiel here

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();  
}