Изменение размера и обрезка изображений

Question

Я использую blueimp's jQuery File Uploader, и я пытаюсь изменить размер и обрезать изображения таким образом, чтобы они в конечном итоге составляли 75x75 пикселей.

Как бы это сделать, чтобы пользователь загружал изображение (независимо от его размеров), он сначала изменяет его размер так, чтобы его ширина и высота составляли не менее 75 пикселей, а затем обрезали изображение по центру, чтобы изображение заканчивается 75x75 пикселей?

Вот что я до сих пор:

<img src="imagelinkhere.png" /> 
<input id="profile-upload" type="file" name="files[]" data-url="file-upload/server/php/"> 

JQuery:

$(function() { 
    $('#profile-upload').fileupload({ 
     add: function(e, data) { 
      var uploadErrors = []; 
      var acceptFileTypes = /(\.|\/)(jpe?g|png)$/i; 
      if(!acceptFileTypes.test(data.originalFiles[0]['type'])) { 
       uploadErrors.push('Invalid type.'); 
      } 
      if(data.originalFiles[0]['size'] > 1000000) { 
       uploadErrors.push('Image too big.'); 
      } 
      if(uploadErrors.length > 0) { 
       alert(uploadErrors); 
      } else { 
       data.submit(); 
      } 
     }, 
     dataType: 'json', 
     done: function (e, data) { 
      alert(data); 
     } 
    }); 
}); 

Пожалуйста, помогите!

Answer 1

Вот метод, который использует холст для изменения размера изображения. Первым аргументом должен быть объект Image.

function(image, width, height) { 
    var c = window.document.createElement('canvas'), 
     ctx = c.getContext('2d'); 

    c.width = width; 
    c.height = height; 

    ctx.drawImage(image, 0, 0, width, height); 
    return c.toDataURL('image/jpeg'); 
}