0

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

表单的 HTML 如下所示：

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

我有一个 JavaScript 函数，如下所示：

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#blah')
                .attr('src', e.target.result)
                .width(50)
                .height(50);
        };
        reader.readAsDataURL(input.files[0]);
    }
}

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

我想做的是创建一个更清晰的缩略图，无论原件的大小如何，它都不会显示扭曲或压缩的图像。我想需要先将图像的高度降低到 50px，然后根据中间 50px 的图像获取缩略图。

有谁知道这样做的方法？

顺便说一句，我作为示例遵循的原始脚本可以在这里找到：HTML - 选择文件名后显示图像

4

1 回答 1

0

如果您知道所有图像都在“缩小”（即它们都至少有一个尺寸大于 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]);
    }
}
于 2013-10-30T02:48:55.877 回答