調整大小和裁剪圖像

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