从输入[type = file]缩放图像 [英] 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.

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

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

我已经稍微改变了一点 - 试过 https://hacks.mozilla.org/2011/01/how-to-develop-a -html5-image-uploader / 在本文之后，我遇到了同样的问题。这个问题是因为我没有使用画布吗？我很新w / jQuery& javascript - 非常感谢任何帮助！

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!

推荐答案

我制作了一个获取图像的片段，缩略图&将其作为img元素导出。

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>

这篇关于从输入[type = file]缩放图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！