Display image with saved markup in the database

My problem is this: My page allows me to select an image from my bank, make some point markings, and save those points in the database. I would now like to call those images back to the screen, except with the markings that were made and saved on my bank, drawing the points that were saved. Here is my code below:

<?php
require_once "../controllers/DatabaseController.php";

if(isset($_POST['savedPoints'])){
    $jsonReceived =  $_POST['savedPoints'];
    $landmarksSaved = json_decode($jsonReceived);

    if($landmarksSaved){
        $DatabaseController -> updateLandmarks($landmarksSaved);
    }
    else{
        echo "<script> alert('No landmarks to save'); </script>";
    }
}
?>

<h1 class="page-header">
        <table width="400px" border="0">
            <tr>
                <td>
                    <input type="image" name="selectImage" src="../layout/imagens/Abrir.png" onClick="openWindow()">
                </td>
                <td>
                    <input type="image" name="markStitch" src="../layout/imagens/Ponto.png" onClick="openWindowSave()">
                </td>
                <td>
                    <input type="image" name="unmake" src="../layout/imagens/Desfazer.png" onClick="desfazer()">
                </td>
                <td>
                    <form method="post" action = "">
                        <input type="hidden" name="savedPoints" id="saved_points" value= ""/>
                        <input type="image" name="save" src="../layout/imagens/salvar.png" onClick="this.form.submit()">
                    </form>
                </td>

            </tr>
        </table>
    </h1>
<div id="image"></div>

The JS:

function openWindow(){
window.open("../views/service_pages/doctor_pages/Window.php", "_blank", 
"width=600, height=400");
}

function coordenadas(event) {
var selectedIndex = document.getElementById("pointsId").selectedIndex;
var currentPoint = 
document.getElementById("pointsId").options[selectedIndex].text;
if (currentPoint != "Selecione") {
    x = event.pageX;
    y = event.pageY;
    saveX = x;
    saveY = y;

    var div = document.getElementById('image');
    if (!global_points[currentPoint]) {
        global_points[currentPoint] = new Array();
    }
    global_points[currentPoint].X = x;
    global_points[currentPoint].Y = y;

    if (global_points[currentPoint].htmlPoint) {
        global_points[currentPoint].htmlPoint.outerHTML = ''; /*erase the 
 point*/
        global_points[currentPoint].htmlPoint = null;
    }
    var pto = document.querySelector('#image .ponto');
    var ponto = document.createElement("span");
    global_points[currentPoint].htmlPoint = ponto;

    ponto.setAttribute("class", "ponto");
    var imgOfLf = $("#image").offset().left;
    var imgOfTp = $("#image").offset().top;
    ponto.style.cssText = "top: " + Math.floor(parseInt(y) - imgOfTp - 2.5) 
+ "px; left: " + Math.floor(parseInt(x) - imgOfLf - 2.5) + "px;";
    div.appendChild(ponto); // crio o ponto
    //cria a legenda e posiciona
    var sigla = $("#pointsId option:selected").text().match(/\(\w+\)/)[0];
    var legs = $("span[id^='legenda']");
    legs.each(function(){
        if($(this).text() == sigla) $(this).remove();
    });
    $("#image").append('<span id="legenda'+legenda_id+'" 
class="legendas">'+sigla+'</span>');
    var legenda_width = $("#legenda"+legenda_id).width()/2;
    $("#legenda"+legenda_id).css({
        "top": Math.floor(parseInt(y) - imgOfTp + 5)+"px",
        "left": Math.floor(parseInt(x) - imgOfLf - legenda_width - 2.5)+"px"
    });
    legenda_id++;
    $("span.ponto").each(function(i,e){
        if(e.nextSibling && e.nextSibling.className != "legendas") 
e.outerHTML = '';
    });


    var data_json = toJSON(global_points);
    var hiddenForm = document.getElementById("saved_points");
    hiddenForm.setAttribute("value", data_json);
}
}

var legenda_id = 0;

Window.php:

<style> 
img{ 
    height: 100px; 
    margin: 5px; 
    border: 2px solid #fff; 
    cursor: pointer; 
} 

img:hover{ 
    border-color: #FF0000;
} 
</style>
<?php 
for($x=1; $x<=17; $x++){ 
?> 
<img src="../../../radiografias/<?php echo $x ?>.jpg">
<?php 
} 
?> 
<script> 
var imgs = document.querySelectorAll("img"); 
for(var x=0; x<imgs.length; x++){ 
    imgs[x].addEventListener("click", function(){ 

        window.opener.image(this.src); // envia para a função a imagem 
escolhida 
        window.close(); // fecha a janela ao escolher uma imagem 

    }); 
} 
</script>

DatabaseController.php:

public function updateLandmarks($decodedJson){
    $columns = "";
    $values = "";
    $dictionaryLandmarks = array("Básio (Ba)" => "Ba", "Sela (S)" => "S", 
"Násio (N)" => "N",
        "Espinha nasal anterior (ENA)" => "ENA", "Espinha nasal posterior 
(ENP)" => "ENP",
        "Ponto A (subespinhal)" => "A", "Ponto B (pupramental)" => "PB", 
"Próstil (Pr)" => "Pr",
        "Infradental (Id)" => "Id", "Pogônio (Pog)" => "Pog", "Gnátio (Gn)" 
=> "Gn", "Mento (Me)" => "Me",
        "Ponto D (D)" => "D", "Bolton (Bo)" => "Bo", "Articular (Ar)" => 
"Ar", "Pório (Po)" => "Po");
    foreach($decodedJson as $key => $value){
        $columns = $columns . $dictionaryLandmarks[$key] . "X, " . 
$dictionaryLandmarks[$key] . "Y, ";
        $values = $values . $value->X . ", " . $value->Y . ", ";
    }
    $this->connection->exec ( "REPLACE Img_Save(" . $columns . "id_doctor) 
VALUES(" . $values . "2)");
    $dictionaryLandmarks = null;
}