Yii 1.1: xphoto

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


  1. Twitter Bootstrap
  2. Yii 1.1 above


Screenshot xphoto 1

Screenshot xphoto 2


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:


On your controller action:

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


Total 1 comment

#19596 report it
Commun at 2015/09/24 08:17am
Image format and size

hello, Great extension but I would like to know if :

it allows cropping selected picture it supports other format than png because in the example above you put png.

A part from that how can I limit the format(to images format only) and the file size?

I don't undestand the usage of $_POST['profile']['user_photo'].I Have user model for which I want to use your extension(user profile photo) and I have a model that must be linked to many photos. Any idea on how I can apply the extension


Leave a comment

Please to leave your comment.

Create extension