Привет.

Почитал статью на хабре:

https://habrahabr.ru/post/252175/

Поюзал здесь онлайн:

http://jsbin.com/komedawapu/1/edit?js,output

Вот код:

// noprotect

var width = 342;

function protect(img) {
  var ratio = img.width / img.height;
  
  var maxSquare = 5000000;  // ios max canvas square
  var maxSize = 4096;  // ie max canvas dimensions
  
  var maxW = Math.floor(Math.sqrt(maxSquare * ratio));
  var maxH = Math.floor(maxSquare / Math.sqrt(maxSquare * ratio));
  if (maxW > maxSize) {
    maxW = maxSize;
    maxH = Math.round(maxW / ratio);
  }
  if (maxH > maxSize) {
    maxH = maxSize;
    maxW = Math.round(ratio * maxH);
  }
  if (img.width > maxW) {
    var canvas = document.createElement('canvas');
    canvas.width = maxW;
    canvas.height = maxH;
    canvas.getContext('2d').drawImage(img, 0, 0, maxW, maxH);
    img = canvas;
  }
  
  return img;
}

function resize(img, w,  h) {
  img = protect(img);
  console.log(img.width, img.height);
  
  var steps = Math.ceil(Math.log2(img.width / w));
  var sW = w * Math.pow(2, steps - 1);
  var sH = h * Math.pow(2, steps - 1);
  var x = 2;
  
  while (steps--) {
    console.log(sW, sH);
    var canvas = document.createElement('canvas');
    canvas.width = sW;
    canvas.height = sH;
    canvas.getContext('2d').drawImage(img, 0, 0, sW, sH);
    img = canvas;
    
    sW = Math.round(sW / x);
    sH = Math.round(sH / x);
  }
  return img;
}


function imageLoader(src) {
  var df = $.Deferred();
  var img = new Image();
  img.onload = function() {
    df.resolve(img);
  };
  img.onerror = function() {
    df.reject(img);
  };
  img.src = src;
  return df.promise();
}


$('#file').on('change', function() {
  var images = $.map($('#file').prop('files'), function(file) {
    return imageLoader(URL.createObjectURL(file));
  });
  $.when.apply(null, images).done(function() {
    $.each(arguments, function(i, img) {
      var height = Math.round(width * img.height / img.width);

      canvas = resize(img, width, height);
      $(img).attr({width: width, height: height});
      $('body').append(
        $("<p/>").append(
          [img, canvas]
        )
      );
    });
  });
});

Вроде ничего сложного, но мало знаю canavas, картинка на выходе:


больше исходной:

по весу в два раза.


Можно ли как-то подредактировать код, чтоб качество было ниже.

_____________
Не тот велик, кто не падал, а тот кто падал и поднимался.