DOCUMENTATION.

1.2

Autoload image from server

This example will show to autoload an image from server using the loadComplete function.

Before continuing with this example make sure you have read the Modal & Inline example.

First we start with the PHP:

<?php
session_start();

// Let's say that you grab the user id from the session
$user_id = $_SESSION['user_id'];

// Include ImgPicker.php class
require dirname(__FILE__) . '/ImgPicker.php';

// ImgPicker options
$options = array(
    // Upload directory path
    'upload_dir' => dirname(__FILE__) . '/../files/',
    // Upload directory url
    'upload_url' => 'files/',
   	// Image versions
    'versions' => array(
    	// Generate 200x200 square image for the avatar
        'avatar' => array(
            'crop' => true,
            'max_width' => 200,
            'max_height' => 200
        )
    ),
    // !!! Here you have to return the user image
    'load' => function($instance) {
        global $user_id;
        // Make a query from database and return the filename:
        return '123.png';
    },
    
    // Upload start callback
    'upload_start' => function($image, $instance) {
        global $user_id;
        // Name the temp image as $user_id
        $image->name = '~'.$user_id.'.'.$image->type;	
    },
    // Crop start callback
    'crop_start' => function($image, $instance) {
       global $user_id;
       // Change the name of the image
       $image->name = $user_id.'.'.$image->type;
    },
    // Crop complete callback
    'crop_complete' => function($image, $instance) {
        // Save the image to database
    }
);

// Create ImgPicker instance
new ImgPicker($options);
?>

And the JavaScript code:

<script>
$(function() {
    $('#myModal').imgPicker({
        url: 'server/upload_avatar.php',
        aspectRatio: 1,
        // We use the loadComplete to set the image
        loadComplete: function(image) {
            // Set #avatar image src
            $('#avatar').attr('src', image.versions.avatar.url);
        },
        cropSuccess: function(image) {
            $('#avatar').attr('src', image.versions.avatar.url);
            this.modal('hide');
        }
    });
});
</script>