更新图像并调整其大小

Question

我正在通过ajax上传图片，并希望立即在用户个人资料图片元素中更新它们。

它可以工作，但问题是，在我刷新网站1-2次之前，图像不能完美移动。

var t = new Date().getTime(),
    avatar = $("img.user-avatar"),
    src = avatar.attr("src");
src = src.substr(0, src.indexOf("?") > 0 ? src.indexOf("?") : src.length);
avatar.attr("src", src + "?" + t);
resizeAndMoveAvatar();

resizeAndMoveAvatar（）函数如下所示：

function resizeAndMoveAvatar()
{
    var Avatar = $("img.user-avatar");
    var w = Avatar.width(), h = Avatar.height();
    Avatar.css({
        'max-width': 'none',
        'max-height': 'none'
    });

    if(w > h) {
        Avatar.css('max-height', 32);
        w = Avatar.width();
        Avatar.css('left', -(w/2 - 32/2));
    }
    else if(h > w) {
        Avatar.css('max-width', 32);
        h = Avatar.height();
        Avatar.css('top', -(h/2 - 32/2));
    }
    else {
        Avatar.css({width: 32, height: 32});
    }
}

当我更新它时它看起来像这样：

但它应该是这样的：

有关我如何解决此问题的任何建议？

谢谢你！

Answer 1

@Celt要求我的解决方案：
我像以前一样更新图像，唯一的变化就是我不再使用resizeAndMoveAvatar函数，因为我需要的图像已经调整大小并通过PHP脚本移动到中心

对我来说效果很好

我的班级：http://pastebin.com/DffcfnyC 像这样使用：

$Img = new Image("path/to/image.png"); // creating an instance
$Img->Square(); // center the image
$Img->Resize(32, 32); // resize it
$Img->Save("path/to/destination/image.png"); // and finally save it

喜欢它