jquery - 图像旋转后的选择区域

Question

我在我的项目中使用这里的选择区域插件。我的问题是当图像被旋转（-90）时，选择方向会变得很奇怪。当我绘制像图 1 这样的选择时，它会显示像图 2 一样的结果。有人知道我应该如何解决这个问题吗？

标签： jquery

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>