jpeg compress Opt

some jpeg compression

by hirako2000

HTML

<hr>

<form id='form'>
    <input type='file' id='fileinput' value='File' data-maxwidth='500' data-maxheight='500'>
</form>
<hr>
Preview:
<div id='preview'></div>

JavaScript

var fileinput = document.getElementById('fileinput');

var max_width = fileinput.getAttribute('data-maxwidth');
var max_height = fileinput.getAttribute('data-maxheight');

var preview = document.getElementById('preview');

var form = document.getElementById('form');
var canvas = document.createElement("canvas");

var lastStartDate;
var lastEndDate;
var MAXSIZE = 2097152;

function processfile(file) {

  if (!(/image/i).test(file.type)) {
    alert("File " + file.name + " is not an image.");
    return false;
  }

  // read the files
  var reader = new FileReader();
  reader.readAsArrayBuffer(file);

  reader.onload = function(event) {
    // blob stuff
    var blob = new Blob([event.target.result]); // create blob...
    window.URL = window.URL || window.webkitURL;
    var blobURL = window.URL.createObjectURL(blob); // and get it's URL

    // helper Image object
    var image = new Image();
    image.src = blobURL;
    //preview.appendChild(image); // preview commented out, I am using the canvas instead
    image.onload = function() {
      // have to wait till it's loaded
      lastStartDate = new Date();
      var resized = resizeMe(blob); // send it to canvas
      var newinput = document.createElement("input");
      newinput.type = 'hidden';
      newinput.name = 'images[]';
      newinput.value = resized; // put result from canvas into new hidden input
      form.appendChild(newinput);
    }
  };
}

function readfiles(files) {
  var existinginputs = document.getElementsByName('images[]');
  var existingcanvases = document.getElementsByTagName('canvas');
  while (existinginputs.length > 0) {
    form.removeChild(existinginputs[0]);
    preview.removeChild(existingcanvases[0]);
  }

  for (var i = 0; i < files.length; i++) {
    processfile(files[i]); //
  }
  fileinput.value = ""; //remove the original files from fileinput
}

fileinput.onchange = function() {
  if (!(window.File && window.FileReader && window.FileList && window.Blob)) {
    alert('The File...