How To Compress Image Size In Javascript?

I am trying to compress image size using JavaScript. but it returns canvas error. below is my code. var reader = new FileReader(); reader.readAsDataURL(fileItem._file);

Solution 1:

I think you are looking something like this~

Update This implementation has two methods to reduce the size of the image. One method resize the image the other method compress the image maintaining the same size but it reduces the quality.

//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');


functionpreviewFile() { 
  var preview = document.getElementById('source_image');
  var previewCompress = document.getElementById('result_compress_image');
  var file   = document.querySelector('input[type=file]').files[0]; 
  var reader  = newFileReader();
  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);
  }
}

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


functioncompressFile(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 = newDate().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 = newImage();
  result_image_obj.src = newImageData;
  result_image.src = result_image_obj.src;

  result_image.onload = function() {}
  var duration = newDate().getTime() - time_start;

  console.log("process finished...");
  console.log('Processed in: ' + duration + 'ms');
}

<inputtype="file"onchange="previewFile()"><br><div><h3>Original Image</h3><imgid="source_image" /></div><div><h3>Resized Image</h3><divid="result_resize_image"></div></div><div><h3>Compressed Image</h3><imgid="result_compress_image"class='img_container' /></div><br><br><div><fieldset><legend>Compressor settings</legend><divid='controls-wrapper'>
      Compression ratio : <inputid="jpeg_encode_quality"size='3'readonly='true'type="text"value="30" /> %
    </div></fieldset></div><div><fieldset><legend>Console output</legend><divid='console_out'></div></fieldset></div>

Solution 2:

You might have to resize the canvas size

refer the following example here

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