StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>here is an working demo. i found some problem in your code. on ready function param you should send <code>$</code> and on click an event variable named <code>e</code> (whatever you want).</p> <p><img src="https://i.stack.imgur.com/OYRYc.png" alt="demontraiton"></p> <p>croparea is the face area selected by your crop tool. main image is the image portion. your js should be like so</p> <pre><code> $(document).ready(function($) { $("#crop").click(function(e){ var Imgwidth = $('#face').width(), Imgheight = $('#face').height(), faceOffset = $('#face').offset(), imgOffset = $('#imgHolder').find('img').offset(), imgX1 = faceOffset.left-imgOffset.left, imgY1 = faceOffset.top-imgOffset.top, imgX2 =imgX1+Imgwidth, imgY2 = imgY1+Imgheight; var imageSrc ='http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; var imageObj=new Image(); imageObj.src=imageSrc; selx1 = imgX1; sely1 = imgY1; selx2 = imgX2; sely2 = imgY2; selw = Imgwidth; selh = Imgheight; console.log(imgX1); console.log(imgY1); /*console.log(imgX2); console.log(imgY2);*/ var canvas=document.getElementById("Mystore1"); var context=canvas.getContext("2d"); context.canvas.height = Imgheight; context.drawImage(imageObj, imgX1, imgY1, selw, selh, 3, 3, Imgwidth, canvas.height-5); }); }); </code></pre> <p>when you select an area ( here #face div) from an image to crop then i calculate the top-left(X,Y) co-ordinate of the selected area in this line</p> <pre><code>imgX1 = faceOffset.left-imgOffset.left, imgY1 = faceOffset.top-imgOffset.top, </code></pre> <p>and the right-bottom co-ordinate in these line</p> <pre><code>imgX2 =imgX1+Imgwidth, imgY2 = imgY1+Imgheight; </code></pre> <p>and thus we get a rectangular co-ordinate system to draw the portion of the image that we selected to crop. for <code>drawImage</code> documentation please go to the link that i post in comment. i hope now its clear how i get the exact position to crop.</p> <p>here is a working demo <a href="http://plnkr.co/edit/h4QPUx8QAXlhwfMuKeuz" rel="nofollow noreferrer">click here</a></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