How to show Image coordinates x,y,z as a new image in a div on click button?

I am using selectareas.js to select some parts of the image with mouse event and getting coordinates x,y,z of the image, as I am selecting multiple areas of the image, all the values are printing/console in my browser correctly.

• Now I am trying to Show all those selected coordinates of image areas as a new image in a different canvas/div on a button click event.

• So technically when I am selecting 2,3 or 4 areas all coordinates values prints like this in an array

   0: {id: 0, x: 10, y: 20, z: 0, height: 100,width: 60}
   1: {id: 1, x: 159.5, y: 286, z: 0, height: 73,width: 220}
   2: {id: 2, x: 464.5, y: 300, z: 100, height: 117,width: 221} 
  

• Now I am trying to figure out how to show these coordinates as a different new image on my page or downloads all as a new image by converting into base64.

      
      $(document).ready(function() {
        $('img#example').selectAreas({
          minSize: [10, 10],
          onChanged: debugQtyAreas,
          width: 1000
        });
        $('#btnView').click(function() {
          var areas = $('img#example').selectAreas('areas');
          displayAreas(areas);
        });
      });
       var selectionExists;
  
      function areaToString(area) {
          return (typeof area.id === "undefined" ? "" : 
          (area.id + ": ")) + area.x + ':' + area.y + ' ' + area.width + 
         'x' + area.height + '<br />'
         }
  
      function debugQtyAreas(event, id, areas) {
      console.log(areas.length + " areas", arguments);
      };
  
     function displayAreas(areas) {
       var text = "";
       $.each(areas, function (id, area) {
       text += areaToString(area);
       console.log("Here")
       });
       output(text);
     } 

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jquery-select-areas@0.1.0/jquery.selectareas.js"></script>
  
  
  <div class="image-decorator">
    <img alt="Image principale" id="example" src="https://raw.githubusercontent.com/360Learning/jquery-select-areas/master/example/example.jpg" />
  </div>
  <table>
    <tr>
      <td class="actions">
        <input type="button" id="btnView" value="Display areas" class="actionOn" />
        <td>
          <div id="output" class='output'> </div>
        </td>
    </tr>
  </table>