更新图像并调整它们的大小答案

【问题标题】：Updating an Image and resize them faults更新图像并调整它们的大小
【发布时间】：2015-02-26 19:28:09
【问题描述】：

我正在通过 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});
    }
}

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

但应该是这样的：

有什么建议可以解决这个问题吗？

谢谢！

【问题讨论】：

尝试使用 image.onLoad 事件来触发您的方法。看看here
我知道你的意思，我认为这对我有用
嗯是的.. 使用了 loadevent，定义调用但调整大小再次失败。我会说这是FF的缓存问题。在 Chrome 和 IE 和 Safari 中同样失败，它不能完全工作，但这只是一个兼容性问题。
是的，可能没问题。也许看看禁用该图片上的缓存？
修复了这个问题。我现在正在使用一个已经调整大小并移动到中心的图像。更新它时效果很好。还是谢谢你:)

标签： javascript image image-uploading

【解决方案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

喜欢

【讨论】：