Question

我是新来的，所以请耐心等待！我使用了我在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 - Display image after selecting filename

Answer 1

如果您知道所有图片都“缩小”（即它们都至少有一个尺寸大于50像素），您可以删除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]);
    }
}

从onload创建缩略图图像

1 个答案: