Theme-Logo
  • Mega
    • Popular Links
      • Form Elements
      • Buttons
      • Maps
      • Contact Cards
      • User Information
      • Lock Screen
    • Mailbox
      • Data Backup
        Store your data
      • Support
        24-hour support
      • Drop-box
        Store large amount of data in one-box only
      • Location
        Find Your Location with ease of use
    • Gallery
      Gallery-1
      Gallery-2
      Gallery-3
      Gallery-4
      Gallery-5
      Gallery-6
    • Contact Us
  • English
    • English
    • Spanish
    • Portuguese
    • French
  • 5
    • 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
  • 9
  • User-Profile-Image John Doe
    • Settings
    • Profile
    • My Messages
    • Lock Screen
    • Logout

People

Sara Soueidan

Sara Soueidan

Shaun Dona

Shaun Dona

Popular

PagePreloadingEffect

Page Preloading Effect

DraggableDualViewSlideshow

Draggable Dual-View Slideshow

Recent

TooltipStylesInspiration

Tooltip Styles Inspiration

NotificationStyles

Notification Styles Inspiration

Generic placeholder image
Josephin Doe
Generic placeholder image
Lary Doe
Generic placeholder image
Alice
Generic placeholder image
Alia
Generic placeholder image
Suzen
Generic placeholder image
Michael Scofield
Generic placeholder image
Irina Shayk
Generic placeholder image
Sara Tancredi
Generic placeholder image
Samon
Generic placeholder image
Daizy Mendize
Generic placeholder image
Loren Scofield
Generic placeholder image
Shayk
Generic placeholder image
Sara
Generic placeholder image
Doe
Generic placeholder image
Lary
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
User-Profile-Image
John Doe UX Designer
  • View Profile Settings Logout
Navigation
  • Dashboard
    • Default
    • Ecommerce
    • CRM
    • Analytics NEW
    • Project
  • 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
  • Navigation
    • Navbar
    • Navbar Inverse
    • Navbar With Elements
  • Widget 100+
UI Element
  • Basic Components
    • Alert
    • Breadcrumbs
    • Button
    • Box-Shadow
    • Accordion
    • Generic Class
    • Tabs
    • Color
    • Label Badge
    • Progress Bar
    • Pre-Loader
    • List
    • Tooltip And Popover
    • Typography
    • Other
  • Advance Components
    • Draggable
    • Grid Stack
    • Light Box
    • Modal
    • Modal Form
    • Notifications
    • PNOTIFY NEW
    • Rating
    • Range Slider
    • Slider
    • Syntax Highlighter
    • Tour
    • Tree View
    • Nestable
    • Toolbar
    • X-Editable
  • Extra Components
    • Session Timeout
    • Session Idle Timeout
    • Offline
  • Animations
  • Sticky Notes HOT
  • Icons
    • Font Awesome
    • Themify
    • Simple Line Icon
    • Ion Icon
    • Material Design
    • Ico Fonts
    • Weather Icon
    • Typicons
    • Flags
Forms
  • Form Components
    • Form Components
    • Form-Elements-Add-On
    • Form-Elements-Advance
    • Form Validation
  • Form Picker NEW
  • JSON Form HOT
    • Simple Form
    • Clubs(View Selector)
    • Customer Form
    • Profile Display
    • Profile Edit
    • Profile Ready Only
    • Form Fields
    • Registration Validation
    • Automatic Validation
    • Localized Login
  • Form Select
  • Form Masking
  • Form Wizard
  • Ready To Use HOT
    • Cloned Elements Form
    • Currency Form
    • Booking Form
    • Booking Multi Steps Form
    • 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
  • Bootstrap Table
    • Basic Table
    • Sizing Table
    • Border Table
    • Styling Table
  • Data Table
    • Basic Table
    • Basic Initialization
    • Advance Initialization
    • Styling
    • API
    • Ajax
    • Server Side
    • Plug-In
    • Data Sources
  • Data Table Extensions
    • AutoFill
    • Button
      • Basic Button
      • Flash Button
      • Html-5 Data Export
      • Print Button
    • Col Reorder
    • Fixed Columns
    • Fixed Header
    • Key Table
    • Responsive
    • Row Recorder
    • Scroller
    • Select Table
  • FooTable
  • Handson Table
    • Appearance
    • Data Operation
    • Rows Columns
    • Columns Only
    • Cell Features
    • Cell Types
    • Integrations
    • Rows Only
    • Utilities
  • Editable Table
Chart And Maps
  • Charts
    • Google Chart
    • Echarts
    • ChartJs
    • List Chart
    • Float Chart
    • Know chart
    • Morris Chart
    • Nvd3 Chart
    • Peity Chart
    • Radial Chart
    • Rickshaw Chart
    • Sparkline Chart
    • C3 Chart
  • Maps
    • Google Maps
    • Vector Maps
    • Google Map Search API
    • Location
  • Landing Page
Pages
  • Authentication
    • Login With BG Image
    • Login With Social Icon
    • Login Social With Header And Footer
    • Login With Header And Footer
    • Registration BG Image
    • Registration Social Icon
    • Registration Social With Header And Footer
    • Registration With Header And Footer
    • Multi Step Registration
    • Forgot Password
    • Lock Screen
    • Modal
  • Maintenance
    • Error
    • Comming Soon
    • Offline UI
  • User Profile
    • Timeline
    • Timeline Social
    • User Profile
    • User Card
  • Blog
    • Blog
    • Blog Detail
    • Blog With Left Sidebar
    • Blog With Right Sidebar
  • 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
  • Chat
  • CRM Contact
  • Social
    • Fb Wall
    • Messages
  • Task
    • Task List
    • Task Board
    • Task Detail
    • Issue List
  • To-Do
    • To-Do
    • Notes
  • Gallery
    • Gallery-Grid
    • Masonry Gallery
    • Advance Gallery
  • Search
    • Simple Search
    • Grouping Search
  • Job Search NEW
    • Card View
    • Job Detailed
    • Job Find
    • Job Panel View
Extension
  • Editor
    • CK-Editor
    • WYSIWYG Editor
    • Ace Editor
    • Summer Note Editor
    • Long Press Editor
>
  • Invoice
    • Invoice
    • Invoice Summary
    • Invoice List
  • Event Calendar
    • Full Calendar
    • CLNDER NEW
  • Image Cropper
  • File Upload
  • Internationalize HOT
    • After Init
    • Fallback
    • On Init
    • Resources
    • XHR Backend
  • Change Loges 1.0
Other
  • Menu Levels
    • Menu Level 2.1
    • Menu Level 2.2
      • Menu Level 3.1
    • Menu Level 2.3
  • Disabled Menu
  • Sample Page
Support
  • Documentation
  • Submit Issue

Image Cropper

Lorem ipsum dolor sit amet, consectetur adipisicing elit
  • Image Crop
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.