Web component: j-Crop


  • Info
  • HTML
  • JS
  • CSS
  • Meta

j-Crop

Supports:

  • zoom
  • drag and drop
  • local files
  • responsive

Configuration:

  • width {Number} target width, required
  • height {Number} target height, required
  • dragdrop {Boolean} enables drag&drop (default: true)
  • background {String} a background color (default: transparent)
  • format {String} a format for URL file generator (default: {0})

Attributes

  • data-jc-path="url-to-image" - must contain URL to picture

Methods:

// e.g.
var component = FIND('croper');

// Resize canvas
component.reconfigure('width:500;height:200');

// Get cropped image
var png = component.output('image/png');
var jpg = component.output('image/jpeg');

// Below method automatically detects the transparency and sets the output
var data = component.output();

// Is the image cropped?
console.log('Is changed?', component.dirty());
console.log('Is changed?', CHANGE(component.path);

Author

Browser‘s Save action performs Preview