Sou iniciante em programacao e to cheio de problemas. =´(
No meu código abaixo estou tentando ler uma imagem .png cujo nome é passado pelo usuário mas não consegui...
O código é o seguinte:
<html>
<head>
<title>Heatmap Area - Coordenates</title>
<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript">
var file = "f18_12pt"; // Recebe valor de um input da pagina anterior digitado pelo usuário (ainda não consegui fazer isso e postei a dúvida no fórum na parte de HTML)
var filepng = "f18_12pt" + ".png"; // Outra tentativa.
var x = null;
var y = null;
var x2 = 0;
var y2 = 0;
var clicky = 0;
var clicks = Array();
var url;
wichX = 'x';
wichY = 'y';
function $(o){
return document.getElementById(o);
}
function point_it(event){
turn = clicky%2;
if (!turn){
wichX = 'x';
wichY = 'y';
}else{
wichX = 'x2';
wichY = 'y2';
x2 = x;
y2 = y;
}
pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("myCanvas").offsetLeft;
pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("myCanvas").offsetTop;
document.getElementById(wichX).value = pos_x;
document.getElementById(wichY).value = pos_y;
eval (wichX + ' = ' + pos_x);
eval (wichY + ' = ' + pos_y);
//if (x2 > 0)
//{
// mkRectDott(x, y, x2, y2);
//}
url= 'http://localhost/heatmap_area.php?x=' + x + '&y=' + y + '&x2=' + x2 + '&y2=' + y2 + '&file=' + file;
clicky++;
}
</script>
</head>
<body>
<div id="myCanvas" style="position:relative;background-color:#FFFFCC" onclick="point_it(event)"><img src="</script>file</script>.png" alt="</script>file</script>.png" /></div>
<form id="form1" name="form1" method="post">
<p>
X 1: <input type="text" name="x1" id="x" /> Y 1: <input type="text" name="y1" readonly="readonly" id="y" ><br>
X 2: <input type="text" name="x2" id="x2" > Y 2: <input type="text" name="y2" readonly="readonly" id="y2" ><br>
</p>
<input type="button" value="Submit" onclick="window.location.href=url;"/>
</form>
<script type="text/javascript">
var cnv = $("myCanvas");
var jg = new jsGraphics(cnv);
function mkRectDott(x, y, x2, y2)
{
jg.clear()
jg.setColor("#ff0000"); // red
jg.setStroke(1);
jg.drawRect(x, y, x2, y2); // co-ordinates related to "myCanvas"
jg.paint();
}
</script>
</body>
</html>
Já tentei
<img src="</script>file</script>.png" alt="</script>file</script>.png" /> e
<img src="</script>filepng</script>" alt="</script>filepng</script>" />, (entre outras tentativas de alocacao das "s frustradas)
mas a imagem não aparece.
Alguém poderia me ajudar. Sou trainee numa empresa pequena... me colocaram pra programar em HTML e JavaScript mesmo sem eu ter experiencia nunhuma na área... desde já obrigado pela ajuda de todos. =´)
Pergunta
three
Ei gente,
Sou iniciante em programacao e to cheio de problemas. =´(
No meu código abaixo estou tentando ler uma imagem .png cujo nome é passado pelo usuário mas não consegui...
O código é o seguinte:
<html> <head> <title>Heatmap Area - Coordenates</title> <script type="text/javascript" src="wz_jsgraphics.js"></script> <script type="text/javascript"> var file = "f18_12pt"; // Recebe valor de um input da pagina anterior digitado pelo usuário (ainda não consegui fazer isso e postei a dúvida no fórum na parte de HTML) var filepng = "f18_12pt" + ".png"; // Outra tentativa. var x = null; var y = null; var x2 = 0; var y2 = 0; var clicky = 0; var clicks = Array(); var url; wichX = 'x'; wichY = 'y'; function $(o){ return document.getElementById(o); } function point_it(event){ turn = clicky%2; if (!turn){ wichX = 'x'; wichY = 'y'; }else{ wichX = 'x2'; wichY = 'y2'; x2 = x; y2 = y; } pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("myCanvas").offsetLeft; pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("myCanvas").offsetTop; document.getElementById(wichX).value = pos_x; document.getElementById(wichY).value = pos_y; eval (wichX + ' = ' + pos_x); eval (wichY + ' = ' + pos_y); //if (x2 > 0) //{ // mkRectDott(x, y, x2, y2); //} url= 'http://localhost/heatmap_area.php?x=' + x + '&y=' + y + '&x2=' + x2 + '&y2=' + y2 + '&file=' + file; clicky++; } </script> </head> <body> <div id="myCanvas" style="position:relative;background-color:#FFFFCC" onclick="point_it(event)"><img src="</script>file</script>.png" alt="</script>file</script>.png" /></div> <form id="form1" name="form1" method="post"> <p> X 1: <input type="text" name="x1" id="x" /> Y 1: <input type="text" name="y1" readonly="readonly" id="y" ><br> X 2: <input type="text" name="x2" id="x2" > Y 2: <input type="text" name="y2" readonly="readonly" id="y2" ><br> </p> <input type="button" value="Submit" onclick="window.location.href=url;"/> </form> <script type="text/javascript"> var cnv = $("myCanvas"); var jg = new jsGraphics(cnv); function mkRectDott(x, y, x2, y2) { jg.clear() jg.setColor("#ff0000"); // red jg.setStroke(1); jg.drawRect(x, y, x2, y2); // co-ordinates related to "myCanvas" jg.paint(); } </script> </body> </html>Já tentei
<img src="</script>file</script>.png" alt="</script>file</script>.png" /> e
<img src="</script>filepng</script>" alt="</script>filepng</script>" />, (entre outras tentativas de alocacao das "s frustradas)
mas a imagem não aparece.
Alguém poderia me ajudar. Sou trainee numa empresa pequena... me colocaram pra programar em HTML e JavaScript mesmo sem eu ter experiencia nunhuma na área... desde já obrigado pela ajuda de todos. =´)
Abracos,
Three
Editado por threeLink para o comentário
Compartilhar em outros sites
2 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.