Javascript image Crop canvas bug

Question

I am trying to make an image picker where you can select an area on the picture and than upload it to a server. Now i have copied some things out of my code, the problem is that it is not working like it should do. In my last questions someone gave me a perfect tip how to crop, which I have used and already integrated in my code. Last post: Html image crop + showing image code

The Problem is that when i click on 'OK' the image is not croped right. The demensions are not right and the position, which you can select is also wrong:

 function readURL(input) { //Seite6 if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { document.getElementById("seite6_bb").style.visibility = "visible"; document.getElementById("seite6_imageinput").style.visibility = "hidden"; $('#seite6_vorschau').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#seite6_imageinput").change(function() { readURL(this); }); function seite6_bildabb() { document.getElementById("seite6_bb").style.visibility = "hidden"; document.getElementById("seite6_imageinput").style.visibility = "visible"; } function seite6_bildok() { var seite6_crop_canvas = document.getElementById('seite6_canvas'); var seite6_sleft = $('#seite6_vorschauaus').position().left; var seite6_top = $('#seite6_vorschauaus').position().top; seite6_crop_canvas.getContext('2d').drawImage($('#seite6_vorschau')[0], seite6_sleft, seite6_top, 100, 100, 0, 0, 100, 100); document.getElementById("seite6_profilbild1").src = seite6_crop_canvas.toDataURL(); document.getElementById("seite6_bb").style.visibility = "hidden"; document.getElementById("seite6_imageinput").style.visibility = "visible"; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://hammerjs.github.io/dist/hammer.js"></script> <div id="seite6_bb" style="background: black; height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; z-index: 10; visibility: hidden;"> <img id="seite6_vorschau" src="#" style="max-width: 100%; max-height: 80%;"/> <div id="seite6_vorschauaus" style="position: absolute; height: 100px; width: 100px; background: white; opacity: 0.5; border: 1px solid black; top: 0px; left: 0px;"></div> <div style="position: absolute; bottom: 0px; width: 100%; height: 40px; background: white;"> <div style="position: absolute; top: 0px; left: 0px; width: 50%; height: 100%; text-align: center; font-size: 13px; color: #333333; font-family: RobotoMedium; line-height: 40px;" onclick="seite6_bildabb()">Abbrechen</div> <div style="position: absolute; top: 0px; right: 0px; width: 50%; height: 100%; text-align: center; font-size: 13px; border-left: 1px solid #656565; color: #333333; font-family: RobotoMedium; line-height: 40px;" onclick="seite6_bildok()">OK</div> </div> <canvas id="seite6_canvas" width="100" height="100" style="display:none;"></canvas> </div> <input id="seite6_imageinput" type="file" name="image" style="position: absolute; top: 60px; left: 0px; background: lightgrey; z-index: 10;"/> <img id="seite6_profilbild1" src="#" style="width: 150px; position: absolute; top: 30px;"/> <script> var mcor3 = document.getElementById('seite6_vorschauaus'); var mco3 = document.getElementById('seite6_vorschauaus',{ direction: Hammer.DIRECTION_ALL }); var mc3 = new Hammer(mco3); mc3.on("pan", function(ev) { mcor3.style.left = ev.center.x+"px"; mcor3.style.top = ev.center.y+"px"; }); </script> 

What did I do wrong? Hope someone knows/find my mistake ;)

Answer 1

I found my mistake. I just scaled the image before cropping so the normail width, height were wrong. Thanks for the Tips, hope I could help someone else ;)