Область выделения после поворота изображения

Question

Я использую плагин выделения области здесь в моем проекте. Моя проблема в том, что когда изображение было повернуто (-90), направление выбора станет странным. Когда я рисую выделение, например, pi c 1, оно показывает результат, подобный pi c 2. Кто-нибудь имеет представление о том, как я должен решить эту проблему?

Answer 1

Я только что сделал пустое изображение с соответствующей шириной и высотой и наложил его поверх исходного изображения. Это взлом, но он должен работать.

function debugQtyAreas(event, id, areas) {
  console.log(areas.length + " areas", arguments);
};


var blank = function(width, height) {
  var newImg = $("<img src='data:,' alt>").attr("width", height)
    .attr("height", width);
  return newImg[0];
}

$("#originalImage").load(function() {
  var width = $("#originalImage")[0].width, height = $("#originalImage")[0].height;
  var img = blank(width, height);
  $("#originalImage").after(img);
  $.selectAreas(img, {
    minSize: [10, 10],
    onChanged: debugQtyAreas,
    areas: [{
      x: 10,
      y: 20,
      width: 60,
      height: 100,
    }]
  });
  $(".rotated-img > div").css("left", width / 2 - height / 2).css("top", height / 2 - width / 2);
});

.rotated-img {
  position: relative;
}

img#originalImage {
  transform: rotate(270deg);
}

img {
  position: absolute;
  top: 0px;
  left: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://rawgit.com/360Learning/jquery-select-areas/master/resources/jquery.selectareas.css" rel="stylesheet" />
<script src="https://rawgit.com/360Learning/jquery-select-areas/master/jquery.selectareas.js"></script>

<div class="rotated-img">
<img src="https://rawgit.com/360Learning/jquery-select-areas/master/example/example.jpg" id="originalImage" />
</div>