Question

我正在创建一个图像选择区域，我想在新的div中显示所选图像。

我试过了：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
<title>jQuery UI Tooltip - Default functionality</title>
<script src="http://deepliquid.com/projects/Jcrop/js/jquery.min.js"></script>
<script src="http://deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/demos/demo_files/demos.css" type="text/css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script >
$(function () { 
function readImage(file) {

    var reader = new FileReader();
    var image = new Image();
    var maxw = 600;
    var maxh = 600;

    reader.readAsDataURL(file);
    reader.onload = function (_file) {
        image.src = _file.target.result; // url.createObjectURL(file);
        image.onload = function () {
            var w = this.width,
                h = this.height,
                t = file.type, // ext only: // file.type.split('/')[1],
                n = file.name,
                s = ~~ (file.size / 1024) + 'KB';
            if (  h > maxh || w > maxw) {
                alert("Height and width is bigger then over max criteria pls select image max height and width                                            =2024X2024");
                alert(w);
                alert(h);
            } else {
                alert(w);
                alert(h);
                $('#uploadPreview').html('<img  id="myImage" src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
                $('#myImage').Jcrop({
                    onChange: showPreview,
                    onSelect: showPreview,
                    aspectRatio: 1
                });
            }

        };
        image.onerror = function () {
            alert('Invalid file type: ' + file.type);
        };
    };

}

$("#choose").change(function (e) {
    if (this.disabled) return alert('File upload not supported!');
    var F = this.files;
    if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]);
});


function showPreview(coords)
{
    var rx = 100 / coords.w;
    var ry = 100 / coords.h;
var thumbWidth = 145, thumbHeight = 190;
    $('#uploadPreview1').css({
        width: Math.round(rx * 500) + 'px',
        height: Math.round(ry * 370) + 'px',
        marginLeft: '-' + Math.round(rx * coords.x) + 'px',
        marginTop: '-' + Math.round(ry * coords.y) + 'px'
    });
}

$('div#uploadPreview').attr('src', image)
        .css({
            float: 'right',
            position: 'relative',
            overflow: 'hidden',
            width: thumbWidth + 'px',
                    height: thumbHeight + 'px'
        })
        .insertAfter($('#uploadPreview1'));



    $('#uploadPreview1').imgAreaSelect({aspectRatio: '1:1', onSelectChange: preview ,minWidth: 100,minHeight: 100,maxWidth: 180,maxHeight: 180});

});    

</script>   

<style>



</style>
</head>
<body >
<input type="file" id="choose" multiple="multiple"   />
<br>
<div id="uploadPreview" ></div><br>

   <img src="" id="uploadPreview1" /><br>

</body>
</html>

首先，我上传图像，然后检查图像的最小标准。

如果图像通过了标准，那么我将在页面上显示它。然后我选择一个区域来创建缩略图。

但是，当我选择图像的某个区域时，我无法在新的div中显示所选区域。

Answer 1

试试这个：

    function preview(img, selection) {
    var scaleX = 100 / (selection.width || 1);
    var scaleY = 100 / (selection.height || 1);

    $('#ferret + div > img').css({
        width: Math.round(scaleX * 400) + 'px',
        height: Math.round(scaleY * 300) + 'px',
        marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
        marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
    });
}

$(document).ready(function () {
    $('<div><img src="ferret.jpg" style="position: relative;" /><div>')
        .css({
            float: 'left',
            position: 'relative',
            overflow: 'hidden',
            width: '100px',
            height: '100px'
        })
        .insertAfter($('#ferret'));

    $('#ferret').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
});

来自here

Answer 2

首先，你不包括jQuery imgAreaSelect库，然后你应该将你的uploadPreview1图像包装在div中。而且你应该更多地定义这些变量而不是函数内部 var image = new Image();函数中的readImage var thumbWidth = 145, thumbHeight = 190;函数中的showPreview

并在此行

$('#uploadPreview1').imgAreaSelect({aspectRatio: '1:1', onSelectChange: preview ,minWidth: 100,minHeight: 100,maxWidth: 180,maxHeight: 180});

您正在调用preview函数而不是showPreview

在img区域选择中，我想在新div中显示所选图像

2 个答案: