Effect app keeps bugging in Chrome

Asked

Viewed 37 times

1

My problem is this: I have a page that calls some functions for scoring in an image and effects on it, as I use other browsers, like Mozilla for example, it works normally, both the scoring and the application of the effects, However, only in Chrome when I try to apply an effect on the image, points end up changing positions. Below is the code of my page and the code of my file in Java...

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Odontoradiosis</title>

<link rel="stylesheet" type="text/css" 
href="../layout/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" 
href="../layout/css/landmark_system.css">

</head>

<link rel="icon" href="../layout/imagens/favicon.ico">
</head>
<body>

<!-- Wrap all page content here -->
<div id="wrap">

    <!-- Fixed navbar -->

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data- 
toggle="collapse" data-target="#navbar" aria-expanded="false" aria- 
controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Odontoradiosis</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="SystemManager.php? 
selectPage=!tWfoXTlIfnz=qIqt">Início</a></li>
                    <li><a href="#">Ajuda</a></li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle"
                        data-toggle="dropdown">Sair <b class="caret"></b> 
</a>
                        <ul class="dropdown-menu">
                            <li class=""><a 
href="../controllers/ServiceAccessController.php?logout=true">Logout</a> 
</li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-right">
                    <input type="text" class="form-control" 
placeholder="Search...">
                </form>
            </div>
      </div>
    </nav>

<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
    <ul class="nav nav-sidebar">
        <li class="active"><a href="#"><label class="filter-label" 
>Estruturas</label><select style="width: 80%; color:black">
                    <option selected>Selecione</option>
                    <option>Molar Superior</option>
                    <option>Molar Inferior</option>
                    <option>Incisivo Superior</option>
                    <option>Incisivo Inferior</option>
                    <option>Sela</option>
                    <option>Pório</option>
                    <option>Fosse Pterigo Maxilar</option>
                    <option>Maxila</option>
                    <option>Mandibula</option>
                    <option>Sínfise</option>
                    <option>Ossos Nasais</option>
                    <option>Frontal</option>
                    <option>Tecido Mole Inferior</option>
                    <option>Tecido Mole Superior</option>
                </select></a></li>
        <li class="active"><a href="#"><label class="filter-label" 
>Traçados</label><select style="width: 80%; color:black">
                    <option selected>Selecione</option>
                    <option>Harvold</option>
                    <option>Steiner</option>
                    <option>Downs</option>
                </select></a></li>
        <li class="active"><a href="#"><label class="filter-label" 
>Pontos</label><select id = "pointsId" style="width: 80%; color:black">
                    <option selected>Selecione</option>
                    <option>Básio (Ba)</option>
                    <option>Sela (S)</option>
                    <option>Násio (N)</option>
                    <option>Espinha nasal anterior (ENA)</option>
                    <option>Espinha nasal posterior (ENP)</option>
                    <option>Ponto A (subespinhal)</option>
                    <option>Ponto B (pupramental)</option>
                    <option>Próstil (Pr)</option>
                    <option>Infradental (Id)</option>
                    <option>Pogônio (Pog)</option>
                    <option>Gnátio (Gn)</option>
                    <option>Mento (Me)</option>
                    <option>Ponto D (D)</option>
                    <option>Bolton (Bo)</option>
                    <option>Articular (Ar)</option>
                    <option>Pório (Po)</option>
                </select></a></li>
        <li class="active"><a href="#">
                <label class="filter-label" >Contrast</label>
                <input type="range" id="contrast" min="0" max="200" 
value="100"/>
            </a></li>
        <li class="active"><a href="#">
                <label class="filter-label" >Brightness</label>
                <input type="range" id="brightness" min="0" max="200" 
value="100"/>
            </a></li>
        <li class="active"><a href="#">
                <label class="filter-label" >Grayscale</label>
                <input type="range" id="grayscale" min="0" max="100" 
value="0"/>
            </a></li>
        <li class="active"><a href="#">
                <label class="filter-label" >Invert</label>
                <input type="range" id="invert" min="0" max="100" 
value="0"/>
            </a></li>
        <li class="active"><a href="#">
                <label class="filter-label" >Opacity</label>
                <input type="range" id="opacity" min="0" max="100" 
