Estoy usando selectareas.js para seleccionar algunas partes de la imagen con el evento del mouse y obtener las coordenadas x, y, z de la imagen , ya que estoy seleccionando varias áreas de la imagen, todos los valores se imprimen/consola en mi navegador correctamente .

• Ahora estoy tratando de mostrar todas las coordenadas seleccionadas de las áreas de la imagen como una nueva imagen en un lienzo/div diferente en un evento de clic de botón.

• Entonces, técnicamente, cuando estoy seleccionando 2, 3 o 4 áreas, todos los valores de coordenadas se imprimen así en una matriz

   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}

• Ahora estoy tratando de descubrir cómo mostrar estas coordenadas como una nueva imagen diferente en mi página o descargar todo como una nueva imagen convirtiéndola en 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>