Volver al Programación / Codificación foro

Agilizarán no actualizar js globals de función

  • may
  • Proficient
  • Proficient
  • Avatar de Usuario
  • Registrado: Dic 25, 2004
  • Mensajes: 328
  • Loc: Holland [NL]
  • Status: Offline

Nota Junio 7th, 2011, 1:24 pm

Hola chicos,

Tengo este pequeño curso de proyecto en que utilizo HTTPRequest para dibujar en una imagen utilizando un back-end PHP. En la interfaz de Ajax utilizo un desplegable seleccione junto con onchange = "función" para actualizar un var de JS global. Todo está funcionando como se esperaba en Firefox sin errores, excepto en IE.

Aquí está el js.
JAVASCRIPT Código: [ Select ]
 
 
   // Are we IE
   var isIE = document.all?true:false;
   
   // Declare some vars
   var aDiv;
   var posX;            // This var is used to store the mouse X position
   var posY;            // This var is used to store the mouse Y position
   var Color = 'blue';     // Sets the filled eclipse color
   var Size = 10;       // Sets the eclipse size in px
   var xmlhttp;         // We use ajax to update the image remotely
   
   if(!e) var e = window.event;
   
   // initialize the AJAX http request object
   if(window.XMLHttpRequest){
      xmlhttp = new XMLHttpRequest();
   }else{
      if(isIE){
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
   }
   
   // Function that catches the mouse coords.
   function getCoords(e){
      if(!isIE){
         posX = e.offsetX?(e.offsetX):e.pageX-document.getElementById(aDiv).offsetLeft;
         posY = e.offsetY?(e.offsetY):e.pageY-document.getElementById(aDiv).offsetTop;
      }else{
         posX = event.offsetX + document.body.scrollLeft;
         posY = event.offsetY + document.body.scrollTop;
      }
      return true;
   }
   
   // Use the remote PHP lib to add a dot from the image
   function putDot(imgId, Id, color){
      var obj = document.getElementById(imgId);
      var url = 'rendering_engine.php?imgid='+Id+'&posx='+posX+'&posy='+posY+'&action=add&color='+Color+'&size='+Size+'&height='+obj.height+'&width='+obj.width;
      xmlhttp.open('GET',url,true);
      xmlhttp.send();
      xmlhttp.onreadystatechange=function(){
         if(xmlhttp.readyState==4 && xmlhttp.status==200){
            ldImage(imgId, Id);
         }
      }
   }
 
   function ldImage(imgId, Id){
      var obj = document.getElementById(imgId);
      var date = new Date();
      //alert('height:'+obj.height+'width:'+obj.width);
      var url = 'rendering_engine.php?imgid='+Id+'&action=show&posx='+posX+'&posy='+posY+'&height='+obj.height+'&width='+obj.width+'&'+date.getTime();
      obj.src = url;
   }
   
   function setColor(val){ Color = val; }
   
   function setSize(val){ Size = val; }
   
   function MouseCaptureLoc(activeDiv){ aDiv = activeDiv; }
   
   document.onmousemove = getCoords;
 
  1.  
  2.  
  3.    // Are we IE
  4.    var isIE = document.all?true:false;
  5.    
  6.    // Declare some vars
  7.    var aDiv;
  8.    var posX;            // This var is used to store the mouse X position
  9.    var posY;            // This var is used to store the mouse Y position
  10.    var Color = 'blue';     // Sets the filled eclipse color
  11.    var Size = 10;       // Sets the eclipse size in px
  12.    var xmlhttp;         // We use ajax to update the image remotely
  13.    
  14.    if(!e) var e = window.event;
  15.    
  16.    // initialize the AJAX http request object
  17.    if(window.XMLHttpRequest){
  18.       xmlhttp = new XMLHttpRequest();
  19.    }else{
  20.       if(isIE){
  21.          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  22.       }
  23.    }
  24.    
  25.    // Function that catches the mouse coords.
  26.    function getCoords(e){
  27.       if(!isIE){
  28.          posX = e.offsetX?(e.offsetX):e.pageX-document.getElementById(aDiv).offsetLeft;
  29.          posY = e.offsetY?(e.offsetY):e.pageY-document.getElementById(aDiv).offsetTop;
  30.       }else{
  31.          posX = event.offsetX + document.body.scrollLeft;
  32.          posY = event.offsetY + document.body.scrollTop;
  33.       }
  34.       return true;
  35.    }
  36.    
  37.    // Use the remote PHP lib to add a dot from the image
  38.    function putDot(imgId, Id, color){
  39.       var obj = document.getElementById(imgId);
  40.       var url = 'rendering_engine.php?imgid='+Id+'&posx='+posX+'&posy='+posY+'&action=add&color='+Color+'&size='+Size+'&height='+obj.height+'&width='+obj.width;
  41.       xmlhttp.open('GET',url,true);
  42.       xmlhttp.send();
  43.       xmlhttp.onreadystatechange=function(){
  44.          if(xmlhttp.readyState==4 && xmlhttp.status==200){
  45.             ldImage(imgId, Id);
  46.          }
  47.       }
  48.    }
  49.  
  50.    function ldImage(imgId, Id){
  51.       var obj = document.getElementById(imgId);
  52.       var date = new Date();
  53.       //alert('height:'+obj.height+'width:'+obj.width);
  54.       var url = 'rendering_engine.php?imgid='+Id+'&action=show&posx='+posX+'&posy='+posY+'&height='+obj.height+'&width='+obj.width+'&'+date.getTime();
  55.       obj.src = url;
  56.    }
  57.    
  58.    function setColor(val){ Color = val; }
  59.    
  60.    function setSize(val){ Size = val; }
  61.    
  62.    function MouseCaptureLoc(activeDiv){ aDiv = activeDiv; }
  63.    
  64.    document.onmousemove = getCoords;
  65.  


¿Por alguna razón cuando se llama a la función setColor(), resulta en un indefinido js var mundial nadie cualquier pista sobre cómo puedo solucionarlo?

La función se llama utilizando el código HTML siguiente.
[HTML]
<div>
< seleccionar onchange="setColor(value)" >
azul de <option> </option>
verde de <option> </option>
rojo de <option> </option>
gris de <option> </option>
blanco de <option> </option>
<option> limpiar </option>
</select>
< seleccionar onchange="setSize(value)" >
<option> 10 </option>
<option> 15 </option>
<option> 20 </option>
<option> 25 </option>
<option> 30 </option>
<option> 35 </option>
</select>
</div>
[/HTML MÁS EXTERNAS]

Cualquier ayuda es muy apreciada.

TIA, mayo
1 + 1 = 10 + 1 = 11 + 11 = 110
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Junio 7th, 2011, 1:24 pm

  • WritingBadCode
  • Graduate
  • Graduate
  • Avatar de Usuario
  • Registrado: Abr 28, 2011
  • Mensajes: 214
  • Loc: Sweden
  • Status: Offline

Nota Junio 8th, 2011, 7:03 am

No sé si esto podría tener algo que ver con ella, pero al probar el código javascript proporcionado con esto:
Código: [ Select ]
<select onchange="setColor(value)">
   <option>blue</option>
   <option>green</option>
   <option>red</option>
   <option>gray</option>
   <option>white</option>
   <option>clean up</option>
</select>
<select onchange="setSize(value)">
   <option>10</option>
   <option>15</option>
   <option>20</option>
   <option>25</option>
   <option>30</option>
   <option>35</option>
</select>
  1. <select onchange="setColor(value)">
  2.    <option>blue</option>
  3.    <option>green</option>
  4.    <option>red</option>
  5.    <option>gray</option>
  6.    <option>white</option>
  7.    <option>clean up</option>
  8. </select>
  9. <select onchange="setSize(value)">
  10.    <option>10</option>
  11.    <option>15</option>
  12.    <option>20</option>
  13.    <option>25</option>
  14.    <option>30</option>
  15.    <option>35</option>
  16. </select>


He observado que el "valor" o "val" como su renombrado no tiene ningún valor en IE.

He cambiado las funciones a este aspecto sólo para propósito de pruebas:

Código: [ Select ]
function setColor(val){ alert(val); }
function setSize(val){ alert(val); }
  1. function setColor(val){ alert(val); }
  2. function setSize(val){ alert(val); }


IE envió una alerta vacía mientras Chrome y FireFox enviaron el valor seleccionado.

EDITAR: malinterpretar su puesto. Veo que tenías que descubierto. Lol. Lo siento.:oops:

Aquí es algo feo mirando el código que funciona en IE y los otros (sólo para lo de color) para darle una idea:

En lugar de
Código: [ Select ]
function setColor(val){ Color = val; }

Intente:
Código: [ Select ]
function setColor()
{
var values = document.getElementById("colorChange");
var count = values.length;

for(var n = 0; n < count; n++)
    {
    if (values.options[n].selected)
        {
              Color = values.options[n].innerHTML;
            alert(Color);
        }
    }
}
  1. function setColor()
  2. {
  3. var values = document.getElementById("colorChange");
  4. var count = values.length;
  6. for(var n = 0; n < count; n++)
  7.     {
  8.     if (values.options[n].selected)
  9.         {
  10.               Color = values.options[n].innerHTML;
  11.             alert(Color);
  12.         }
  13.     }
  14. }


Esto supone que cambia el código HTML a esto:
Código: [ Select ]
<select id="colorChange" onchange="setColor()">
   <option>blue</option>
   <option>green</option>
   <option>red</option>
   <option>gray</option>
   <option>white</option>
   <option>clean up</option>
</select>
<select onchange="setSize(value)">
   <option>10</option>
   <option>15</option>
   <option>20</option>
   <option>25</option>
   <option>30</option>
   <option>35</option>
</select>
  1. <select id="colorChange" onchange="setColor()">
  2.    <option>blue</option>
  3.    <option>green</option>
  4.    <option>red</option>
  5.    <option>gray</option>
  6.    <option>white</option>
  7.    <option>clean up</option>
  8. </select>
  9. <select onchange="setSize(value)">
  10.    <option>10</option>
  11.    <option>15</option>
  12.    <option>20</option>
  13.    <option>25</option>
  14.    <option>30</option>
  15.    <option>35</option>
  16. </select>

Realizar 2 cambios, dándole un valor de ID y onchange no pasará ningún valor.
  • may
  • Proficient
  • Proficient
  • Avatar de Usuario
  • Registrado: Dic 25, 2004
  • Mensajes: 328
  • Loc: Holland [NL]
  • Status: Offline

Nota Junio 8th, 2011, 9:40 am

Sí, también señaló que IE no pasar el valor como mozilla como navegador. La solución "fea" como sea :) parece más bien lumbersum, pero si funciona mal que acompañan.

