Fatal编程技术网
  • javascript/
  • Javascript 如何在imgareaelect中显示选定区域

Javascript 如何在imgareaelect中显示选定区域

javascript jquery html

Javascript 如何在imgareaelect中显示选定区域,javascript,jquery,html,Javascript,Jquery,Html,代码是： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery UI Tooltip - Default functionality</title> <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" /> <

代码是：

    <!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
<title>jQuery UI Tooltip - Default functionality</title>
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
      <script type="text/javascript" src="scripts/jquery.min.js"></script>
      <script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
<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" />

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

var thumbWidth = 145, thumbHeight = 190;
<!--$(function(){ $('#jcrop_target').Jcrop(); });-->
function showPreview(coords)
{
    var rx = thumbWidth / coords.width;
    var ry = thumbHeight / coords.height;

    $('#uploadPreview1 + div > img').css({
        width: Math.round(rx * $("#uploadPreview1").width()) + 'px',
        height: Math.round(ry * $("#uploadPreview1").height()) + 'px',
        marginLeft: '-' + Math.round(rx * coords.width) + 'px',
        marginTop: '-' + Math.round(ry * coords.height) + 'px'
    });
}
$('<div id=""> <img src=\"" + image + "\" \/><div>  ')
.css({
            float: 'right',
            position: 'relative',
            overflow: 'hidden',
            width: thumbWidth + 'px',
            height: thumbHeight + 'px'
        })
        .insertAfter($('#uploadPreview1'));



});




</script>



<style>



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

   <div id="" ><img src=""  /></div><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；iimg'）.css({
宽度：Math.round（rx*$（“#uploadPreview1”）.width（））+px，
高度：Math.round（ry*$（“#uploadPreview1”）.height（））+px，
marginLeft:“-”+数学圆（rx*coords.width）+“px”，
marginTop:“-”+数学圆（ry*coords.height）+“px”
});
}
$('   ')
.css({
浮动：'对'，
位置：'相对'，
溢出：“隐藏”，
宽度：拇指宽度+px，
高度：拇指高度+px
})
.insertAfter（$）；
});
首先，我上传一个图像，然后检查图像的最小标准

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

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

一切正常。但它无法显示所选区域。我在代码中遇到的问题是（如何将图像的src传递给img标记或div标记）

希望你能理解这个问题。

divHtml=$（''，{'id'：ANYID}）.css({

divHtml=$('<div/>',{'id':ANYID}).css({
                    float: 'right',
        position: 'relative',
        overflow: 'hidden',
        width: thumbWidth + 'px',
        height: thumbHeight + 'px'
            });
imgHtml=$('<img/>',{'src':IMGSRCPATH, 'alt':ALTVALUE, 'title':TITLEVALUE});

var appendVal = divHtml.append(imgHtml).insertAfter($('#uploadPreview'));


浮动：'对'，
位置：'相对'，
溢出：“隐藏”，
宽度：拇指宽度+px，
高度：拇指高度+px
});
imgHtml=$（'

请试一试。
我们可以试一试吗？无法提供jfiddle。我将首先编辑我的问题，这是您目前得到的吗？@Ali Gajani希望您理解这个问题