83.32.205.7 en 16:16 29 nov 2012

2012-11-29T16:16:44Z

83.32.205.7: PARTIAL PARA QUE TUS USUARIOS PUEDAN HACERSE UNA FOTO EN TU WEB Y UTILIZARLA COMO AVATAR

2012-11-29T16:15:59Z

PARTIAL PARA QUE TUS USUARIOS PUEDAN HACERSE UNA FOTO EN TU WEB Y UTILIZARLA COMO AVATAR

Página nueva

PARTIAL PARA QUE TUS USUARIOS PUEDAN HACERSE UNA FOTO EN TU WEB Y UTILIZARLA COMO AVATAR

Yo seguí un tutorial sobre este tema en http://theproc.es/2011/10/5/31186/sacar-fotos-de-una-webcam-con-javascript-y-flash
y pude crear un partial para KumbiaPHP con el apoyo también de esta otra página http://code.google.com/p/jpegcam/

A continuación mostrare los elementos que he utilizado:

== /app/controllers/users_controllers.php ==
* Una acción en un controlador para leer el partial y salvar la foto
<source lang=php>
public function photo( $action='' )
{
if ( $action == 'save' ) Load::model( 'users' )->photo();
View::template( '' );
}
</source>
== /app/views/users/photo.phtml ==
* La vista que incluye el partial
<source lang=php>
<?php View::partial( 'webcam' ); ?>
</source>
== /app/views/_shared/partials/webcam.phtml ==
* El partial que requiere jquery cargado previamente y donde tenemos la mayor parte de los elementos, como el container, los controles para manejar la webcam, la librería del plugin, la configuracion del plugin, algo de css via jquery y las acciones de los controles
<source lang=javascript>
<div id="webcam"></div>
<p id="webcam_controls">
<button class="go" type="button">Go</button>
<button class="no" type="button">No</button>
<button class="ok" type="button">Ok</button>
</p>

<?php echo Tag::js( 'webcam' ); ?>

<script>
webcam.set_api_url( '/users/photo/save' );
webcam.set_swf_url( '/swf/webcam.swf' );
webcam.set_quality( 90 );
webcam.set_shutter_sound( true );
webcam.shutter_url = '/mp3/shutter.mp3';
webcam.set_hook( "onLoad", null );
webcam.set_hook( "onComplete", null );
webcam.set_hook( "onError", null );
$( '#webcam' ).html( webcam.get_html( 320, 240 ) );
$( '#webcam_controls' ).css( { position:'absolute', top:'5px', left:'5px' } );
$( '#webcam_controls button.no, #webcam_controls button.ok' ).hide();
// LO SIGUIENTE ES PARA AJUSTAR EL CSS A UN DIALOG DE JQUERY-UI
$( '#webcam' ).parent().css( 'padding', 0 ).parent().css( { height:'auto', width:'auto' } );

$( '#webcam_controls button.go' ).on( 'click', function()
{
webcam.reset();
webcam.freeze();
$( '#webcam_controls button.go' ).hide();
$( '#webcam_controls button.no, #webcam_controls button.ok' ).show();
});

$( '#webcam_controls button.no' ).on( 'click', function()
{
webcam.reset();
$( '#webcam_controls button.go' ).show();
$( '#webcam_controls button.no, #webcam_controls button.ok' ).hide();
});

$( '#webcam_controls button.ok' ).on( 'click', function()
{
webcam.upload();
location='/users/your';
});
</script>
</source>
== /app/models/users.php ==
* El metodo que es llamado con la acción que salva la foto
<source lang=php>
public function photo()
{
$user = Load::model( 'users' )->getIt();
$file = PUB_PATH . "img/photos/$user->nick.jpg";
file_put_contents( $file, file_get_contents( 'php://input' ) );
}
</source>
== /app/views/users/index.phtml ==
* Y un trozo de código donde mostar la foto en una vista, donde utilizo como nombre del archivo el nick del usuario que lo cargo previamente en $user->nick
<source lang=php>
if ( file_exists( PUB_PATH . "img/photos/$user->nick.jpg" ) )
{
?>
<img alt="<?php echo $user->nick; ?> avatar" src="/img/photos/<?php echo $user->nick; ?>.jpg" width="120" />
<?php
}
</source>

RECUERDA !! Sientete libre de modificar este tuto siempre que sea para completarlo o mejorarlo.

Y no olvides que todos seriamos ricos y sabios si cada unos de nosotros comparte lo que sabe.

* Tuto by Demonio69

← Revisión anterior		Revisión del 16:16 29 nov 2012
Línea 95:		Línea 95:

	* Tuto by Demonio69		* Tuto by Demonio69
		+
		+	[[Categoría:Tutoriales KumbiaPHP]]

PhotoPartial - Historial de revisiones

83.32.205.7 en 16:16 29 nov 2012

83.32.205.7: PARTIAL PARA QUE TUS USUARIOS PUEDAN HACERSE UNA FOTO EN TU WEB Y UTILIZARLA COMO AVATAR