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

调整图像大小和裁剪

1 个答案: