Question

我的任务是

第1步：上传图片

第2步：检查最低标准，如果标准小于399 X 150，那么它将显示错误MSG＆＃34;图像太小＆＃34;

步骤3：如果图像大于850 X 315，则可以选择裁剪。

步骤4：裁剪显示区域固定为145 x 190。

这是我的jsfiddle：here

请检查jsfiddle我能够做所有功能但不是正确的标准

html代码是：

<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery UI Tooltip - Default functionality</title>
        <link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/css/jquery.Jcrop.css">
    </head>
    <body >
        <input type="file" id="choose">
      <div id="uploadPreview"></div>
  <div id="selectPreview" style="height:50px;"></div>

        <script src="http://deepliquid.com/projects/Jcrop/js/jquery.min.js"></script>
        <script src="http://deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js"></script>
    </body>
</html>

css代码是：

#selectPreview {
    overflow: hidden;
}

和javascript代码：

$( document ).ready(function() {

function each(arr, fn, scope, args) {
    for (var i = 0, l = arr.length; i < l; i++) {
        if (args) fn.apply([arr[i]].concat(args));
        else fn.call(scope, arr[i], i, arr);
    }
}

// Get elements by CSS selector:
function qs(selector, scope) {
    return (scope || document).querySelector(selector);
}
function qsa(selector, scope) {
    return (scope || document).querySelectorAll(selector);
}

// addEventListener wrapper:
function on(target, type, callback) {
    if (target.length) each(target, function(target) {
        on(target, type, callback);
    });
    else target.addEventListener(type, callback, false);
}


var uploadPreview = qs('#uploadPreview');
var selectPreview = qs('#selectPreview');
var imgDescP;
var uploadPreviewImg;
var selectPreviewImg;
var uploadedImgW;
var uploadedImgH;


function readImage(file) {
    var reader = new FileReader();
    var image = new Image();
    var maxw = 800;
    var maxh = 350;

    on(reader, 'load', function(_file) {
        on(image, 'load', function() {
            uploadedImgW = this.width;
            uploadedImgH = this.height;
            var kb = ~~ (file.size / 1024);

            if (uploadedImgH > maxh || uploadedImgW > maxw) {
                alert("Image is too big!");
                return;
            }

            var appendNeeded;
            if (!uploadPreviewImg) {
                uploadPreviewImg = document.createElement('img');
                imgDescP = document.createElement('p');
                selectPreviewImg = document.createElement('img');
                appendNeeded = true;
            }
            uploadPreviewImg.src = this.src;
            selectPreviewImg.src = this.src;
            imgDescP.textContent =
                uploadedImgW + 'x' + uploadedImgH + ' ' +
                kb + 'KB ' + file.type + ' ' + file.name;

            selectPreview.style.width = uploadedImgW + 'px';
            selectPreview.style.height = uploadedImgH + 'px';

            if (appendNeeded) {
                uploadPreview.appendChild(uploadPreviewImg);
                uploadPreview.appendChild(imgDescP);
                selectPreview.appendChild(selectPreviewImg);
            }

            $(uploadPreviewImg).Jcrop({
                onChange: showPreview,
                onSelect: showPreview,
                aspectRatio: 1
            });
        });
        on(image, 'error', function () {
            console.log('Invalid file type: ' + file.type);
        });
        image.src = _file.target.result; // url.createObjectURL(file);
    });
    reader.readAsDataURL(file);
}

on(qs("#choose"), 'change', function (e) {
    if (this.disabled) return console.log('File upload not supported!');
    if (this.files[0]) readImage(this.files[0]);
});


function showPreview(coords) {
    var rx = 100 / coords.w;
    var ry = 100 / coords.h;
    var imgStyle = selectPreviewImg.style;
    imgStyle.width  = rx * uploadedImgW + '%';
    imgStyle.height = ry * uploadedImgH + '%';
    imgStyle.marginLeft = '-' + rx * coords.x + '%';
    imgStyle.marginTop  = '-' + ry * coords.y + '%';
}});

用于图像裁剪的图像选择区域

0 个答案: