Theme-Logo
  • 5
    • Notifications
      New
    • 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
  • 3
  • 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
  • Dashboard
    • Default
    • CRM
    • Analytics NEW
  • Layouts HOT
    • 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 Light
  • Widgets 100+
    • Statistic
    • Data
    • Chart Widget
UI Elements
  • Components
    • Basic
      • Alert
      • Breadcrumbs
      • Button
      • Box-Shadow
      • Accordion
      • Generic Class
      • Tabs
      • Color
      • Label Badge
      • Progress Bar
      • Pre-Loader
      • List
      • Tooltip & Popover
      • Typography
      • Other
    • Advance
      • Draggable
      • Grid Stack
      • Light Box
      • Modal
      • Notifications
      • PNotify
      • Rating
      • Slider
      • Syntax Highlighter
      • Nestable
      • Toolbar
      • X-Editable
    • Extra
      • Session Timeout
      • Session Idle Timeout
    • Animations
    • Sticky Notes
    • Icons
Forms
  • Forms NEW
    • Form Components
    • Form Add-On
    • Form Advance
    • Form Validation
    • Form Picker
    • Form Select
    • Form Masking
    • Form Wizard
Tables
  • Tables
    • Bootstrap Table
      • Basic Table
      • Sizing Table
      • Border Table
      • Styling Table
    • Data Table
      • Basic
      • Advance
      • Styling
      • API
      • Ajax
      • Server Side
      • Plug-In
      • Data Sources
    • DT Extensions
      • AutoFill
      • Basic Buttons
      • HTML5 Export
      • Col Reorder
      • Fixed Columns
      • Fixed Header
      • Key Table
      • Responsive
      • Row Reorder
      • Scroller
      • Select Table
    • Handson Table
      • Appearance
      • Data Operation
      • Rows & Columns
      • Columns Only
      • Cell Features
      • Cell Types
      • Integrations
      • Rows Only
      • Utilities
    • Editable Table
Charts & Maps
  • Charts NEW
    • Echarts
    • ChartJs
    • List Chart
    • Sparkline Chart
  • Maps
    • Google Maps
    • Vector Maps
    • Google Map Search API
    • Location
Pages
  • Authentication
    • Login
      • With BG Image
      • With Header/Footer
    • Registration
      • With BG Image
      • With Header/Footer
    • Forgot Password
    • Lock Screen
  • User
    • User Profile
    • User Card
    • Timeline
  • Utility
    • Error
    • Coming Soon
    • Sample Page
Business
  • E-Commerce HOT
    • Product
    • Product List
    • Product Edit
    • Product Detail
    • Product Cart
    • Credit Card Form
  • Invoice
    • Invoice
    • Invoice Summary
    • Invoice List
  • Job Portal
    • Job Details
    • Job Find
    • Job Panel View
Applications
  • Chat
  • Email
    • Compose
    • Inbox
    • Read Mail
    • Templates
      • Welcome
      • Reset Password
      • Newsletter
      • App Launch
      • Activation
  • Task
    • Task List
    • Task Board
    • Task Detail
    • Issue List
  • To-Do & Notes
    • To-Do
    • Notes
  • Social
    • Wall
    • Messages
  • Calendar
    • Full Calendar
Extensions
  • Gallery
    • Gallery Grid
    • Masonry Gallery
    • Advance Gallery
  • Search
    • Simple Search
  • WYSIWYG Editor
  • Image Cropper
  • File Upload
  • Change Logs
Other
  • Menu Levels
    • Menu Level 2.1
    • Menu Level 2.2
      • Menu Level 3.1
    • Menu Level 2.3
  • Disabled Menu
  • Landing Page
Support
  • Documentation
  • Submit Issue

Image Cropper

lorem ipsum dolor sit amet, consectetur adipisicing elit
  • Widget
Image Cropper Plugin
Crop Picture
X
Y
Width
Height
Rotate
ScaleX
ScaleY

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.