Crop image using a crop tools to crop
<p>I have a piece of code as below: I want to crop image with 4 attributes:</p>

<blockquote>
  <p><code>top, left, width, height</code></p>
</blockquote>

<p>I can alert to see <code>top,left,width,height</code> correctly as where I want to crop, but when I click the button <code>#crop</code>, it doesn't crop to the location where I have alerted. Any solution will be appreciated. Thank you.</p>

<pre><code>$(document).ready(function (e) {
    $("#crop").click(function () {
        var canvas = document.getElementById("Mystore1");
        var context = canvas.getContext("2d");
        var top = $('#face').offset().top;
        var left = $('#face').offset().left;
        var width = $('#face').width();
        var height = $('#face').height();
        var destX = top;
        var destY = left;
        var destwidth = width;
        var destheight = height;
        alert(top);
        alert(left);
        alert(width);
        alert(height);
        var imageSrc = '../../../Public/Pictures/Sample     Pictures/Desert.jpg';
        var imageObj = new Image();
        imageObj.onload = function () {
            context.drawImage(imageObj, top, left, width, height, destX, destY, destwidth, destheight);
        };
        imageObj.src = imageSrc;
    });
});
</code></pre>
