PhotoPartial

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

public function photo( $action='' )
{
	if ( $action == 'save' ) Load::model( 'users' )->photo();
	View::template( '' );
}

/app/views/users/photo.phtml

• La vista que incluye el partial

<?php View::partial( 'webcam' ); ?>

/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

<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>

/app/models/users.php

• El metodo que es llamado con la acción que salva la foto

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' ) );
}

/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

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
}

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