2011-11-06 35 views
31

Tengo un sitio que muestra acordes/pestañas de guitarra en formato de texto. Esto es lo que estoy mostrando actualmente:Crear una imagen en PHP para mostrar acordes de guitarra

Em:

| | | | | | 
| | | | | | 
| 2 2 | | | 
| | | | | | 
| | | | | | 

me entero de que GD puede crear una imagen dinámica para esto. Pero soy nuevo en PHP y no tengo idea de qué hacer.

¿Es simple crear algo así en PHP para mostrar una imagen?

Gracias

+0

Si agrega algo de semántica al resultado de texto, también puede darle estilo con CSS. Pero no quiero detenerte para que uses GD, es algo bueno. – hakre

Respuesta

72

Primero descarga el tipo de letra arial y obtener esta imagen (guardar como): guitar.jpg

guitar.jpg

y ponerlos en la misma carpeta que esta secuencia de comandos (por ejemplo, los acordes. php):

<?php 

    function showChord($chord) { 
    $imgfile = "./guitar.jpg"; 
    $text = "."; 
    $font = './arial.ttf'; 

    $im = imagecreatefromjpeg($imgfile); 
    $x = imagesx($im); 
    $y = imagesy($im); 
    $fontsize = 100; 
    $white = imagecolorallocate($im, 0, 0, 0); 

    $chords = explode('-', $chord); 
    // chords[0] = e1 and chords[5] = e6 

    $minimum = min($chords); 
    imagettftext($im, 15, 0, 1, 32, $white, $font, $minimum); 
    $add = 0; 
    if($minimum > 0) { 
     $add = 30; 
    } 
    // chords positions 
    $interval1 = ($chords[0] != 0 ? (25 + $add + (intval($chords[0]) - $minimum) * 30) : 0); 
    $interval2 = ($chords[1] != 0 ? (25 + $add + (intval($chords[1]) - $minimum) * 30) : 0); 
    $interval3 = ($chords[2] != 0 ? (25 + $add + (intval($chords[2]) - $minimum) * 30) : 0); 
    $interval4 = ($chords[3] != 0 ? (25 + $add + (intval($chords[3]) - $minimum) * 30) : 0); 
    $interval5 = ($chords[4] != 0 ? (25 + $add + (intval($chords[4]) - $minimum) * 30) : 0); 
    $interval6 = ($chords[5] != 0 ? (25 + $add + (intval($chords[5]) - $minimum) * 30) : 0); 
    // write to the image 
    imagettftext($im, $fontsize, 0, 01, $interval1, $white, $font, $text); 
    imagettftext($im, $fontsize, 0, 18, $interval2, $white, $font, $text); 
    imagettftext($im, $fontsize, 0, 36, $interval3, $white, $font, $text); 
    imagettftext($im, $fontsize, 0, 53, $interval4, $white, $font, $text); 
    imagettftext($im, $fontsize, 0, 70, $interval5, $white, $font, $text); 
    imagettftext($im, $fontsize, 0, 86, $interval6, $white, $font, $text); 
    header("Content-type: image/jpeg"); 
    imagejpeg($im); 
    ImageDestroy($im); 
    } 

# $chord = '0-2-2-0-0-0'; //Em 
    $chord = '2-4-4-3-2-2'; //F# 
    showChord($chord); 

Esto saldrá algo así como para F #. El en la parte superior izquierda significa que el segundo traste :

enter image description here

** Nota: También me gustaría guardar la imagen en el disco para que no se tiene que regenerar la misma pestaña una y over. *

+14

funciona como un amistoso gracias – GuitarMaster

+0

eres bienvenido –

5

Tony Pottier ha escrito una clase hermosa solo para hacer esto. http://www.tonypottier.info/

Editar: para resolver el problema que se menciona a continuación:

$c = new chord(array('x',13,12,11,12,'x')); 
$c->setMarginRight(20); 
$c->setStartingFret(10); 
$c->draw(); 

Sin los fretnumbers de doble figurado margen derecha no se mostrará correctamente.

+6

no está mal, pero cuando pones: 'x-13-12-11-12-x' muestra una pestaña en blanco – aki

+0

@aki ver la edición anterior –