Theme-Logo
    • Notifications
    • Generic placeholder image
      John Doe

      Lorem ipsum dolor sit amet, consectetuer elit.

      30 minutes ago
    • Generic placeholder image
      Joseph William

      Lorem ipsum dolor sit amet, consectetuer elit.

      30 minutes ago
    • Generic placeholder image
      Sara Soudein

      Lorem ipsum dolor sit amet, consectetuer elit.

      30 minutes ago
  • User-Profile-Image John Doe
    • Settings
    • Profile
    • My Messages
    • Lock Screen
    • Logout
Generic placeholder image
Josephin Doe
Generic placeholder image
Lary Doe
Generic placeholder image
Alice
Generic placeholder image
Alia
Generic placeholder image
Suzen
Josephin Doe
Generic placeholder image

I'm just looking around. Will you tell me something about yourself?

8:20 a.m.

I'm just looking around. Will you tell me something about yourself?

8:20 a.m.

Generic placeholder image
Navigation
  • D Dashboard
    • Default
    • Ecommerce
    • Analytics NEW
  • P Page layouts NEW
    • Vertical
      • Static Layout
      • Header Fixed
      • Compact
      • Sidebar Fixed
    • Horizontal
      • Static Layout
      • Fixed layout
      • Static With Icon
      • Fixed With Icon
    • Bottom Menu
    • Box Layout
    • RTL
  • N Navigation
  • W Widget 100+
    • Statistic
    • Data
    • Chart Widget
UI Element
  • BC Basic
    • Alert
    • Breadcrumbs
    • Button
    • Box-Shadow
    • Accordion
    • Generic Class
    • Tabs
    • Color
    • Label Badge
    • Progress Bar
    • Pre-Loader
    • List
    • Tooltip And Popover
    • Typography
    • Other
  • AC Advance
    • Draggable
    • Grid Stack
    • Light Box
    • Modal
    • Notifications
    • PNOTIFY NEW
    • Rating
    • Range Slider
    • Slider
    • Syntax Highlighter
    • Tour
    • Tree View
    • Nestable
    • Toolbar
    • X-Editable
  • EC Extra
    • Session Timeout
    • Session Idle Timeout
    • Offline
  • A Animations
  • S Sticky Notes HOT
  • I Icons
    • Font Awesome
    • Themify
    • Simple Line Icon
    • Ion Icon
    • Material Design
    • Ico Fonts
    • Weather Icon
    • Typicons
    • Flags
Forms
  • FC Form
    • Components
    • Add-On
    • Advance
    • Validation
  • FP Form Picker NEW
  • FS Form Select
  • FM Form Masking
  • F Form Wizard
  • R Ready To Use HOT
    • Cloned Elements Form
    • Currency Form
    • Booking Form
    • Booking Multi Steps
    • Comment Form
    • Contact Form
    • Job Application Form
    • JS Addition Form
    • Login Form
    • Popup Modal Form
    • Registration Form
    • Review Form
    • Subscribe Form
    • Suggestion Form
    • Tabs Form
Tables
  • B Bootstrap Table
    • Basic Table
    • Sizing Table
    • Border Table
    • Styling Table
  • DT Data Table
    • Basic Initialization
    • Advance Initialization
    • Styling
    • API
    • Ajax
    • Server Side
    • Plug-In
    • Data Sources
  • D DT Extensions
    • AutoFill
    • Button
      • Basic Button
      • Data Export
    • Col Reorder
    • Fixed Columns
    • Fixed Header
    • Key Table
    • Responsive
    • Row Reorder
    • Scroller
    • Select Table
  • F FooTable
  • HT Handson Table
    • Appearance
    • Data Operation
    • Rows Columns
    • Columns Only
    • Cell Features
    • Cell Types
    • Integrations
    • Rows Only
    • Utilities
  • E Editable Table
Chart And Maps
  • C Charts
    • Google Chart
    • Echarts
    • ChartJs
    • List Chart
    • Float Chart
    • Knob chart
    • Morris Chart
    • Nvd3 Chart
    • Peity Chart
    • Radial Chart
    • Rickshaw Chart
    • Sparkline Chart
    • C3 Chart
  • M Maps
    • Google Maps
    • Vector Maps
    • Google Map Search API
    • Location
  • LP Landing Page
Pages
  • A Authentication
    • Login
      • Simple
      • Header & Footer
      • Social
      • Social With Header & Footer
    • Registration
      • Simple
      • Header & Footer
      • Social
      • Social With Header & Footer
    • Multi Step Registration
    • Forgot Password
    • Lock Screen
    • Modal
  • M Maintenance
    • Error
    • Comming Soon
    • Offline UI
  • UP User Profile
    • Timeline
    • Timeline Social
    • User Profile
    • User Card
  • E E-Commerce NEW
    • Product
    • Product List
    • Product Edit
    • Product Detail
    • Product Card
    • Credit Card Form
  • E Email
    • Compose Email
    • Inbox
    • Read Mail
    • Email Template
      • Welcome Email
      • Reset Password
      • Newsletter Email
      • App Launch
      • Activation Code
App
  • S Social
    • Wall
    • Messages
  • T Task
    • Task List
    • Task Board
    • Task Detail
    • Issue List
  • T To-Do
    • To-Do
    • Notes
  • G Gallery
    • Gallery-Grid
    • Masonry Gallery
    • Advance Gallery
  • S Search
    • Simple Search
    • Grouping Search
  • JS Job Search NEW
    • Card View
    • Job Detailed
    • Job Find
    • Job Panel View
Extension
  • E Editor
    • CK-Editor
    • WYSIWYG Editor
    • Ace Editor
    • Long Press Editor
  • I Invoice
    • Invoice
    • Invoice Summary
    • Invoice List
  • EC Event Calendar
    • Full Calendar
    • CLNDER NEW
  • IC Image Cropper
  • FU File Upload
  • CL Change Loges 1.0
Other
  • M Menu Levels
    • Menu Level 2.1
    • Menu Level 2.2
      • Menu Level 3.1
    • Menu Level 2.3
  • D Disabled Menu
  • S Sample Page
Support
  • D Documentation
  • SI Need Support ?
Image Cropper

lorem ipsum dolor sit amet, consectetur adipisicing elit

  • Image Cropper
Image Cropper plugin
Crop Picture

Cropped

Download
Basic usage

This is the most basic example of cropper implementation. By default cropping area is centered and takes 80% of image space. The image is resizable, but should be wrapped in block element with fixed height.

Hidden overlay

This example demonstrates default options, but with hidden black modal layer above the cropper. To hide the modal set modal option to false. If visible, modal color can be easily changed in css.

Fixed position

This example demonstrates cropped area that has fixed position and can't be moved. Although it isn't movable, other options remain available: resize, dragging, callbacks, aspect ratios, modal etc.

Fixed size

This example demonstrates cropped area that has fixed size and can't be resized. Although it isn't resizable, other options remain available: moving, dragging, callbacks, aspect ratios, modal etc.

Disabled autocrop

In this example cropping zone is not rendered automatically when initialize and available only on a new drag. By default, cropping zone is always visible and can be hidden by setting autoCrop option to false.

Disabled image drag

In this example the user can't drag the image within container, but can drag cropping area.. By default, this feature is disabled and can be enabled by setting movable option to false.

Fixed 16:9 ratio

Thix example demonstrates fixed 16:9 dragging (selection) ratio. By default, aspect ratio isn't specified and is free. Optional aspect ratios are also available and can be specified using aspectRatio option.

Fixed 4:3 ratio

Thix example demonstrates fixed 4:3 dragging (selection) ratio. By default, aspect ratio isn't specified and is free. Optional aspect ratios are also available and can be specified using aspectRatio option.

Minimum zone size

This example demonstrates the minimum width and height (px of original image) of the cropping zone. Better use this option only when you are sure that the image has this minimum width and height. By default, both values aren't specified.

Disabled zoom

This example demonstrates the ability to disable zoom feature, it works in both options: disables zoom on scroll and zoom on touch. By default, image cropper is zoomable, to disable zooming set zoomable option to false.