javascript - 调整图像大小和裁剪图像

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

这是一种使用 Canvas 调整图像大小的方法。第一个参数应该是 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');
}