xphoto Extention to upload photo and capture from webcam or camera using HTML5

Requirements

  1. Twitter Bootstrap
  2. Yii 1.1 above

Screenshots

Screenshot xphoto 1

Screenshot xphoto 2

Usage

Just call the widget with your spesific params the params are:

/**
* Using upload file
* if true, XPhoto will enable file upload from computer harddrive
*/
public $upload = true;
/**
* Using capture
* if true, XPhoto capture from your webcam or camera which attached on your computer
*/
public $capture = true;

//public $allowedExtensions = array('jpg','jpeg','png');

public $url;
/**
* model name for active field
*/
public $model;
/**
* attribut of model
*/
public $attribute;	
/**
* width of photo canvas : in pixel
*/
public $width = 300;
/**
* height of photo canvas : in pixel
*/
public $height = 350;
/**
* ID of canvas element
*/
public $canvasID = 'xphoto-canvas';
/**
* ID of video element
*/
public $videoID = 'xphoto-video';
/**
* ID of photo element
*/
public $photoID = 'xphoto-photo';
/**
* Modal dialog for capture photo
* if modal is true, when capturing photo the modal will shown as capture media container
*/
public $withModal = true;

public $cssFile;
public $htmlOptions = array();

Call on your view:

  1. Requirements
  2. Screenshots
  3. Usage
  4. Resources
$this->widget('ext.xphoto.XPhoto',array(
 	'model'=>$model,
 	'attribute'=>'user_photo',
));

On your controller action:

  1. Requirements
  2. Screenshots
  3. Usage
  4. Resources
if (!empty($_POST['Profile']['user_photo']))
{
    $foto = $_POST['Profile']['user_photo'];
    //Decode with base64
    $foto = str_replace('data:image/png;base64,', '', $foto);
    $foto = str_replace(' ', '+', $foto);
    $data_foto = base64_decode($foto);

    //Set photo filename
    $filename = Yii::app()->user->name.'.png';
    $filepath = YiiBase::getPathOfAlias("webroot").'/uploads/userphotos/'.$filename;

    $writeToDisk = file_put_contents($filepath, $data_foto);                        
}

Resources

2 1
5 followers
466 downloads
Yii Version: 1.1
License: (not set)
Category: User Interface
Developed by: Khayat Sang Pelamun
Created on: Jun 27, 2014
Last updated: 3 years ago

Downloads

show all

Related Extensions