Question

我的任务是：

步骤1a：用户上传图像

输入：图像的原始尺寸（固定宽度可变高度） - 它可以是任何尺寸。

限制：

一个。 TYPE：JPG / BMP / PNG等

B中。 MAX DIMENSION

-example 1024X1024px。

步骤1b：上传后，系统会检查符合我们标准的标准。

标准：检查最大尺寸

如果是：

如果匹配条件要求用户创建大小（145 x 190）的缩略图

如果否：

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

最终输出：

2）145 x 190（搜寻结果图像）（缩略图）

3）30％缩略图

4）对于个人资料图片，我们将根据哪个高度变化来定义固定宽度。（宽度尚未确定）

这是我的任务。在这些任务中，我能够实现图像上传，检查维度。但不是一步一步的。请帮我完成这个任务。我是Jquery的New，只有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);


    }

});

我的coading是（对于上传图片）： HTML：

Jquery的：

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>

jquery的：

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

我们如何在图像上传中实现这些功能

1 个答案: