Scaling image from input[type=file]

问题

Desired Result: I'm looking to select an image from a file upload form, scale it to a thumbnail and display it.

Problem: The following code does exactly what I want it to, however, I must select the file not once, but twice to see the image preview. (Select image, no display, select same image, I get the scaled display) Everything was working great when I was manually assigning width & height, though now that i'm scaling it - this issue began. I'm in need of a code review! When I comment out the if/if else / else statement and manually assign img.width & img.height to be 75 each, I get the display though it's of course not scaled.

    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);
};

I have changing the scaling up a bit - tried https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/ following this article and I have the same issue. Is the problem due to the fact that i'm not using a canvas? I'm pretty new w/jQuery & javascript - Any help here is greatly appreciated!

回答1:

I made this snippet that fetches an image, thumbnails it & exports it as an img element.

// 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>

来源：https://stackoverflow.com/questions/36112458/scaling-image-from-inputtype-file