Image Editor

Dependencies

Birthday Picker requires the following libraries:

  1. The latest Jquery, which you can download from here.
  2. The latest Jquery UI, which you can download from here
  3. The latest Bootstrap, you can download from here.
  4. The latest Camanjs library, you can download from here

Getting Started

Download the latest code from here

How to use imageEditor

Include the following css files into the header

<link href="http://example.com/css/bootstrap-image-editor.css" rel="stylesheet">

Include the javascript files into the page

<script src="http://example.com/js/jquery.min.js"></script>

<script href="http://example.com/js/jquery-ui.min.js" ></script>

<script src="http://example.com/js/bootstrap.min.js"></script>

<script src="http://example.com/js/bootstrap-image-editor.min.js"></script>

HTML decoration for your images goes like this

<div id="editor-window"></div>

Include the following near the end of the page or in a seperate javascript file

<script type="text/javascript">
    $("#editor-window").imageEditor({
      'source': '/img/las-vegas.jpg',
      "maxWidth": 500,
      "onClose": function () {
      }
    });
</script>

Initialization Options

The following are the initialization options and their default values

Default Description
source "" The image source for editiing.
maxWidth 500 The maximum width of the image.
maxHeight 400 The maximum height of the image.
remoteSave false The default save method is browser. Set to true for remote save.
remoteURL "" The remote URL that you want to send the image to.
blockEnable false This flag should only be enabled if Jquery BLOCKUI is enabled.
blockMessage null A message that will be displayed in the blockUI.
saveCallBack function The callback after the save event.
onClose function The callback when the close button is pressed.

You can override any of these values during initialization.

DEMO

Edit

Click on the edit button or the image to edit image.

Edit

Initialization with jquery clockUI