value="100"/>
            </a></li>
        <li class="active"><a href="#">
                <label class="filter-label" >Saturate</label>
                <input type="range" id="saturate"  min="0" max="100" 
value="0" />
            </a></li>
        <li class="active"><a href="#">
                <label class="filter-label" ><font color="#696969"><input 
type="button" value="Desfazer" onclick="reset()"/></font></label>
            </a></li>
    </ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <h1 class="page-header">
        <table width="400px" border="0">
            <tr>
                <td>
                    <input type="image" name="selectImage" 
src="../layout/imagens/Abrir.png" onClick="image()">
                </td>
                <td>
                    <input type="image" name="markStitch" 
src="../layout/imagens/Ponto.png" onClick="this.form.submit()">
                </td>
                <td>
                    <input type="image" name="generateMeasurement" 
src="../layout/imagens/Tracar.png" onClick="this.form.submit()">
                </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>
</div>
</div>      </div>
</div>
<div id="footer">
    <div class="container">
        <p align="center" class="text-muted">
            © 2018 Abel Ramalho Galvão and João Victor Oliveira Couto. 
Powered by <a href="http://php.net"
                target="_blank">PHP</a>
        </p>
    </div>
</div>


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../layout/js/jquery-1.10.2.min.js"></script>
<script src="../layout/js/bootstrap.min.js"></script>
<script language="javascript" src="../layout/js/imageFunctions.js"></script>

</body>
</html>

imageFunctions.js:

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");
    div.style.position = "relative";
    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
    var data_json = toJSON(global_points);

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

function desfazer() {
/*will use global_effects array*/
}

function toJSON(js_array){
var returned_json = "{";
for (var key in js_array){
    if(returned_json.length > 1){
        returned_json = returned_json + ",";
    }
    returned_json = returned_json + "\"" + key + "\":{";
    var internalArray = js_array[key];
    returned_json = returned_json + "\"X\":" + internalArray.X + ",\"Y\":" + 
internalArray.Y + "}";
}
returned_json = returned_json + "}";
return returned_json;
}

var brightness = document.getElementById('brightness'),
contrast = document.getElementById('contrast'),
grayscale = document.getElementById('grayscale'),
invert = document.getElementById('invert'),
opacity = document.getElementById('opacity'),
saturate = document.getElementById('saturate');

function getValues() {
var filterStyle = "filter: ",
    brightnessValue = brightness.value,
    contrastValue = contrast.value,
    grayscaleValue = grayscale.value,
    invertValue = invert.value,
    opacityValue = opacity.value,
    saturateValue = saturate.value;

// noinspection JSAnnotator
filterStyle += `
            brightness(${brightnessValue}%)
            contrast(${contrastValue}%)
            grayscale(${grayscaleValue}%)
            invert(${invertValue}%)
            opacity(${opacityValue}%)
            saturate(${saturateValue}%)`;

return filterStyle;
}

function onChangeValue() {
var imageDiv = document.getElementById('image');
var filterValue = getValues();
imageDiv.setAttribute("style", filterValue);
}

function reset() {
brightness.value = 100;
contrast.value = 100;
grayscale.value = 0;
invert.value = 0;
opacity.value = 100;
saturate.value = 100;
onChangeValue();
}

function image() {
global_points = new Array();
global_effects = new Array();

random = Math.floor(Math.random() * (17 - 1) + 1);
img = new Image();
img.src = "../radiografias/" + random + ".jpg";
document.getElementById('image').innerHTML = "<img style=\" 
cursor:crosshair\" id='logo' href=\"#\" onmousedown= \"coordenadas(event)\" 
src=\"" +
    img.src + "\" width= 1050 />";
reset();
desfazer();
}

var elements = document.getElementsByTagName('input');
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener("input", onChangeValue);
}

If anyone finds out about the pq, I’d be very grateful!!

php javascript

1 answer

3


The problem is that its div #image does not have position relative, only when the point is created, on this line:

div.style.position = "relative";

When using the effects tools, Chrome is resetting the styles of div, removing the position relative dynamic.

Solve this by removing this line, which will no longer be needed, and adding to your CSS, so it stays permanent:

#image{
   position: relative;
}

  • Thank you very much. I really went through this...

Browser other questions tagged php javascript

You are not signed in. Login or sign up in order to post.