Home » Jquery » jquery – Selection area after image rotated

jquery – Selection area after image rotated

Posted by: admin February 22, 2020 Leave a comment

Questions:

I’m using the selection area plugin from here in my project. My problem is that when the image been rotated(-90), the selection direction will become weird. When I draw a selection like pic 1, it shows the result like pic 2. Does anyone have any idea on how I suppose to solve this problem?

enter image description here

How to&Answer:

I just made an empty image with the appropriate width and height, and overlaid it over the original image. It’s a hack, but it should work.

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>