Esquinas redondeadas en PHP con la biblioteca GD

Por qué usar la librería gráfica GD?

Necesitaba añadir esquinas redondas a varias fotos y no quería modificar los archivos originales en Photoshop (creo que es mala idea retocar imágenes si el efecto se puede hacer de manera dinámica).

Primero pensaba que podría usar CSS. Pero después de ver algunos tutoriales (algunos también usaban Javascript), me dí cuenta que para que funcione en la mayoría de los navegadores, no era tan sencillo y generalmente requiere que se crean algunas etiquetas (tags) DIV adicionales.

Es cuando decidí usar la biblioteca gráfica GD, que me había sido útil en otros proyectos. No estoy diciendo que es la solución perfecta o mejor que otras, pero ha funcionado muy bien y espero que también le sirva.

Ventajas de este método:

  • Flexible: Puede escoger la(s) esquina(s) que haya que redondear, así como el radio.
  • “Cross-browser”: Dado que las esquinas redondeadas se aplican del lado servidor, no se requiere soporte para CSS ni Javascript.
  • Limpio: ninguna etiqueta (tag) DIV adicional
  • Se puede girar la imagen entera después de redondear las esquinas.

Limitaciones conocidas:

  • Dependiendo de su imagen de esquina redondeada, un borde negro podría mostrarse cuando su usa un radio diferente del de está imagen, debido a algunos problemas de transparencia en la biblioteca GD. Por lo tanto, se recomienda usar una imagen de la esquina con el tamaño adecuado, si es posible.
  • El atributo src debe apuntar al archivo en el que está la función, por lo que es necesario cambiar las etiquetas (tags) IMG en el código, para las fotos que necesiten esquinas redondeadas.

PHP Code

Cómo usarlo?

Obviamente, PHP y la biblioteca GD library tienen que estar instalados en su servidor. También necesitará un archivo png de la esquina redondeada. Si lo quiere, puede usar una de nuestras imágenes de esquina.

Simplemente copie y pegue el código y guárdelo en un archivo .php. Haga los cambios necesarios a las variables $images_dir y $corner_source (líneas 10 y 11). Víncule el atributo src de la foto a ese archivo, usando las siguientes variables URL:

  • src: nombre de archivo de la imagen
  • radius (opcional): valor que representa el radio (en píxeles) de las esquinas; utilizar esta opción para cambiar el tamaño de la imagen de la esquina
  • angle (opcional): valor que representa ángulo de rotación de la imagen completa, en grados
  • topleft=no (opcional): no redondear la esquina superior izquierda
  • bottomleft=no (opcional): no redondear la esquina inferior izquierda
  • bottomright=no (opcional): no redondear la esquina inferior derecha
  • topright=no (opcional): no redondear la esquina superior derecha

Ejemplos

Contáctenos o deje un comentario abajo si tiene alguna pregunta acerca de este código.’

Leave a comment