Fatal编程技术网
  • javascript/
  • Javascript 在img区域选择中，我想在新div中显示所选图像

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

javascript jquery html css image

Javascript 在img区域选择中，我想在新div中显示所选图像,javascript,jquery,html,css,image,Javascript,Jquery,Html,Css,Image,我正在创建一个图像选择区域，我想在新的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.j

我正在创建一个图像选择区域，我想在新的
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>


jQuery UI工具提示-默认功能
$（函数（）{
函数readImage（文件）{
var reader=new FileReader（）；
var image=新图像（）；
var maxw=600；
var maxh=600；
reader.readAsDataURL（文件）；
reader.onload=函数（\u文件）{
image.src=\u file.target.result；//url.createObjectURL（文件）；
image.onload=函数（）{
var w=此宽度，
h=这个高度，
t=file.type，//ext only://file.type.split（'/'）[1]，
n=file.name，
s=~~（file.size/1024）+“KB”；
if（h>maxh | w>maxw）{
警告（“高度和宽度大于最大标准，请选择图像最大高度和宽度=2024X2024”）；
警报（w）；
警报（h）；
}否则{
警报（w）；
警报（h）；
$（'uploadPreview'）.html（''+w+'x'+h+''+s+''+t+''+n+'
'）；
$（'#myImage'）.Jcrop({
onChange:showPreview，
onSelect:showPreview，
方面：1
});
}
};
image.onerror=函数（）{
警报（'无效文件类型：'+file.type）；
};
};
}
$（“#选择”）。更改（函数（e）{
if（this.disabled）返回警报（'不支持文件上载！'）；
var F=this.files；
如果（F&&F[0]）用于（var i=0；i
首先，我上传一个图像，然后检查图像的最小标准

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

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

中显示所选区域，请尝试以下操作：

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

功能预览（img，选择）{
var scaleX=100/（selection.width | 1）；
var scaleY=100/（选择高度| | 1）；
$（'#雪貂+div>img'）.css({
宽度：数学圆（scaleX*400）+“px”，
高度：数学圆（scaleY*300）+“px”，
marginLeft:'-'+Math.round（scaleX*selection.x1）+“px”，
marginTop:'-'+Math.round（scaleY*selection.y1）+'px'
});
}
$（文档）.ready（函数（）{
$('')
.css({
浮动：'左'，
位置：'相对'，
溢出：“隐藏”，
宽度：“100px”，
高度：“100px”
})
.insertAfter（$）；
$（“#雪貂”）.imgAreaSelect（{aspectRatio:'1:1'，onSelectChange:preview}）；
});
从

获取首先，您不包括库，然后您应该将uploadPreview1图像包装在div中。此外，您应该全局定义这些变量，而不是在函数内部 
var image=newimage（）在
readImage
函数中

var thumbWidth=145，thumbHeight=190在
showPreview
功能中

在这条线上


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



您正在调用
preview
函数而不是
showPreview
演示非常有用：无法查看选定的图像区域。仅显示div边框..我已经尝试过了，但无法与我的代码集成。在我的代码中提到过