Javascript 图像裁剪 Canvas 错误

Question

我正在尝试制作一个图像选择器，您可以在其中选择图片上的区域并将其上传到服务器。现在我已经从代码中复制了一些内容，问题是它没有像应该的那样工作。在我的最后一个问题中，有人给了我一个完美的裁剪技巧，我已经使用过它并已经集成到我的代码中。最后发表:Html image crop + showing image code

问题是，当我单击“确定”时，图像没有正确裁剪。尺寸不正确，选择的位置也不正确:

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>

我做错了什么？希望有人知道/发现我的错误;)

Answer 1

我发现了我的错误。我只是在裁剪之前缩放了图像，所以正常的宽度、高度是错误的。感谢您的提示，希望我能帮助别人;)