Javascript圖像作物畫布bug

我正在嘗試製作一個圖像選擇器，您可以在圖片上選擇區域並將其上傳到服務器。現在我已經從我的代碼中複製了一些東西，問題是它沒有像它應該那樣工作。在我的最後一個問題中，有人給了我一個完美的技巧，如何裁剪，我已經使用並已經集成到我的代碼中。最後發佈：Html image crop + showing image code Javascript圖像作物畫布bug

問題是，當我點擊'確定'的圖像沒有正確的權利。該demensions是不對的位置，您可以從中選擇也是錯誤的：

function readURL(input) { //Seite6 
 

 
    if (input.files && input.files[0]) { 
 
    var reader = new FileReader(); 
 

 
    reader.onload = function(e) { 
 
\t 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"; 
 
\t mcor3.style.top = ev.center.y+"px"; 
 
    }); 
 
</script>

我做了什麼錯？希望有人知道/發現我的錯誤;）

來源

2016-02-11 Number_987

這看起來不像android。 – zgc7009

檢查http://www.hotscripts.com/blog/javascript-image-cropping-scripts/ – Microsmsm

感謝您的提示，但我想用我自己的代碼做到這一點，以便我有充分的控制。任何人都可以找到錯誤？ –

我發現我的錯誤。我在裁剪之前縮放了圖像，所以正常寬度和高度都是錯誤的。感謝提示，希望我可以幫助別人 ;）

來源

2016-02-23 13:35:11

Javascript圖像作物畫布bug

回答

相關問題