Databases
StackOverflow2013
Postsdbo
POIn img area select, I want to show selected image in new div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIn img area select, I want to show selected image in new div
    text
    copied!<p>I am creating an image select area and I want to show selected image in a new <code>div</code>.</p> <p>I tried:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;jQuery UI Tooltip - Default functionality&lt;/title&gt; &lt;script src="http://deepliquid.com/projects/Jcrop/js/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="http://deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/css/jquery.Jcrop.css" type="text/css" /&gt; &lt;link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/demos/demo_files/demos.css" type="text/css" /&gt; &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="/resources/demos/style.css"&gt; &lt;script &gt; $(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 &gt; maxh || w &gt; 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('&lt;img id="myImage" src="' + this.src + '"&gt; ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '&lt;br&gt;'); $('#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 &amp;&amp; F[0]) for (var i = 0; i &lt; 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}); }); &lt;/script&gt; &lt;style&gt; &lt;/style&gt; &lt;/head&gt; &lt;body &gt; &lt;input type="file" id="choose" multiple="multiple" /&gt; &lt;br&gt; &lt;div id="uploadPreview" &gt;&lt;/div&gt;&lt;br&gt; &lt;img src="" id="uploadPreview1" /&gt;&lt;br&gt; &lt;/body&gt; &lt;/html&gt; </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 <code>div</code>.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload