elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Tutorial básico de Quickjs


  Mostrar Temas
Páginas: 1 2 3 [4] 5 6 7 8
31  Media / Diseño Gráfico / Diseño "Tom!" [P2P] en: 8 Abril 2010, 04:22 am
aclaro unas cosas, a p2p me refiero a pixel to pixel xD, otra cosa, nakpanzer, este tom es mio!!! jejej

estaba al dope, pensando por que fondo cambiar mi actual en el wlm 9, fue asi que puse unas musicas electronicas, y me deje llevar por el windows media player! jejej, que dicen? ahora que l veo bien, hay unos cuadrados movidos, pero ni se ven! jaja, y ni da cambiarlo :P



como siempre dije, para mi el negro y el violeta azulado, van como piña colada!
32  Media / Diseño Gráfico / ¿Cómo extraer tipografia de pdf? en: 3 Abril 2010, 18:51 pm
bueno, tengo una tipografia de un pdf queme encanto, se llama comalle, ya la deben conocer. pasa que los unicos lugares que la encuentro para descargar son pagos ¬¬ y no encuentro uno gratis :P que vivada la mia na? ahora, como puedo hacer para extraer esa tipografia ya que es logico que esta incrustada porque con el foxit editor puedo escribir texto con esa tipografia.

osea, si quiero escribo el texto ahi y le saco una foto a la pantalla y la uso asi, pero la quiero tener :P

en si, hay algun programa que realice esta tarea? o ya el mismo foxit la realiza? no se usarlo muy bien, ademas, mi foxit editor esta en ingles :-\ un saludo grande.
33  Media / Diseño Gráfico / 15 tips al elegir un buen tipo de texto en: 27 Marzo 2010, 04:48 am
encontre una pagina bastante interesante, en si es un blog. en el mismo encontre una forma completamente distinta de ver a una simple letra. al momento de seleciconar nuestra tipografia, hay que tener unos puntos de vista para la correcta visualizacion del lector, para ser mas exacto, 15 puntos.




1. La forma.
Anteriormente, en el juego a ser Garamond, revisamos el concepto de ductus. El ductus representa lo más importante de la letra, su esqueleto. Para una buena legibilidad en el tipo de texto, necesitamos tipografías con un ductus carente de complejidades innecesarias, y que sea lo más simple posible, para que el sobrediseño no sea un elemento distractor. Asi fijamos la atención en lo que estamos leyendo, y no en la forma de la letra.


2. El peso
Cuando hablamos del peso de la letra hablamos de una coherente relación entre el negro que emite la forma, y la luz que entra entre las letras (blanco de página o contraforma). Muchas veces se suele escribir con tipografías light que generan una página demasiado clara. Claro, suele verse muy cool, pero dependiendo de la extensión del texto, suele cansar muy luego. Imagínense a un estudiante universitario estudiando en el bus de noche mientras viaja a la ciudad donde tiene que dar la prueba. Una tipografía demasiado liviana, con una mala luz. Resultado: media página leída y el resto del viaje durmiendo.


3. El Contraste
El contraste se refiere básicamente a la diferencia de grosor entre las verticales y las horizontales. Explicado mejor, la diferencia entre los trazos más gruesos con los más delgados. No quiero dar fórmulas como llegar a un equilibrio adecuado; pero un error sería crear un contraste tan marcado, que se produzca el efecto Bodoni. Yo creo que todos alguna vez nos tocó estudiar de las fotocopias, de las fotocopias, de las fotocopias, de las fotocopias de un paper que nos entregaba el profesor. O sea, sólo se leían las verticales. Una buena tipografía debería resistir varias generaciones de copiado, debe ser robusta sin ser grosera.


4. El eje.
Un comentario no atinado y me echo encima cientos de años de historia tipográfica. Muchos conservadores no van a estar de acuerdo conmigo, pero el eje de la tipografía suele ser ligeramente decisivo para una mejor lectura. Cuando presentas tipografías con astas 100% ortogonales, que van marcando el ritmo de una lectura con rectas verticales, no puedes distraerla con curvas que buscan un sentido opuesto. Si hilamos fino, estaríamos trabajando con 2 lenguajes, uno para las curvas, y otro para las rectas. Resultado, el desordenamiento de la frase.



5. Altura x
La altura x mostrará de qué tamaño es el cuerpo legible la letra. Ascendentes y descendentes demasiado largas conseguirán un acortamiento de la línea de cuerpo de texto, que insisto, es donde se concentra la mayor cantidad de la información legible. Es esta diferencia lo que produce por ejemplo que Mrs. Eaves se vea mucho más chica que Times New Roman. En el ejemplo podemos ver caricaturizada este punto.



6. Altura de las mayúsculas
Creo que suele quedar bastante claro con el ejemplo. Antiguamente las mayúsculas se diseñaban del mismo porte de las ascendentes, o en ocasiones más grandes aún. El efecto que provoca una palabra escrita en mayúsculas (como MINEDUC) dentro de la frase suele ser un atentado a la lectura en línea del texto.
Cuando escribo la palabra “Garamond” con Garamond siento, siento como si la “G” fuera un dinosaurio y la “a” fuera su presa.



7. Terminaciones
Cuando ocupamos una tipografía para escribir un texto, muchas veces tenemos que verla en grande, como en avisos publicitarios, etc. Ya que se usa como tipografía corporativa. El simple hecho que esté mal dibujada es más que una buena razón para descartarla. La gran mayoría de las tipografías tienen horribles terminaciones, y eso los diseñadores no lo deberíamos tolerar.



8. Gris de texto, o gris de textura.
Hilando ya un poco a niveles más macro, nos encontramos con este curioso punto. Cuando escribimos un texto, y vemos la textura que produce el bloque (conjunto de letras juntas), esta debe estar homogénea. Si hay letras que resaltan porque están más gruesas que otras, es porque el tipo de texto está mal diseñado. Muchos tipógrafos exageran engrosando las verticales de las mayúsculas con respecto a las de las minúsculas, creando un desagradable efecto en el gris de la textura del texto.



9. Apertura de la contraforma
Muchas tipografías consideradas de texto, pecan de cerrar o abrir demasiado sus contraformas. En el caso de que se cierren demasiado, pueden generar errores de legibilidad como confundir una “c” con una “o”. En el caso de que estén demasiado abiertas (como frutiger), la contraforma interna de la letra se suma a la contraforma externa de la letra, produciendo una cantidad de blanco muy desagradable a la vista.




10. El efecto pescado
En un post anterior hablé sobre el desagradable resultado producido por el efecto pescado. Cuando se el tipógrafo diseña sólo las formas suele caer en este tipo de errores. Un buen tipógrafo de texto, diseña la forma, la contraforma interna y externa, y su ductus. (Mayor información leer el post del efecto pescado).




11. Contraforma externa
Hay detalles que hacen a una tipografía muy legible, y eso es la contraforma externa. No se imaginan cuanto cambia leer una tipografía con el sacadito de arriba de la “n” bien marcado, o la diferencia entre la “rn” y la “m”. Hay tipografías que ni siquiera tienen ese sacadito. Entonces no son de texto, punto.




12. Contraforma interna
Una costumbre muy recurrente de los diseñadores de fuentes es hacer el ojo pequeño de la “a” y “e” demasiado pequeños. Algunos se excusan citando a la historia, otros lo hacen por estética. Lo único claro es que este pequeño ojo tiende a desaparecer, y la contraforma abierta tiende a agrandarse demasiado. Como la “a” y la “e” son las letras más usadas en muchos idiomas, el desagradable efecto se potencia aún más.




13. Comprobar que el set esté completo
¿Cuántas veces se han encontrado con este signo, cuando ya tienen todo diseñado?. Debe ser una de las sensaciones más desastrosas que existen, ya que hay que empezar todo de nuevo. Muchos tipógrafos NO diseñan la “ñ”, los acentos, los signos de interrogación, los punto y coma, y los signos de corte de palabra o los números. Es mejor revisar bien la fuente antes de lamentar.




14. La familia
Comprobar que la familia sea abundante y que pueda resolver los problemas de diseño que se puedan presentar en un párrafo es lo ideal. Difícilmente se puede diseñar con una tipografía que solo tenga la versión regular. Hoy en día se necesita destacar mediante itálicas, o usar las negritas en los subtítulos o cambios de tema. Otra cosa que suele ser muy importante, es que la itálica sea igual de legible que la regular, y que no esté llena de figuritas rebuscadas.




15. El interletraje
Existen tipografías que sencillamente no se les hizo interletraje, y funcionan muy mal. Un buen diseñador corrige los interletrajes que no le parecen correctos, pero es demasiado tedioso ir corrigiéndolos todos. Hay programas como InDesign que hacen ese trabajo automáticamente, pero nunca queda lo bien que lo hace el mismo diseñador tipográfico.


Fuente: letritas.blogspot.com
34  Seguridad Informática / Nivel Web / Contenido de iframe, psoible? en: 17 Marzo 2010, 02:01 am
resulta que se me ocurrio el otro dia de conseguir el codigofuente de una pagina de un usuario logeado. osea, como un file_get_contents en php pero en javascript para que se ejecute en el cliente. ahora pasa. por lo que estuve probando es dificil de conseguir el contenido de un iframe, pero no oslo eso. las preguntas. es posible conseguir el contenido de un iframe? si eso se puede, cuando lo consigo, el navegador me lo muestra como si no estuviera logeado?
35  Media / Diseño Gráfico / Fotos macro con una lupa :-| en: 16 Marzo 2010, 00:11 am
bue, antes de irme al cole encontre una lupa que tenia ahi tirada, no tiene mucho aumento. me pregunte si podria aumentar un tornillo de gabinete, y lo que hizo en realidad no fue aumentarlo, sino enfocarlo :D mpero la verdad devuelve unos resultados muy buenos :

el tornillo:


sin el enfoque de la lupa se ve asi:


ahora, la lupa que use es:


otras fotos:

un pentium de un lado:


del otro:


un cooler chiquito con un disipador tambien chico :P :


la plaqueta de un disco:


sin la lupa:


dos teclas de mi teclado ;D:


el tornillo con respecto al teclado (sin lupa):


una boludez que salio al momento:


y mi mano:




bueno, esto en realidad de macro tiene no mucho :P pero para personas como yo que no pueden acceder a una camara con un buen enfoque y un buen lente, esta es nuestra solucion por lo menos hasta que veamos que llueva plata :P
a ver que les sale a ustedes:...
36  Foros Generales / Sugerencias y dudas sobre el Foro / q paso con mi firma :S? en: 14 Marzo 2010, 04:36 am
bue eso, siempre a mi me dice mis datos, pero al parecer ahora la imagen es de algo de r.i.elhacker.net/cache=web

hice algo mal con la firma o algo asii?
37  Foros Generales / Sugerencias y dudas sobre el Foro / Modificar perfil! No puedo! en: 2 Marzo 2010, 20:58 pm
Bueno, hoy se me dio por querer ponerme oculto y dejar con la intriga a los otros usaurios de saber quien era xD! que tanto fantasmita si smf te trae la opcion jhajjajaj, pasa que cuando pongo la contraseña, me dice que no es valida!! y si es valida ¬¬
38  Programación / PHP / CastGD Functions! [Libreria GD] en: 2 Marzo 2010, 20:20 pm
bueno, me faltan las funciones para modificar el brillo, contraste y color xD pero no me aguante mas!! jajjaj en este post voy a ir subiendo (si ustedes tienen porfavor subanlas y modifico el titulo) funciones para usar con la libreria gd.

por ahora las que hice fueron para:
  • Para el correcto funcionamiento de estas heramientas es necesario usar una funcion que limita el valor de rgb. osea, si es mayor a 255, que sea 255, y si es menor a 0, que sea 0.
  • Redimensionar imagenes mas facilmente
  • Añadir ruido.
  • Crear un fondo degradado con dos colores. Variadas formas.
  • Desaturar la imagen.
  • Alternar los valores RGB.
  • Modificar la saturacion.
  • Efecto negativo.


son demasiado simplonas, tienen errores de incopatibilidad aveces jajaj.



Código
  1. function limit($flotaValueRGB) {
  2. return ($flotaValueRGB > 255) ? 255 : (($flotaValueRGB < 0) ? 0 : $flotaValueRGB);
  3. }



Código
  1. function imageresize($flotaImage, $flotaX, $flotaY) {
  2. $new_image = imagecreatetruecolor($flotaX, $flotaY);
  3. imagecopyresampled($new_image, $flotaImage, 0, 0, 0, 0, imagesx($new_image), imagesy($new_image), imagesx($flotaImage), imagesx($flotaImage));
  4. return $new_image;
  5. }



Código
  1. function imageaddnoise($flotaImage, $flotaAmount = 50, $flotaAlpha = 50) {
  2. $xImage = imagesx($flotaImage);
  3. $yImage = imagesy($flotaImage);
  4. for($y=0;$y<$yImage;$y++) {
  5. for($x=0;$x<$xImage;$x++) {
  6. $rgb = imagecolorat($flotaImage, $x, $y);
  7. $r = ($rgb >> 16) & 0xFF;
  8. $g = ($rgb >> 8) & 0xFF;
  9. $b = $rgb & 0xFF;
  10. $amount = mt_rand(-$flotaAmount, $flotaAmount);
  11. $color = imagecolorallocatealpha($flotaImage,  ($r + $amount > 255) ? 255 : $r + $amount,  ($g + $amount > 255) ? 255 : $g + $amount,  ($b + $amount > 255) ? 255 : $r + $amount, $flotaAlpha);
  12. imagesetpixel($flotaImage, $x, $y, $color);
  13. }
  14. }
  15. }



Código
  1. function imagefillgradient($flotaImage, $flotaGradientMode  = 1, $flotaColor1, $flotaColor2, $flotaInvertColor = false) {
  2. if($flotaInvertColor){ $tempColor = $flotaColor2; $flotaColor2 = $flotaColor1; $flotaColor1 = $tempColor; }
  3. $flotaColor1 = array(
  4. 'r' => ($flotaColor1 >> 16) & 0xFF,
  5. 'g' => ($flotaColor1 >> 8) & 0xFF,
  6. 'b' => $flotaColor1 & 0xFF
  7. );
  8. $flotaColor2 = array(
  9. 'r' => ($flotaColor2 >> 16) & 0xFF,
  10. 'g' => ($flotaColor2 >> 8) & 0xFF,
  11. 'b' => $flotaColor2 & 0xFF
  12. );
  13. $image_x = imagesx($flotaImage);
  14. $image_y = imagesy($flotaImage);
  15. $center_x = $image_x / 2;
  16. $center_y = $image_y / 2;
  17. $add_color = array(
  18. "r" => ($flotaColor1['r'] - $flotaColor2['r']) / $image_x,
  19. "g" => ($flotaColor1['g'] - $flotaColor2['g']) / $image_x,
  20. "b" => ($flotaColor1['b'] - $flotaColor2['b']) / $image_x
  21. );
  22. $x = 0;
  23. $y = 0;
  24. $r = $flotaColor1['r'];
  25. $g = $flotaColor1['g'];
  26. $b = $flotaColor1['b'];
  27. $bgColor = imagecolorallocate($flotaImage, $r, $g, $b);
  28. imagefill($flotaImage, 0, 0, $bgColor);
  29. if($flotaGradientMode!=1 && $flotaGradientMode!=2){
  30. $add_color = array(
  31. "r" => ($flotaColor1['r'] - $flotaColor2['r']) / $center_x,
  32. "g" => ($flotaColor1['g'] - $flotaColor2['g']) / $center_x,
  33. "b" => ($flotaColor1['b'] - $flotaColor2['b']) / $center_x
  34. );
  35. for($i=0;$i<$center_x;$i++) {
  36. $color = imagecolorallocate($flotaImage, $r, $g, $b);
  37. switch($flotaGradientMode) {
  38. case 3:
  39. imagefilledrectangle($flotaImage, $x, $y, $image_x - $x, $image_y - $y, $color);
  40. break;
  41. case 4:
  42. imagefilledellipse($flotaImage, $center_x, $center_x, $image_x - $x, $image_y - $y, $color);
  43. break;
  44. default:
  45. die("Gradiant mode not valid!");
  46. break;
  47. }
  48. $x++;
  49. $y++;
  50. $r += -$add_color['r'];
  51. $g += -$add_color['g'];
  52. $b += -$add_color['b'];
  53. }
  54. } else {
  55. $add_color = array(
  56. "r" => ($flotaColor1['r'] - $flotaColor2['r']) / $image_x,
  57. "g" => ($flotaColor1['g'] - $flotaColor2['g']) / $image_x,
  58. "b" => ($flotaColor1['b'] - $flotaColor2['b']) / $image_x
  59. );
  60. switch($flotaGradientMode) {
  61. case 1:
  62. for($i=0;$i<$image_x;$i++) {
  63. $color = imagecolorallocate($flotaImage, $r, $g, $b);
  64. imageline($flotaImage, $x, 0, $x, $image_y, $color);
  65. $r += -$add_color['r'];
  66. $g += -$add_color['g'];
  67. $b += -$add_color['b'];
  68. $x++;
  69. }
  70. break;
  71. case 2:
  72. for($i=0;$i<$image_y;$i++) {
  73. $color = imagecolorallocate($flotaImage, $r, $g, $b);
  74. imageline($flotaImage, 0, $y, $image_x, $y, $color);
  75. $y++;
  76. $r += -$add_color['r'];
  77. $g += -$add_color['g'];
  78. $b += -$add_color['b'];
  79. }
  80. break;
  81. default:
  82. return false;
  83. }
  84. }
  85. }



Código
  1. function imagegrayscale($flotaImage) {
  2. $xImage = imagesx($flotaImage);
  3. $yImage = imagesy($flotaImage);
  4. for($y=0;$y<$yImage;$y++) {
  5. for($x=0;$x<$xImage;$x++) {
  6. $rgb = imagecolorat($flotaImage, $x, $y);
  7. $r = ($rgb >> 16) & 0xFF;
  8. $g = ($rgb >> 8) & 0xFF;
  9. $b = $rgb & 0xFF;
  10. $rgb = (($r+$g+$b) / 3) + $flotaAmount;
  11. $color = imagecolorallocate($flotaImage, $rgb, $rgb, $rgb);
  12. imagesetpixel($flotaImage, $x, $y, $color);
  13. }
  14. }
  15. }



Código
  1. function imagealternatergb($flotaImage, $flotaMode) {
  2. $xImage = imagesx($flotaImage);
  3. $yImage = imagesy($flotaImage);
  4. for($y=0;$y<$yImage;$y++) {
  5. for($x=0;$x<$xImage;$x++) {
  6. $rgb = imagecolorat($flotaImage, $x, $y);
  7. $r = ($rgb >> 16) & 0xFF;
  8. $g = ($rgb >> 8) & 0xFF;
  9. $b = $rgb & 0xFF;
  10. switch ($flotaMode) {
  11. case bgr:
  12. $color = imagecolorallocate($flotaImage, $b, $g, $r);
  13. break;
  14. case brg:
  15. $color = imagecolorallocate($flotaImage, $b, $r, $g);
  16. break;
  17. case grb:
  18. $color = imagecolorallocate($flotaImage, $g, $r, $b);
  19. break;
  20. case gbr:
  21. $color = imagecolorallocate($flotaImage, $g, $b, $r);
  22. break;
  23. case rbg:
  24. $color = imagecolorallocate($flotaImage, $r, $b, $g);
  25. break;
  26. default:
  27. $color = imagecolorallocate($flotaImage, $r, $g, $b);
  28. break;
  29. }
  30. imagesetpixel($flotaImage, $x, $y, $color);
  31. }
  32. }
  33. }



Código
  1. function imagecolorsaturation($flotaImage, $flotaAmount) {
  2. $flotaAmount = ($flotaAmount > 100) ? 100 : ($flotaAmount < 0) ? 0 : $flotaAmount;
  3. $xImage = imagesx($flotaImage);
  4. $yImage = imagesy($flotaImage);
  5. for($y=0;$y<$yImage;$y++) {
  6. for($x=0;$x<$xImage;$x++) {
  7. $rgb = imagecolorat($flotaImage, $x, $y);
  8. $colors = array(
  9. 'r' => ($rgb >> 16) & 0xFF,
  10. 'g' => ($rgb >> 8) & 0xFF,
  11. 'b' => $rgb & 0xFF
  12. );
  13. $sorted = $colors;
  14. asort($sorted);
  15. $largest_value = array_pop($sorted);
  16. foreach($sorted as $nick => $rgb) {
  17. if($rgb!=$largest_value) {
  18. $percent = round($flotaAmount * ($largest_value - $rgb) / 100);
  19. $colors[$nick] = $rgb + $percent;
  20. $colors[$nick] = ($colors[$nick] > $largest_value) ? $largest_value : $colors[$nick];
  21. }
  22. }
  23. $color = imagecolorallocate($flotaImage, $colors['r'], $colors['g'], $colors['b']);
  24. imagesetpixel($flotaImage, $x, $y, $color);
  25. }
  26. }
  27. }



Código
  1. function imagenegativeefect($flotaImage) {
  2. $xImage = imagesx($flotaImage);
  3. $yImage = imagesy($flotaImage);
  4. for($y=0;$y<$yImage;$y++) {
  5. for($x=0;$x<$xImage;$x++) {
  6. $rgb = imagecolorat($flotaImage, $x, $y);
  7. $r = ($rgb >> 16) & 0xFF;
  8. $g = ($rgb >> 8) & 0xFF;
  9. $b = $rgb & 0xFF;
  10. $color = imagecolorallocate($flotaImage, 255 - $r, 255 - $g, 255 - $b);
  11. imagesetpixel($flotaImage, $x, $y, $color);
  12. }
  13. }
  14. }



Modo de uso:

Como imagen de prueba voy a usar :



pero la voy a redimensionar con mi funcion, para no molestarlos a ustedes y que no este tan grande, lo hago tan simple como :
Código
  1. $im = imageresize($im, 305, 400);

como ven, los valores que ingreso son exactamente la mitad.

para añadir ruido se usa asi:

Código
  1. <?php
  2. require("castgd.php");
  3. header("Content-type: image/jpeg");
  4. $im = imagecreatefromjpeg("http://www.galeriade.com/javidelope/data/media/2/Rosa_Rosa.jpg");
  5. $im = imageresize($im, 305, 400);
  6. $cantidad = 50;   //pueden no ingresarse los valores, pero se usan los por defecto
  7. $transparencia = 50;
  8. imageaddnoise($im, $cantidad, $transparencia);
  9. imagejpeg($im);
  10. ?>

y el resultado es este:



al agregar un fondo degradado, esta fucion se usa igual que "imagefill", osea, no se aplica en una imagen externa.osea, se va a aplicar, pero puede haber errores no deseados...

Código
  1. <?php
  2. require("castgd.php");
  3. header("Content-type: image/jpeg");
  4. $im = imagecreatetruecolor(250,250);
  5. $rojo = imagecolorallocate($im, 255,0,0);
  6. $naranja = imagecolorallocate($im, 255, 128, 0);
  7. imagefillgradient($im, 1, $rojo, $naranja);
  8. imagejpeg($im);
  9. ?>

el resultado del modo 1 sin invertir los colres es este:



1 invertido



modo 2 sin invertir



modo 3 sin invertir



modo 3 con invertir



modo 4 sin invertir





la mas simple y facil fue la de escala de grises:

Código
  1. <?php
  2. require("castgd.php");
  3. header("Content-type: image/jpeg");
  4. $im = imagecreatefromjpeg("http://www.galeriade.com/javidelope/data/media/2/Rosa_Rosa.jpg");
  5. $im = imageresize($im, 305, 400);
  6. $rojo = imagecolorallocate($im, 255,0,0);
  7. $naranja = imagecolorallocate($im, 255, 128, 0);
  8. imagegrayscale($im);
  9. imagejpeg($im);
  10. ?>

y el resultado es:



pero tambien se puede no solo "desaturar" automatico, sino sacar el color de apoco...

Código
  1. <?php
  2. require("castgd.php");
  3. header("Content-type: image/jpeg");
  4. $im = imagecreatefromjpeg("http://www.galeriade.com/javidelope/data/media/2/Rosa_Rosa.jpg");
  5. $im = imageresize($im, 305, 400);
  6. imagecolorsaturation($im, 50);
  7. imagejpeg($im);
  8. ?>

con cantidad 50:



y por ultimo hasta hoy, negativo:

Código
  1. <?php
  2. require("castgd.php");
  3. header("Content-type: image/jpeg");
  4. $im = imagecreatefromjpeg("http://www.galeriade.com/javidelope/data/media/2/Rosa_Rosa.jpg");
  5. $im = imageresize($im, 305, 400);
  6. imagenegativeefect($im);
  7. imagejpeg($im);
  8. ?>

y resulta:




les dejo una mezcla copada xD:

39  Programación / PHP / ¿Como usar la libreria GD? [PHP] en: 1 Marzo 2010, 04:42 am
Hola, con esta guía voy a tratar de explicarles como trabajar con las funciones más utilizadas de la librería GD para obtener unas atractivas imagenes dinamicas.

Para entender perfectamente esta librería, les viene muy bien leer los siguientes apuntes (si no lo tienen muy claro):


También, estas funciones otorgan las propiedades de la imagen:

Código
  1. imagesx($im); //devuelve el ancho de la imagen
  2. imagesy($im); //devuelve el alto de la imagen
  3. getimagesize($direccion);

La función getimagesize devuelve un array con los datos de la imagen. Por ejemplo, aplicándolo a la imagen http://blog.nuestroclima.com/wp-content/uploads/2007/08/imagen_satelital_hires.jpg devuelve:
Código:
Array
(
    [0] => 4096       Ancho
    [1] => 4096       Altura
    [2] => 2
    [3] => width="4096" height="4096"
    [bits] => 8
    [channels] => 3
    [mime] => image/jpeg
)
Para descargar fuentes, aca en el foro hay una buena recopilación.


Perfecto, empecemos. Para crear una imagen se utilizan estos siguientes:

Para crear desde un archivo sea en tu servidor o en uno externo:
Código
  1. $im = imagecreatefrompng("dirección"); //para imágenes png
  2. $im = imagecreatefromgif("dirección"); //para imagenes gif
  3. $im = imagecreatefromjpeg("dirección"); //para imagenes jpg y jpeg
Si se carga una imagen con transparencias, para conservarlas, hace falta agregar estas dos lineas despues de crearla.
Código
  1. imagealphablending($im, true);
  2. imagesavealpha($im, true);
  3.  

Ahora, para crear una imagen de cero basta con las funciones:

Código
  1. $im = imagecreate($ancho, $alto);
  2. //para imagenes con una paleta de colores,
  3. //osea, no tan buena calidad del color.
  4. //
  5. //
  6. $im = imagecreatetruecolor($ancho, $alto);
  7. //para imagenes con un color real, esta es la más usada...
Bueno, ya utilizando estas funciones habremos creado la imagen. No se olviden que siempre se tiene que asignar el valor reslutante de esta fuincion a una nueva variable (no hace falta que sea nueva ¬¬ jajaj).



Datos a tener en cuenta:


Antes de seguir, tiene que quedarles algo claro fundamental mente, y es la visualizacion de la imagen y la DESTRUCCION de la misma. Por qué destruir? Porque sino queda guardada la imagen en la memoria RAM del servidor y eso no es muy agradable. Entonces, para visualizarla basta con agregar el header correspondiente para el tipo:
Código
  1. header("Content-type: image/".$imagenextension.);
Y para imprimir la imagen se usa el comando "image" seguido del tipo de imagen. por ejemplo para una imagen png:
Código
  1. imagepng($im);
Seguido de esta función le va:
Código



Contenido de las imagenes:


Ahora que tenemos la imagen, vamos a darle el contenido. Para ellos se puede dibujar lineas, puntos, rectángulos (solo el borde) o rectángulos rellenos (no de dulce de leche!! ;D), así como los rectángulos, elipses y polígonos indicando cantidad de puntos y posición de los mismos. También se pueden crear colores de toda la gamma RGB con o sin transparencia. Se puede agregar texto de fuentes por defecto de la librería o fuentes del tipo "True Type", "Free  type" y "PostScript" importándolas de un enlace externo. Primeramente vamos por partes y comenzamos por el principio, los colores ;D.


Colores:


Para las creaciones de colores tenemos dos funciones y un verso sin esfuerzo.
Código
  1. $nombreDelColor = imagecolorallocate($r, $g, $b);
  2. $nombreDelColor = imagecolorallocatealpha($r, $g, $b, $valorAlfa);



Por ejemplo podemos crear el color rojo, el amarillo y el violeta:
Código
  1. $rojo = imagecolorallocate(255, 0, 0);
  2. $amarillo = imagecolorallocate(255, 255, 0);
  3. $violeta = imagecolorallocate(0, 255, 255);
Y si se quiere agregar opacidad a uno de estos colores:
Código
  1. $azul = imagecolorallocate(0, 0, 255, 50); //ahí tenemos un 50% de opacidad...



Además de crear colores, se puede tomar el color de un píxel determinado de una imagen determinada con la función imagecolorat();, su sintaxis es
Código
  1. imagecolorat($im, $x, $y);
Código
  1. //por ejemplo en la imagen utilizada es una rápida que encontré por internet de un "mundo"
  2. $im = imagecreatefromjpeg("http://www.hyparion.com/web/diccionari/dics/astronomia/imatges/tierra.jpg");
  3. $color = imagecolorat($im, 100, 100);
Ahora, acá se nos complica un poco. La variable "color" recibe el valor de 9146518 y decimos: "Qué carajo!?". Bueno, para que ese es un valor que para nosotros trabajarlo como rgba (Red Green Blue Alpha, osea, rojo verde azul y transparencia). Para "convertirlo" a ese (rgba) o hexadecimal tenemos las posibilidades de:
Código
  1. //esto se cumple una vez realizado el proceso anterior...
  2. //automático para rgba, el más fácil y practico de todos!
  3. $color = imagecolorsforindex($im, $color);
  4. /*este devuelve un array con los valores:
  5. Array
  6. (
  7.     [red] => 255
  8.     [green] => 0
  9.     [blue] => 0
  10.     [alpha] => 0
  11. )
  12. */
  13. //
  14. //
  15. //este es simple, se le da un formato y devuelve el valor del color en hexadecimal.
  16. $hex = sprintf("%06X", $color); //devuelve FF0000
  17. //
  18. //
  19. //manualmente para rgba, el más complicado de entender y es lo
  20. //mismo que la función imagecolorsforindex() pero igualmente se los explico...
  21. $colores = array();
  22. $colores['red'] = ($color >> 16) & 0xFF;
  23. $colores['green'] = ($color >> 8) & 0xFF;
  24. $colores['blue'] = $color & 0xFF;
  25. $colores['alpha'] = ($color >> 24) & 0xFF;
  26.  
Ahora paso a explicar esas cosas raras que nos da php.net sin decirnos que es ¬¬.
Los caracteres ">>" cumplen el rol de operador y recibe el nombre de operador bitwise. Lo que hace este operador es correr determinadas veces la posición del valor indicado en binario. Osea, la variable $color toma un píxel de color rojo puro (a puro me refiero a rgb(255,0,0)) el valor retornado va a ser igual a: 16711680 :o mientras que el valor en rgb es 255. Entonces, diciéndole que me corra 16 lugares los bits de 16711680 me va a dar como resultado un numero decimal igual a 255. Ahora, si no colocamos el 0xFF en el valor del rojo, nos damos cuenta que no hay diferencia, pero cuando tratamos valores rgba, el 0xFF delimita la cantidad de bits para cada valor. Es como decir, para cada valor (rgb) corresponden 8 bits (por eso siempre los corremos para que queden los 8 primeros bits) en cambio, para el valor de alpha le corresponden solo 7 bits, pero como lo corremos 24 lugares quedando solo 7 bits (es como un substring a una cadena de 7 caracteres, aunque le indiques 8, siempre devuelve 7). Se entendió esto? Bueno, sigamos que apenas vamos por los colores!!!

Fondo:

Una cosa muy molesta de la libreria gd, es el color de fondo que por defecto lo pone negro. para eso esta la funcion imagefill() que rellena la imagen desde donde se le indique con el color establecido. Su sintaxis es:
Código
  1. imagefill($im, $x, $y, $color)
Para que rellene por completo la imagen, los valores de $x,$y son igual a 0,0.



Trazados:

Puntos:


Ahora que tenemos los colores, vamos a dibujar. Primero vamos a empezar por un punto, que aunque sea de solo un píxel, es muy útil como para un ejemplo, un captcha. No hace falta demásiada explicación, dibuja un píxel en x,y del color $color
Código
  1. imagesetpixel($im, $x, $y, $color); //$color es igual a el resultado de la función imagecolorallocate()

Líneas:

Para poder dibujar una linea, se indica el x,y de inicio y el x,y de final:
Código
  1. imageline($im, $xInicio, $yInicio, $xFin, $yFin, $color);
Por ejemplo si $im es una imagen de color real de 100x100 y con fondo blanco (ya va a llegar esa parte) podría realizar esto:



Con esto:
Código
  1. $im = imagecreatetruecolor(100, 100);
  2. $color = imagecolorallocate($im, 0,0,0);
  3. imageline($im, 10, 35, 76, 85, $color);



Poligonos, rectángulos y elipses:[/b]

Una vez entendido esto! nos vamos con los polígonos, primero lo primero! el rectángulo
para dibujar un rectángulo se puede dibujar solo su contorno (el borde va a medir 1px) o el rectángulo relleno de color (filled).
Sinceramente la sintaxis es idéntica a la de imageline además, son iguales entre si, solo el borde, o relleno.
Código
  1. imagefilledrectangle($im, $xInicio, $yInicio, $xFin, $yFin, $color);
  2. imagerectangle($im, $xInicio, $yInicio, $xFin, $yFin, $color);
Para el elipse, circulo u ovalo (cambia según los valores dados), al igual que el rectángulo y el polígono que lo vamos a ver posteriormente, se puede solo el borde o relleno. su sintaxis es:
Código
  1. imageellipse($im, $centroX, $centroY, $ancho, $altura, $color);
  2. imagefilledellipse($im, $centroX, $centroY, $ancho, $altura, $color);
Donde $centroX,Y son la posición del punto medio del elipse.
Bueno, para el polígono, se complica otra vez un poco. En la sintaxis del polígono:
Código
  1. imagepolygon($im, $puntosArray, $cantidadPuntos, $color);
  2. imagefilledpolygon($im, $puntosArray, $cantidadPuntos, $color);
La variable $puntosArray es un array, porque no le puse ese nombre al pedo xD jajaja. La estructura del array tiene que ser, cada dos valores corresponden a los valores x,y de un punto, osea:
Código
  1. $puntosArray= array (
  2. /*
  3.  x  y  */
  4. 10, 10,  //punto 1
  5. 15, 26,  //punto 2
  6. 50, 36,  //punto 3
  7. 68, 10   //punto 4, este ultimo numero va sin coma al final!!
  8. );
En realidad no es tan complicado :P. y para $cantidadPuntos, lógicamente se indica la cantidad de los puntos. pero para no contarlos, basta con un:
Código
  1. $cantidadPuntos = count($puntosArray) / 2;
Y listo. Ahora, el resultado de esta función es una imagen parecida a esta:






Agregar textos:


Ya terminamos con las formás y esas cosas. Ahora vamos por el texto. Para escribir en una imagen se puede utilizar las fuentes que trae por defecto la librería gd o fuentes del "True type", "Free type" o "PostScript Type1". La sintaxis para las postscript se ponen un poco jodidas, además, no conozco las fuentes del tipo postscript. Así que paso a explicar principalmente el imagestring(), además de escribir horizontalmente, también esta la función imagestringup() que escribe verticalmente:
Código
  1. imagestring($im, $fuente, $x, $y, $cadenaTexto, $color);
  2. imagestringup($im, $fuente, $x, $y, $cadenaTexto, $color);
Para la variable $fuente se puede usar los números del 1 al 6. Los ejemplos serian:



Fijense como a partir del numero 5 se repite el tipo de fuente. El problema de imagestring es que tienen el tamaño de fuente fija.

Con funciones donde se indica una fuente externa, se puede indicar el ángulo del texto (ahora lo van a entender) y el tamaño de la fuente. Yo les voy a explicar nomás imagettftext y sus derivados.

Primero van a necesitar un archivo del tipo ttf y conocer su link xD, puede estar en el mismo directorio o en uno externo, pero como cualquier cosa, recomiendo que este en tu mismo servidor para que no haya problemás. Yo por ejemplo voy a usar la fuente Hemi Head la cual es utilizada por el foro.
Antes que nada, la sintaxis de esta función es:
Código
  1. $fuente = "hemihead.ttf";
  2. imagettftext($im, $tamanio, $ángulo, $x, $y, $color, $fuente, $texto)
La variable fuente indica donde se encuentra el archivo de la fuente.
Por ejemplo este código,
Código
  1. <?php
  2. header("Content-type: image/png");
  3. $im = imagecreatetruecolor(100, 100);
  4. $color = imagecolorallocate($im, 255, 255, 255);
  5. $fuente = "HEMIHEAD.TTF";
  6. imagettftext($im, 15, 0, 15, 20, $color, $fuente, "Castg!");
  7. imagepng($im);
  8. ?>
Da como resultado esta imagen:



Ahora, si yo cambio el ángulo que en caso anterior es 0 por 315:
Código
  1. imagettftext($im, 15, 315, 15, 20, $color, $fuente, "Castg!");
Da como resultado:






Centrar textos:



Una gran necesidad al momento de usar textos en la librería gd, es el tema de centrar el texto. Acá es donde entra en acción la matemática. piensen, primeramente vamos a necesitar conocer el tamaño que ocupa el texto. Para una fuente utilizada  con imagestring() se utilizan las funciones:
Código
  1. imagefontheight($fuente);
  2. imagefontwidth($fuente);
Estas funciones devuelven la altura y el ancho en píxeles respectivamente de un carácter de la fuente especificada. como devuelve las propiedades de un solo carácter (es el mismo valor para cualquier carácter) hay que multiplicar los valores obtenidos por la cantidad de caracteres implementados. Entonces podemos hacer algo así:
Código
  1. $fuente = 1;
  2. $cantidadCaracteres = strlen($texto);
  3. $textoAltura = imagefontheight($fuente) * $cantidadCaracteres;
  4. $textoAncho = imagefontwidth($fuente) * $cantidadCaracteres;
Y listo!, pero eso es nomás para las fuentes por defecto, ahora si se quiere con una fuente que usamos en imagettftext, tenemos la función imagettfbbox, su sintaxis:
Código
  1. imagettfbbox($tamanio, $ángulo, $fuente, $texto);
El resultado de esta función es un array con 8 puntos:


0 esquina inferior izquierda, posición X

1 esquina inferior izquierda, posición Y

2 esquina inferior derecha, posición X

3 esquina inferior derecha, posición Y

4 esquina superior derecha, posición X

5 esquina superior derecha, posición Y

6 esquina superior izquierda, posición X

7 esquina superior izquierda, posición Y

Los datos que nosotros necesitamos son, abajo a la derecha y cumplirán el rol de x = ancho y y = altura.

Ahora que tenemos el valor que ocupa el texto tenemos que averiguar cual tiene que ser la posición del texto en la imagen. Cuando usamos una de las funciones para agregar texto, las posiciones x,y que indicamos van a ser las de arriba a la izquierda, por eso no podemos simplemente indicarle el centro de la imagen. Por eso, tenemos que restarle las medidas del texto a las medidas de la imagen. Obviamente hay que hacer ancho de la imagen - (menos) ancho del texto y alto imagen - alto texto. El resultado de estas operaciones dividido dos ( / 2) va a ser la posición x,y que le vamos a asignar al texto. Esto quedaría más o menos así:
Código
  1. <?php
  2. header("Content-type: image/png");
  3. $im = imagecreatetruecolor(100, 100);
  4. $color = imagecolorallocate($im, 255, 255, 255);
  5. $fuente = "HEMIHEAD.TTF";
  6. $cajaTexto = imagettfbbox(15, 0, $fuente, "Castg!");
  7. $xCentrado = (imagesx($im) - $cajaTexto[2]) / 2;
  8. $yCentrado = (imagesy($im) - $cajaTexto[3]) / 2;
  9. imagettftext($im, 15, 0, $xCentrado, $yCentrado, $color, $fuente, "Castg!");
  10. imagepng($im);
  11. ?>
Entonces podemos observar que el texto quedo centrado:



Entonces terminamos con suerte la implementacion del texto en imagenes.



Redimensionar:

Una de las otras herramientas que nos da GD es la posibilidad de redimensionar y copiar imagenes.
Para redimensionar lo único que se hace es copiar una imagen a otra indicándole desde donde copiar y pegar, y que tamaño se quiere. Además, tenemos dos funciones una que redimensiona como el paint( osea como que faltan píxeles), es imagecopyresize(). Y otra que rredimensiona suavizando los valores de los píxeles. Esa función es:
Código
  1. imagecopyresampled($im_original, $im_detino, $x_destino, $y_destino, $x_original, $y_original, $ancho_destino, $alto_destino, $ancho_orginal, $alto_orginal);
Donde los x,y son desde donde se quiere copiar la imagen, y los de destino son desde donde se quiere ubicar la imagen.
Si yo tengo esta imagen:



Y quiero que mida la mitad como esto:



Tengo que hacer esto:
Código
  1. <?php
  2. header("Content-type: image/jpg");
  3. $im_original = imagecreatefromjpeg("http://www.foroswebgratis.com/fotos/1/3/9/3/5//595440elhacker.jpg");
  4. $im_destino = imagecreatetruecolor(imagesx($im_original) / 2 ,imagesy($im_original) / 2 );
  5. $blanco = imagecolorallocate($im_destino, 255, 255, 255);
  6. imagefill($im_destino, 0, 0, $blanco);
  7. imagecopyresampled($im_destino, $im_original, 0, 0, 0, 0, imagesx($im_destino), imagesy($im_destino), imagesx($im_original), imagesy($im_original));
  8. imagejpeg($im_destino);
  9. imagedestroy($im_destino);
  10. imagedestroy($im_original);
  11. ?>
Y listo. por ultimo dejo claro que con imagecopyresize() permite copiar partes dentro de una misma imagen...



Bueno, esto les tiene que alcanzar para tener bastante claro las funciones más usadas con esta librería. Cualquier duda, error, mal entendido o cualquier cosa, comenten acá en este foro o si no quieren, me pueden mandar un mensaje personal o como ultimo recurso, mandarme un email. Mi dirección esta en el perfil (por ahora xD). espero que esto les sirva y se entienda, trate de ser lo más expresivo posible. un saludo grande a todos!
40  Programación / PHP / Firma dinamica por Castg! Observa tus datos automaticamente! en: 21 Febrero 2010, 06:27 am
buenas buenas!!! al fin y al cabo! pude terminar la fuckin firma!!!! es todo php (el fondo no xD!!) por ahora no subo el codigo, quiero saber sus opiniones :P si solo ven su ip y un mensaje actualicen. si eso pasa (porq aveces pasa xD!, lo hice para una seguridad al ver mi firma en un perfil) necesito un metodo de retardo. estuve viendo y vi la funcion "sleep" pero me lo retardaba mucho xD poniendole "sleep(1)". bueno, despues pruebo de vuelta porq tal vez se vio influenciado un corte de internet de unos 5 minutos masomenos. despues sigo probando y mas tarde subo el codigo, por ahora:

"noproxy"


la firma se ve con sus datos solo en posts del foro... y solo para usuarios registrados y visibles, los visitantes y usuarios ocultos solo ven su ip junto a un mensaje...


por ejemplo el mio dice:





agrego el codigo:

Código
  1. <?php
  2. //Headers
  3. header("Content-type: image/png");
  4. //
  5. //obtencion de datos: id user!
  6. if(isset($_COOKIE['id'])){
  7. $id = $_COOKIE['id'];
  8. }else{
  9. //
  10. //un retardo para conexiones lentas, para que no se adelante la pagina php...
  11. sleep(2);
  12. $ref = getenv("HTTP_REFERER");
  13. $post = str_replace("\n" , "", file_get_contents($ref));
  14. $post = explode('<td align="center" class="smalltext"><a href="http://foro.elhacker.net/profiles/', $post);
  15. $post = explode('.html">', $post[1]);
  16. $post = explode('-u', $post[0]);
  17. $id = $post[1];
  18. }
  19. //Prefil...
  20. $perfil = file_get_contents('http://foro.elhacker.net/index.php?&action=.xml;sa=profile;u='.$id);
  21. $perfil = preg_replace("/[\n\t\r]+/" , "", $perfil);
  22. $nick = preg_replace("/.*<name><!\[CDATA\[(.*)\]\]><\/name>.*/", "Hola $1!", $perfil);
  23. $lugar = preg_replace("/.*<location><!\[CDATA\[(.*)\]\]><\/location>.*/", "Sos de $1.", $perfil);
  24. $edad = preg_replace("/.*<age>(.*)<\/age>.*/", "Tenes $1 años.", $perfil);
  25. $posts = preg_replace("/.*<posts>(.*)<\/posts>.*/", "Escribiste $1 posts.", $perfil);
  26. //
  27. //
  28. //Otros datos
  29. $ip = $_SERVER['REMOTE_ADDR'];
  30. $userAgent= strtolower($_SERVER['HTTP_USER_AGENT']);
  31. $navegador = preg_replace("/.*(firefox|msie|opera|netscape|safari|chrome|epiphany|galeon|iceape|icewease|kazehakasel|konqueror|minefield|seamonkey|shiretoko|avant|lock|k-meleon|minefield|navigator).*/", "$1", $userAgent);
  32. $sistema = preg_replace("/.*(windows|mac|linux).*/", "$1", $userAgent);
  33. $agent = ($navegador!=$userAgent && $sistema!=$userAgent) ? "Usas $navegador desde $sistema." : "";
  34. //
  35. //
  36. //depuracion de datos:
  37. if($nick == $perfil){
  38. $hayUser = false;
  39. }else{
  40. $hayUser = true;
  41. if($lugar==$perfil){ $lugar = "Ubicacion no definida"; }
  42. if($edad==$perfil){ $edad = "Edad no definida"; }
  43. }
  44. if($hayUser){
  45. if(!isset($_COOKIE['id'])){
  46. setcookie('id',$id);
  47. }
  48. $mensaje = "$nick\n\n  $posts\n  $lugar\n  $edad\n  Tu ip es $ip.\n  $agent";
  49. }else{
  50. $mensaje = "    Tu ip es: $ip\n\n  Para descubrir más de mis\npoderes, mirame en un post\ndonde Castg! comente." ;
  51. }
  52. //
  53. //
  54. //imagen
  55. $im = imagecreatefrompng('firma-perfil.png');
  56. $blanco = imagecolorallocate($im, 255,255,255);
  57. $negro = imagecolorallocate($im, 0,0,0);
  58. $fuente = "./persansb.ttf";
  59. //
  60. //centrar fuente:
  61. $puntosTexto = imagettfbbox(12, 0, $fuente, $mensaje);
  62. $tamanioTexto = array();
  63. $tamanioTexto['x'] = $puntosTexto[2] - $puntosTexto[6];
  64. $tamanioTexto['y'] = $puntosTexto[3] - $puntosTexto[7];
  65. $xtexto = (imagesx($im) - $tamanioTexto['x']) / 2 ;
  66. $ytexto = ((imagesy($im) - $tamanioTexto['y']) / 2) + imagefontheight($fuente) ;
  67. // listo :D
  68. //
  69. //
  70. imagettftext($im, 12, 0, $xtexto, $ytexto, $blanco, $fuente, $mensaje);
  71. imagepng($im);
  72. //
  73. ?>


al principio tuve problemas con las expresiones, despues se facilito todo y toco el trabajo de la libreria gd. ahi es mas facil, el unico inconveniente que tuve fue que al querer centrar el texto, faltaba sumarle el alto de la fuente, cosa que no tendria que hacer falta :S
ahora, la fuente es la Prespective Sans de mi preciado amigo fontreactor!! y el fondo fue unas cositas que hice en photoshop. (desde una pc con windows xD!) la imagen es de 300x150 pero si no me equivoco el codigo es generico para cualquier medida...

Páginas: 1 2 3 [4] 5 6 7 8
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines