Cannot crop the image with correct location or original x,y.

Question

I can get the location of top,left,width,height, but I can't crop as the alert show.

<script>
    $(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();
            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, top, left, width, height);
            };
            imageObj.src=imageSrc;
        });
    });

</script>

Possible this may what you want, Look at [This][1] [1]: http://stackoverflow.com/questions/4200374/copy-and-crop-images-in-javascript — Amol, Mar 06 '13 at 05:18
it shows the alert of top,left,width,height and it shows the correct values of where I want to crop, but when I crop the image it were wrong location. — Lina Tum, Mar 06 '13 at 06:02
have you look at [this](http://www.pixastic.com/lib/git/pixastic/actions/crop.js) and [this](https://gist.github.com/murz/702799) — Amol, Mar 06 '13 at 07:11
Can you tell me more detail about this? or can you tell me about what is the problem of my coding? — Lina Tum, Mar 07 '13 at 03:47

Nur Rony · Accepted Answer · 2013-03-11T13:11:29.950

1

here is an working demo. i found some problem in your code. on ready function param you should send $ and on click an event variable named e (whatever you want).

demontraiton

croparea is the face area selected by your crop tool. main image is the image portion. your js should be like so

    $(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);


        });
    });

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

imgX1 = faceOffset.left-imgOffset.left,
imgY1 = faceOffset.top-imgOffset.top,

and the right-bottom co-ordinate in these line

imgX2 =imgX1+Imgwidth,
imgY2 = imgY1+Imgheight;

and thus we get a rectangular co-ordinate system to draw the portion of the image that we selected to crop. for drawImage documentation please go to the link that i post in comment. i hope now its clear how i get the exact position to crop.

here is a working demo click here

edited Mar 11 '13 at 13:11

answered Mar 06 '13 at 05:16

Nur Rony

7,823
7
38
45

Thank you...but this demo not working for me, because I want to use a crop tools to crop the image, not define value for it. – Lina Tum Mar 06 '13 at 05:28
okay you can see `http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/` for more. as you said you are using crop image tool, you need to get the initial co-ordinate (left-top) and the the end (right-bottom) coordinate and calculate the height and width dynamically from it. then just draw it on canvas. you can set drawing origin for better placement. – Nur Rony Mar 07 '13 at 06:28
I think you still don't understand my purpose yet. For example: I have a crop tools and I want to crop the where I want to crop, but when I crop on location of top 80, left 100, width 80, height 80, accidentally it shows the crop location with different location where I have crop. and my code is as above. I really need help from you. Thank you. – Lina Tum Mar 11 '13 at 02:37
please check this [updated plunker demo](http://plnkr.co/edit/h4QPUx8QAXlhwfMuKeuz) . i hope this helps you – Nur Rony Mar 11 '13 at 06:11
Sorry sir, can you give with a very clear sample one, i'm too new with this. thank you. – Lina Tum Mar 11 '13 at 12:35
pls check the answer,i edited it with explanation. i hope its clear now – Nur Rony Mar 11 '13 at 13:12
Hello sir. Can I bother you again? I have seen your code and it work well, but when I added some more function it seems to crop wrong again. For example: I added function rotate Left or Right it crop wrongly. Here is my function rotate (I used jqueryrotate as library) > – Lina Tum Mar 12 '13 at 02:36
– Lina Tum Mar 12 '13 at 02:38

Cannot crop the image with correct location or original x,y.

1 Answers1