StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POhow we can show selected area in imgareaelect
primarykey
Id
20626944
data
AcceptedAnswerId
0
AnswerCount
1
ClosedDate
CommentCount
6
CommunityOwnedDate
CreationDate
2013-12-17T05:53:28.133
FavoriteCount
1
LastActivityDate
2013-12-17T06:05:34.037
LastEditDate
2013-12-17T06:05:34.037
LastEditorUserId
3094119
OwnerUserId
3094119
ParentId
0
PostTypeId
1
Score
1
ViewCount
75
LastEditorDisplayName
text
Body
<p>code is:</p> <pre><code> <!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 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> </code></pre> <p>First of all I am uploading an image then checking the min criteria of an image.</p> <p>If the image passes the criteria then I am showing it on page. Then I am selecting an area to create thumbnail.</p> <p>However, when I select an area of the image, I am not able to show the selected area in a new div. </p> <p>All things are working. But it is unable to show selected area. I thing problem in my code is (how to pass src of an image to img tag or div tag)</p> <p>hope you understand the question.</p>
Tags
<javascript><jquery><html>
Title
how we can show selected area in imgareaelect
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USsonalgoyal
UserOwnerUserId
1. USsonalgoyal
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  POhow we can show selected area in imgareaelect
  UserUserId
  USsonalgoyal
  VoteTypeVoteTypeId
  VTFavorite
2. VO
  singulars
  PostPostId
  POhow we can show selected area in imgareaelect
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.