Effect bug on Chrome

Question

Effect bug on Chrome

Navigation

#1 by (3 votes)

1

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

<!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 someone finds out why, I'll be very grateful !!

php javascript

asked by anonymous 04.05.2018 / 02:06

1 answer

Excel, parse condition in data table Compare current time with time recorded in the database?

score 3 · Accepted Answer

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

div.style.position = "relative";

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

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

#image{
   position: relative;
}