jquery - 我们如何在图片上传上实现这些功能

Question

我的任务是:

第 1a 步:用户上传图片

输入:图像的原始大小(固定宽度可变高度)——它可以是任何尺寸。

限制:

一个。类型:JPG/BMP/PNG 等

B.最大尺寸

-例如 1024X1024 像素。

第 1b 步:上传后，系统检查符合我们条件的条件。

标准:检查最大尺寸

如果是:

如果符合条件要求用户创建大小为 (145 x 190) 的缩略图

如果否:

再次要求用户调整图像大小，直到它符合我们的标准

最终输出:

2) 145 x 190(搜索结果图片)(缩略图)

3) 30% 缩略图

4) 对于个人资料图片，我们将根据高度的变化定义固定宽度。(宽度尚未确定)

---

这是我的任务。 在这些任务中，我能够实现图像上传、检查维度。但不明智。请帮助我完成这项任务。我是 Jquery 的新手，只有 1 个月的经验，这项任务对我来说非常复杂。 希望你理解我的问题。

我的编码是(用于检查维度): HTML:

<input type="file" id="file" />

jQuery:

var _URL = window.URL || window.webkitURL;

$("#file").change(function(e) {
    var file, img;


    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function() {
            alert(this.width + " " + this.height);
        };
        img.onerror = function() {
            alert( "not a valid file: " + file.type);
        };
        img.src = _URL.createObjectURL(file);


    }

});

我的编码是(用于上传图片): HTML:

J查询:

function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#blah')
                        .attr('src', e.target.result)
                        .width(thumbWidth)
                        .height(thumbHeight);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }

Answer 1

这是解决方案(不完全但希望它能帮助你一些地方)

html:

<p>image is set to 100x100 pixels!</p>

<img id="draggable" src="http://jotform.org/demo/jquery-image-area-select-plugin/images/sweet-dogs.jpg" />

<div id="dim"></div>

j查询:

var img     = document.getElementById('draggable'),
    new_img = new Image();

new_img.onload = function() {
    var img_width  = this.width,
        img_heigth = this.height;

    document.getElementById('dim').innerHTML = 'Original dimensions are : ' + img_width + 'x' + img_heigth + ' pixels';
}

new_img.src = img.src;

CSS:

#draggable {height: 100px; width: 100px;}