Javascript 从加载创建缩略图图像

我是新来的，所以请容忍我！我使用了我在上找到的另一个脚本，在用户选择浏览按钮并选择图像后，浏览器中会显示一个50像素的小缩略图

表单的HTML如下所示：

<input type='file' onchange="readURL(this);" />
<img id="blah" src="http://openglobaldirectory.com/images/default_profile.gif" width="50" alt="your image" />

当用户从页面中显示的50x50px缩略图文件中选择图像时，它将压缩整个图像，除非选择的图像是正方形（或几乎正方形），否则生成的缩略图看起来非常扭曲

我想做的是创建一个更干净的缩略图，它不会显示扭曲或压缩的图像，而不管原始图像的大小。我想需要做的是首先把图像的高度降到50px，然后根据中间图像的50px值缩略图。

有人知道怎么做吗

---

顺便说一下，我下面的原始脚本可以在这里找到：

如果您知道所有图像都在“缩小”（即它们都至少有一个维度大于50px），您可以删除img标记中的width属性，并将其放入img标记中：

style='max-width:50px; max-height:50px;'

如果您想涵盖所有情况，可以修改javascript，以便在需要更大的图像大小来填充缩略图空间时，将其设置为更大

function readURL(input) {

    var imageSize = 50;

    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {

            var blah = $('#blah');
            blah.attr('src', e.target.result);

            var height = blah.height();
            var width = blah.width();

            if (height < imageSize && width < imageSize) {
                if (width > height) {
                    blah.width(imageSize);
                }
                else {
                    blah.height(imageSize)
                }
            }
        };
        reader.readAsDataURL(input.files[0]);
    }
}

函数readURL（输入）{
var imageSize=50；
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
var blah=$（#blah'）；
blah.attr（'src'，e.target.result）；
var height=blah.height（）；
var width=blah.width（）；
if（高度<图像大小&宽度<图像大小）{
如果（宽度>高度）{
blah.宽度（图像大小）；
}
否则{
blah.高度（图像大小）
}
}
};
reader.readAsDataURL（input.files[0]）；
}
}

只需将宽度设置为50px即可。。。。如果不查看此链接，高度将自动调整

function readURL(input) {

    var imageSize = 50;

    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {

            var blah = $('#blah');
            blah.attr('src', e.target.result);

            var height = blah.height();
            var width = blah.width();

            if (height < imageSize && width < imageSize) {
                if (width > height) {
                    blah.width(imageSize);
                }
                else {
                    blah.height(imageSize)
                }
            }
        };
        reader.readAsDataURL(input.files[0]);
    }
}