Estoy un poco preocupado de recorrer cada valor, que podría convertirse en un problema con grandes listas de selección y el rendimiento del cliente pobre, así que creo que mal hace el código incluso más feo por probar el tipo de navegador;-)

Cualquier forma, si funciona...

Ah, sí antes olvidar la parte más importante...

THX para la solución sugerida:)
1 + 1 = 10 + 1 = 11 + 11 = 110
  • WritingBadCode
  • Graduate
  • Graduate
  • Avatar de Usuario
  • Registrado: Abr 28, 2011
  • Mensajes: 214
  • Loc: Sweden
  • Status: Offline

Nota Junio 8th, 2011, 9:57 am

Como usted dice que hay probablemente mejores formas de hacer esto, especialmente si la lista obtiene grande.

Si encuentra una mejor solución por favor no se sienten mal para compartir. =)

Una cosa menor que puede hacer si no te gusta recorrer todo es agregar un descanso;
Código: [ Select ]

function setColor()
{
var values = document.getElementById("colorChange");
var count = values.length;

for(var n = 0; n < count; n++)
  {
  if (values.options[n].selected)
    {
       Color = values.options[n].innerHTML;
       break;
    }
  }
}
  2. function setColor()
  3. {
  4. var values = document.getElementById("colorChange");
  5. var count = values.length;
  7. for(var n = 0; n < count; n++)
  8.   {
  9.   if (values.options[n].selected)
  10.     {
  11.        Color = values.options[n].innerHTML;
  12.        break;
  13.     }
  14.   }
  15. }


¿Si las choses usuario uno de los valores de la primeros a continuación, el bucle se detendrá, guardar un procesamiento? NOSE.
  • may
  • Proficient
  • Proficient
  • Avatar de Usuario
  • Registrado: Dic 25, 2004
  • Mensajes: 328
  • Loc: Holland [NL]
  • Status: Offline

Nota Junio 8th, 2011, 9:58 am

Imagen

THX funciona a las mil maravillas:D
Attachments:
screenshot.png
  • may
  • Proficient
  • Proficient
  • Avatar de Usuario
  • Registrado: Dic 25, 2004
  • Mensajes: 328
  • Loc: Holland [NL]
  • Status: Offline

Nota Junio 8th, 2011, 10:00 am

Para cualquier persona que le gusta experimentar con esto, aquí está el código completo;)

TENGA EN CUENTA QUE EL AJUSTE NO (AÚN) PARA LA PRODUCCIÓN. EL CÓDIGO NECESITA REFINAMIENTO Y COMPROBACIONES DE SEGURIDAD OBVIO Y ESCAPA.

HTML Código: [ Select ]
<?php
// Fetch the patient_id and Image_id
?>
 
<html>
<head>
<!-- Enable IE8 Standards mode -->
<meta http-equiv="X-UA-Compatible" content="IE=8" >
 
