Question

所需结果：我希望从文件上传表格中选择一张图片，将其缩放为缩略图并显示。

问题：以下代码完全符合我的要求，但是，我必须选择文件不是一次，而是两次才能看到图像预览。（选择图像，没有显示，选择相同的图像，我得到缩放的显示）当我手动分配宽度和放大时，一切都很好用。高度，虽然现在我正在缩放它 - 这个问题开始了。我需要进行代码审查！当我注释掉if / if else / else语句并手动分配img.width＆amp; img.height每个75，我得到显示虽然它当然没有缩放。

    previewFiles = function (file, i) {

    preview = function (file) {

        // Make sure `file.name` matches our extensions criteria
        switch (/\.(jpe?g|png|gif)$/i.test(file.name)) {
            case true:
                var reader = new FileReader();
                reader.onload = function (e) {
                    var img = new Image();
                    img.src = reader.result;
                    var width = img.width,
                            height = img.height,
                            max_size = 75;

                    if (width <= max_size && height <= max_size) {
                        var ratio = 1;
                    } else if (width > height) {
                        var ratio = max_size / width;
                    } else {
                        var ratio = max_size / height;
                    }

                    img.width = Math.round(width * ratio);
                    img.height = Math.round(height * ratio);
                    img.title = file.type;
                    $('div.box.box-primary').find('span.prev').eq(i).append(img);
                };
                reader.readAsDataURL(file);
                break;
            default:
                $('div.box.box-primary').find('span.prev').eq(i).append('<a class="btn btn-app" href="#"><span class="vl vl-bell-o"></span> Unsupported File</a>');
                break;
        }
    };
    preview(file);
};

我已经改变了扩展程度 - 在本文之后尝试https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/并且我遇到了同样的问题。这个问题是因为我没有使用画布吗？我很新w / jQuery＆amp; javascript - 非常感谢任何帮助！

Answer 1

我制作了这个片段，用于获取图像，缩略图和缩略图。将其作为img元素导出。

// limit the image to 150x100 maximum size
var maxW=150;
var maxH=100;

var input = document.getElementById('input');
input.addEventListener('change', handleFiles);

function handleFiles(e) {
    var img = new Image;
    img.onload = function() {
        var canvas=document.createElement("canvas");
        var ctx=canvas.getContext("2d");
        var iw=img.width;
        var ih=img.height;
        var scale=Math.min((maxW/iw),(maxH/ih));
        var iwScaled=iw*scale;
        var ihScaled=ih*scale;
        canvas.width=iwScaled;
        canvas.height=ihScaled;
        ctx.drawImage(img,0,0,iwScaled,ihScaled);
        var thumb=new Image();
        thumb.src=canvas.toDataURL();
        document.body.appendChild(thumb);
    }
    img.src = URL.createObjectURL(e.target.files[0]);
}

body{ background-color: ivory; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Select a file to create a thumbnail from</h4>
<input type="file" id="input"/>
<br>

从输入[type = file]缩放图像

1 个答案: