调整大小和裁剪图像

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