<script language="JavaScript">
   // Are we IE
   var isIE = document.all?true:false;
   // Declare some vars
   var aDiv;
   var posX;            // This var is used to store the mouse X position
   var posY;            // This var is used to store the mouse Y position
   var Color = 'blue';     // Sets the filled eclipse color
   var Size = 10;       // Sets the eclipse size in px
   var xmlhttp;         // We use ajax to update the image remotely
   // Test if event is defined, else define it.
   if(!e) var e = window.event;
   // initialize the AJAX http request object
   if(window.XMLHttpRequest){
      xmlhttp = new XMLHttpRequest();
   }else{
      if(isIE){
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
   }
   // Function that catches the mouse coords and is called on document.mousemove.
   function getCoords(e){
      if(!isIE){
         posX = e.offsetX?(e.offsetX):e.pageX-document.getElementById(aDiv).offsetLeft;
         posY = e.offsetY?(e.offsetY):e.pageY-document.getElementById(aDiv).offsetTop;
      }else{
         posX = event.offsetX + document.body.scrollLeft;
         posY = event.offsetY + document.body.scrollTop;
      }
      return true;
   }
   // Function that instructs php to draw a dot with the given properties on the given coords.
   function putDot(imgId, Id, color){
      var obj = document.getElementById(imgId);
      var url = 'rendering_engine.php?imgid='+Id+'&posx='+posX+'&posy='+posY+'&action=add&color='+Color+'&size='+Size+'&height='+obj.height+'&width='+obj.width;
      xmlhttp.open('GET',url,true);
      xmlhttp.send();
      xmlhttp.onreadystatechange=function(){
         if(xmlhttp.readyState==4 && xmlhttp.status==200){
            ldImage(imgId, Id);
         }
      }
   }
   // Function that (re)loads the image on pageload and draw activity.
   function ldImage(imgId, Id){
      var obj = document.getElementById(imgId);
      var date = new Date();
      var url = 'rendering_engine.php?imgid='+Id+'&action=show&posx='+posX+'&posy='+posY+'&height='+obj.height+'&width='+obj.width+'&'+date.getTime();
      obj.src = url;
   }
   // Assign pattern that is supported by both IE and Mozilla.
   // IE does not pass obj.value onchange like mozilla does.
   // Thx to WritingBadCode on Ozzu.com
   function setColor(){
      var values = document.getElementById("brushColor");
      var count = values.length;
      for(var n = 0; n < count; n++){
         if (values.options[n].selected){
               Color = values.options[n].innerHTML;
         }
      }
   }
   // Assign pattern that is supported by both IE and Mozilla.
   // IE does not pass obj.value onchange like mozilla does.
   // Thx to WritingBadCode on Ozzu.com
   function setSize(){
      var values = document.getElementById("brushSize");
      var count = values.length;
      for(var n = 0; n < count; n++){
         if (values.options[n].selected){
               Size = values.options[n].innerHTML;
         }
      }
   }
   
   function MouseCaptureLoc(activeDiv){ aDiv = activeDiv; }
   
   document.onmousemove = getCoords;
</script>
</head>
<body style="margin-left:50px; width:100%;" onload="ldImage('img1', 1); ldImage('img2', 2);">
<div>
<form name="brushes" id="brushes">
<select id="brushColor" onchange="setColor()">
      <option>blue</option>
      <option>green</option>
      <option>red</option>
      <option>gray</option>
      <option>white</option>
      <option>clean up</option>
</select>
<select id="brushSize" onchange="setSize(value)">
      <option>10</option>
      <option>15</option>
      <option>20</option>
      <option>25</option>
      <option>30</option>
      <option>35</option>
</select>
</form>
</div>
<div>
<div style="float:left;">
<div onmouseover="MouseCaptureLoc('1')" id="1" style="float:left; border:1px solid black; background-image:url(./skeletalsystem.jpg); width:597px; height:741px;">
   <img onclick="putDot('img1', '1')"  id="img1" src="#" width="597" height="741">
</div>
<div onmouseover="MouseCaptureLoc('2')" id="2" style=" float:right; border:1px solid black; background-image:url(./human_organs.jpg); width:453px; height:477px;">
   <img onclick="putDot('img2', '2')"  id="img2" src="#" width="453" height="477" >
</div>
</div>
</body>
</html>
 
  1. <?php
  2. // Fetch the patient_id and Image_id
  3. ?>
  4.  
  5. <html>
  6. <head>
  7. <!-- Enable IE8 Standards mode -->
  8. <meta http-equiv="X-UA-Compatible" content="IE=8" >
  9.  
  10. <script language="JavaScript">
  11.    // Are we IE
  12.    var isIE = document.all?true:false;
  13.    // Declare some vars
  14.    var aDiv;
  15.    var posX;            // This var is used to store the mouse X position
  16.    var posY;            // This var is used to store the mouse Y position
  17.    var Color = 'blue';     // Sets the filled eclipse color
  18.    var Size = 10;       // Sets the eclipse size in px
  19.    var xmlhttp;         // We use ajax to update the image remotely
  20.    // Test if event is defined, else define it.
  21.    if(!e) var e = window.event;
  22.    // initialize the AJAX http request object
  23.    if(window.XMLHttpRequest){
  24.       xmlhttp = new XMLHttpRequest();
  25.    }else{
  26.       if(isIE){
  27.          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  28.       }
  29.    }
  30.    // Function that catches the mouse coords and is called on document.mousemove.
  31.    function getCoords(e){
  32.       if(!isIE){
  33.          posX = e.offsetX?(e.offsetX):e.pageX-document.getElementById(aDiv).offsetLeft;
  34.          posY = e.offsetY?(e.offsetY):e.pageY-document.getElementById(aDiv).offsetTop;
  35.       }else{
  36.          posX = event.offsetX + document.body.scrollLeft;
  37.          posY = event.offsetY + document.body.scrollTop;
  38.       }
  39.       return true;
  40.    }
  41.    // Function that instructs php to draw a dot with the given properties on the given coords.
  42.    function putDot(imgId, Id, color){
  43.       var obj = document.getElementById(imgId);
  44.       var url = 'rendering_engine.php?imgid='+Id+'&posx='+posX+'&posy='+posY+'&action=add&color='+Color+'&size='+Size+'&height='+obj.height+'&width='+obj.width;
  45.       xmlhttp.open('GET',url,true);
  46.       xmlhttp.send();
  47.       xmlhttp.onreadystatechange=function(){
  48.          if(xmlhttp.readyState==4 && xmlhttp.status==200){
  49.             ldImage(imgId, Id);
  50.          }
  51.       }
  52.    }
  53.    // Function that (re)loads the image on pageload and draw activity.
  54.    function ldImage(imgId, Id){
  55.       var obj = document.getElementById(imgId);
  56.       var date = new Date();
  57.       var url = 'rendering_engine.php?imgid='+Id+'&action=show&posx='+posX+'&posy='+posY+'&height='+obj.height+'&width='+obj.width+'&'+date.getTime();
  58.       obj.src = url;
  59.    }
  60.    // Assign pattern that is supported by both IE and Mozilla.
  61.    // IE does not pass obj.value onchange like mozilla does.
  62.    // Thx to WritingBadCode on Ozzu.com
  63.    function setColor(){
  64.       var values = document.getElementById("brushColor");
  65.       var count = values.length;
  66.       for(var n = 0; n < count; n++){
  67.          if (values.options[n].selected){
  68.                Color = values.options[n].innerHTML;
  69.          }
  70.       }
  71.    }
  72.    // Assign pattern that is supported by both IE and Mozilla.
  73.    // IE does not pass obj.value onchange like mozilla does.
  74.    // Thx to WritingBadCode on Ozzu.com
  75.    function setSize(){
  76.       var values = document.getElementById("brushSize");
  77.       var count = values.length;
  78.       for(var n = 0; n < count; n++){
  79.          if (values.options[n].selected){
  80.                Size = values.options[n].innerHTML;
  81.          }
  82.       }
  83.    }
  84.    
  85.    function MouseCaptureLoc(activeDiv){ aDiv = activeDiv; }
  86.    
  87.    document.onmousemove = getCoords;
  88. </script>
  89. </head>
  90. <body style="margin-left:50px; width:100%;" onload="ldImage('img1', 1); ldImage('img2', 2);">
  91. <div>
  92. <form name="brushes" id="brushes">
  93. <select id="brushColor" onchange="setColor()">
  94.       <option>blue</option>
  95.       <option>green</option>
  96.       <option>red</option>
  97.       <option>gray</option>
  98.       <option>white</option>
  99.       <option>clean up</option>
  100. </select>
  101. <select id="brushSize" onchange="setSize(value)">
  102.       <option>10</option>
  103.       <option>15</option>
  104.       <option>20</option>
  105.       <option>25</option>
  106.       <option>30</option>
  107.       <option>35</option>
  108. </select>
  109. </form>
  110. </div>
  111. <div>
  112. <div style="float:left;">
  113. <div onmouseover="MouseCaptureLoc('1')" id="1" style="float:left; border:1px solid black; background-image:url(./skeletalsystem.jpg); width:597px; height:741px;">
  114.    <img onclick="putDot('img1', '1')"  id="img1" src="#" width="597" height="741">
  115. </div>
  116. <div onmouseover="MouseCaptureLoc('2')" id="2" style=" float:right; border:1px solid black; background-image:url(./human_organs.jpg); width:453px; height:477px;">
  117.    <img onclick="putDot('img2', '2')"  id="img2" src="#" width="453" height="477" >
  118. </div>
  119. </div>
  120. </body>
  121. </html>
  122.  


PHP Código: [ Select ]
<?php
// Connect to the database
if($dblink = mysql_connect('127.0.0.1','root','password')){
   mysql_select_db('test', $dblink);
}else{
   exit;
}
 
 
// fetch all post/gets.
if(isset($_POST{'action'}) || isset($_GET{'action'})){
   if(isset($_POST{'action'})){
      foreach($_POST as $key => $value){
         $$key = $value;
      }
   }else{
      foreach($_GET as $key => $value){
         $$key = $value;
      }
   }
}else{
   exit;
}
// Determ what function to call //
if(isset($action)){
   if($action == 'add'){
      if(isset($imgid)){
         add_eclipse($posx, $posy, $imgid, $color, $size, $width, $height);
      }else{
         echo 'false';
      }
   }elseif($action == 'show'){
      if(isset($imgid)){
         show_image($posx, $posy, $imgid, $width, $height);
      }else{
         echo 'false';
      }
   }else{
      echo 'false';
   }
}
 
 
function add_eclipse($x, $y, $id, $color = false, $size = false, $width = false, $height = false){
   if(isset($id)){
      $sql = "select * from images where id = '$id'";
      $result = mysql_query($sql);
      $row = mysql_fetch_assoc($result);
      if($row){
         $img = imagecreatefromstring($row{'image_bin'});
         $new = false;
      }else{
         // New image //
         $img = imagecreatetruecolor($width, $height);
         $new = true;
      }
   }
   // Enable alpha blending (requires GD2.0)
   imageantialias($img, true);
   
   // Color Pallete
   $pallet{'black'}     = imagecolorallocate($img, 2, 2, 2);;
   $pallet{'transparent'}  = imagecolorallocate($img, 51, 80, 124);
   $pallet{'transparent'}  = ImageColorTransparent($img, $pallet{'transparant'});
   $pallet{'red'}          = imagecolorallocate($img, 255, 0, 0);
   $pallet{'green'}     = imagecolorallocate($img, 0, 255, 0);
   $pallet{'blue'}      = imagecolorallocate($img, 50, 50, 200);
   $pallet{'white'}     = imagecolorallocate($img, 255, 255, 255);
   $pallet{'gray'}         = imagecolorallocate($img, 128, 128, 128);
   
   // BG
   ImageColorTransparent($img, $pallet{'transparant'});
   
   // Add the eclipse
   if(!isset($color)){ $color = 'red'; }
   if(!isset($size)){ $size = 20;}
   if($color != 'clean up'){
      imagefilledellipse($img, $x, $y, $size+3, $size+3, $pallet{'black'});
   }
   imagefilledellipse($img, $x, $y, $size, $size, $pallet{$color});
   //imagefilledellipse($img, $x-5, $y, 10, 10, $pallet{'transparent'});
   
   // Get the raw image using an output buffer (ob)
   ob_start();
   imagepng($img);
   $unsave = ob_get_contents();
   ob_end_clean();
   
   // Create a hex tring out of the raw stream
   $save = addslashes($unsave);
   
   if($new){
      $sql = "insert into images(image_ext, image_bin) values('png','".$save."')";
   }else{
      $sql = "update images set image_bin='".$save."' where id='$id'";
   }
   
   if(mysql_query($sql)){
      header("Content-type: image/png");
      echo $unsave;
   }else{
      echo mysql_error();
      echo 'false';
   }
}
 
 
function show_image($posx=false, $posy=false, $id, $width = false, $height = false){
   if(isset($id)){
      if($posx == 'undefined'){
         $posx = 'undef';
         $posy = 'undef';
      }
   
      $sql = "select * from images where id = '$id'";
      $result = mysql_query($sql);
      $row = mysql_fetch_assoc($result);
      if($row){
         // Create a image canvas
         $img = imagecreatefromstring($row{'image_bin'});
         // Create the debugging string
         $pos = "ID=$id,X=$posx,Y=$posy";
         $pallet{'green'}     = imagecolorallocate($img, 0, 255, 0);
         imagestring($img, 3, 10, 2, 'Bestaande anamnese', $pallet{'green'});
         imagestring($img, 3, 10, 15, $pos, $pallet{'green'});
         header("Content-type: image/png");
         imagepng($img);
         //echo $row{'image_bin'};
      }else{
         $img = imagecreatetruecolor($width, $height);
         // Color Pallete
         $pallet{'transparent'}  = imagecolorallocate($img, 51, 80, 124);
         $pallet{'transparent'}  = ImageColorTransparent($img, $pallet{'transparant'});
         $pallet{'green'}     = imagecolorallocate($img, 0, 255, 0);
         // BG
         ImageColorTransparent($img, $pallet{'transparant'});
         imagestring($img, 3, 10, 2, "nieuwe anamnese w:$width h:$height", $pallet{'green'});
         header("Content-type: image/png");
         imagepng($img);
      }
   }else{
      $img = imagecreatetruecolor(401, 844);
      // Color Pallete
      $pallet{'transparent'}  = imagecolorallocate($img, 51, 80, 124);
      $pallet{'transparent'}  = ImageColorTransparent($img, $pallet{'transparant'});
      $pallet{'green'}     = imagecolorallocate($img, 0, 255, 0);
      // BG
      ImageColorTransparent($img, $pallet{'transparant'});
      imagestring($img, 3, 10, 2, 'nieuwe anamnese', $pallet{'green'});
      header("Content-type: image/png");
      imagepng($img);
   } 
}
?>
 
  1. <?php
  2. // Connect to the database
  3. if($dblink = mysql_connect('127.0.0.1','root','password')){
  4.    mysql_select_db('test', $dblink);
  5. }else{
  6.    exit;
  7. }
  8.  
  9.  
  10. // fetch all post/gets.
  11. if(isset($_POST{'action'}) || isset($_GET{'action'})){
  12.    if(isset($_POST{'action'})){
  13.       foreach($_POST as $key => $value){
  14.          $$key = $value;
  15.       }
  16.    }else{
  17.       foreach($_GET as $key => $value){
  18.          $$key = $value;
  19.       }
  20.    }
  21. }else{
  22.    exit;
  23. }
  24. // Determ what function to call //
  25. if(isset($action)){
  26.    if($action == 'add'){
  27.       if(isset($imgid)){
  28.          add_eclipse($posx, $posy, $imgid, $color, $size, $width, $height);
  29.       }else{
  30.          echo 'false';
  31.       }
  32.    }elseif($action == 'show'){
  33.       if(isset($imgid)){
  34.          show_image($posx, $posy, $imgid, $width, $height);
  35.       }else{
  36.          echo 'false';
  37.       }
  38.    }else{
  39.       echo 'false';
  40.    }
  41. }
  42.  
  43.  
  44. function add_eclipse($x, $y, $id, $color = false, $size = false, $width = false, $height = false){
  45.    if(isset($id)){
  46.       $sql = "select * from images where id = '$id'";
  47.       $result = mysql_query($sql);
  48.       $row = mysql_fetch_assoc($result);
  49.       if($row){
  50.          $img = imagecreatefromstring($row{'image_bin'});
  51.          $new = false;
  52.       }else{
  53.          // New image //
  54.          $img = imagecreatetruecolor($width, $height);
  55.          $new = true;
  56.       }
  57.    }
  58.    // Enable alpha blending (requires GD2.0)
  59.    imageantialias($img, true);
  60.    
  61.    // Color Pallete
  62.    $pallet{'black'}     = imagecolorallocate($img, 2, 2, 2);;
  63.    $pallet{'transparent'}  = imagecolorallocate($img, 51, 80, 124);
  64.    $pallet{'transparent'}  = ImageColorTransparent($img, $pallet{'transparant'});
  65.    $pallet{'red'}          = imagecolorallocate($img, 255, 0, 0);
  66.    $pallet{'green'}     = imagecolorallocate($img, 0, 255, 0);
  67.    $pallet{'blue'}      = imagecolorallocate($img, 50, 50, 200);
  68.    $pallet{'white'}     = imagecolorallocate($img, 255, 255, 255);
  69.    $pallet{'gray'}         = imagecolorallocate($img, 128, 128, 128);
  70.    
  71.    // BG
  72.    ImageColorTransparent($img, $pallet{'transparant'});
  73.    
  74.    // Add the eclipse
  75.    if(!isset($color)){ $color = 'red'; }
  76.    if(!isset($size)){ $size = 20;}
  77.    if($color != 'clean up'){
  78.       imagefilledellipse($img, $x, $y, $size+3, $size+3, $pallet{'black'});
  79.    }
  80.    imagefilledellipse($img, $x, $y, $size, $size, $pallet{$color});
  81.    //imagefilledellipse($img, $x-5, $y, 10, 10, $pallet{'transparent'});
  82.    
  83.    // Get the raw image using an output buffer (ob)
  84.    ob_start();
  85.    imagepng($img);
  86.    $unsave = ob_get_contents();
  87.    ob_end_clean();
  88.    
  89.    // Create a hex tring out of the raw stream
  90.    $save = addslashes($unsave);
  91.    
  92.    if($new){
  93.       $sql = "insert into images(image_ext, image_bin) values('png','".$save."')";
  94.    }else{
  95.       $sql = "update images set image_bin='".$save."' where id='$id'";
  96.    }
  97.    
  98.    if(mysql_query($sql)){
  99.       header("Content-type: image/png");
  100.       echo $unsave;
  101.    }else{
  102.       echo mysql_error();
  103.       echo 'false';
  104.    }
  105. }
  106.  
  107.  
  108. function show_image($posx=false, $posy=false, $id, $width = false, $height = false){
  109.    if(isset($id)){
  110.       if($posx == 'undefined'){
  111.          $posx = 'undef';
  112.          $posy = 'undef';
  113.       }
  114.    
  115.       $sql = "select * from images where id = '$id'";
  116.       $result = mysql_query($sql);
  117.       $row = mysql_fetch_assoc($result);
  118.       if($row){
  119.          // Create a image canvas
  120.          $img = imagecreatefromstring($row{'image_bin'});
  121.          // Create the debugging string
  122.          $pos = "ID=$id,X=$posx,Y=$posy";
  123.          $pallet{'green'}     = imagecolorallocate($img, 0, 255, 0);
  124.          imagestring($img, 3, 10, 2, 'Bestaande anamnese', $pallet{'green'});
  125.          imagestring($img, 3, 10, 15, $pos, $pallet{'green'});
  126.          header("Content-type: image/png");
  127.          imagepng($img);
  128.          //echo $row{'image_bin'};
  129.       }else{
  130.          $img = imagecreatetruecolor($width, $height);
  131.          // Color Pallete
  132.          $pallet{'transparent'}  = imagecolorallocate($img, 51, 80, 124);
  133.          $pallet{'transparent'}  = ImageColorTransparent($img, $pallet{'transparant'});
  134.          $pallet{'green'}     = imagecolorallocate($img, 0, 255, 0);
  135.          // BG
  136.          ImageColorTransparent($img, $pallet{'transparant'});
  137.          imagestring($img, 3, 10, 2, "nieuwe anamnese w:$width h:$height", $pallet{'green'});
  138.          header("Content-type: image/png");
  139.          imagepng($img);
  140.       }
  141.    }else{
  142.       $img = imagecreatetruecolor(401, 844);
  143.       // Color Pallete
  144.       $pallet{'transparent'}  = imagecolorallocate($img, 51, 80, 124);
  145.       $pallet{'transparent'}  = ImageColorTransparent($img, $pallet{'transparant'});
  146.       $pallet{'green'}     = imagecolorallocate($img, 0, 255, 0);
  147.       // BG
  148.       ImageColorTransparent($img, $pallet{'transparant'});
  149.       imagestring($img, 3, 10, 2, 'nieuwe anamnese', $pallet{'green'});
  150.       header("Content-type: image/png");
  151.       imagepng($img);
  152.    } 
  153. }
  154. ?>
  155.  
1 + 1 = 10 + 1 = 11 + 11 = 110
  • WritingBadCode
  • Graduate
  • Graduate
  • Avatar de Usuario
  • Registrado: Abr 28, 2011
  • Mensajes: 214
  • Loc: Sweden
  • Status: Offline

Nota Junio 8th, 2011, 10:03 am

Quote:
/ / Thx para WritingBadCode en Ozzu.com


:lol:LMAO necesidad de hacer pero no gracias.
  • may
  • Proficient
  • Proficient
  • Avatar de Usuario
  • Registrado: Dic 25, 2004
  • Mensajes: 328
  • Loc: Holland [NL]
  • Status: Offline

Nota Junio 8th, 2011, 10:27 am

¿LOL? ¿por qué no, invirtió parte de su tiempo en ella, aprendí un nuevo truco para que algún crédito está justificada:)
1 + 1 = 10 + 1 = 11 + 11 = 110
  • WritingBadCode
  • Graduate
  • Graduate
  • Avatar de Usuario
  • Registrado: Abr 28, 2011
  • Mensajes: 214
  • Loc: Sweden
  • Status: Offline

Nota Junio 8th, 2011, 2:06 pm

may escribió:
¿LOL? ¿por qué no, invirtió parte de su tiempo en ella, aprendí un nuevo truco para que algún crédito está justificada:)


Dije que no era necesario ya que no aportó mucho OMI, realmente copiar código pegado de uno de mis anteriores codificaciones. :) Pero el crédito es por supuesto Bienvenido!

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 9 mensajes
  • Usuarios navegando por este Foro: webspace y 125 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC