Download DG Crop

Demo

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Download files

You can download the entire script from this Zip file.

Files included in package

• dg-crop.html = Demo HTML file
• js/dg-crop.js = Main Javascript file for this script
• js/effects = Javascript classes used by this script to resize and move the crop area.
• images/ = Images used by the script
• demo-images/ = images used in the demo
• css/dg-crop.css = Cascading style sheet for the script

Simple demo

You can move the crop area and resize it by dragging the handles. You can press the shift key while resizing if you want to preserve aspect ratio.

The script gives you easy access to the coordinates, so that you can send the coordinates to the server where you can perform the physical cropping of the picture.

For a more complex example, try the other demo.

Coordinates for the simple demo (values from the getCoordinates method) :

Configuration

mootools

You need to download and include the mootools js file in order to use this script. The mootools library is available for free at www.mootools.net

If you look at the source code of the demo file, you will se a good example on how to use this script.

You create a crop tool by creating a DG.Crop object. The constructor of the DG.Crop class takes two arguments. The first one is the reference to the object you want to crop, the second is a config object. For the available config properties, see below.

Example code (from the demo):

cropObject = new DG.ImageCrop('cropImage', {
  lazyShadows : true,
  resizeConfig: {
    preserveAspectRatio : false
  },
  moveConfig : {
    keyNavEnabled : true
  },
  initialCoordinates : {
    left : 150,
    top : 150,
    width: 500,
    height:500
  },
  originalCoordinates : {
    width:   2272,
    height : 1704
  },
  previewCoordinates : {
    width:   600,
    height : 450
  },
  listeners : {
    render : function() {
      updateForm(this.getCoordinates());
    },
    crop : function() {
      updateForm(this.getCoordinates());
    }
  }
});

To crop the picture, you will typically send the coordinates you get by calling the getCoordinates method to the server. On the server you can use a tool like ImageMagick to crop the picture.

Config properties

These are the available config properties sent to the constructor of the DG.Crop class:

originalCoordinates

An object with the width and height coordinates for the original picture. If ommited, the previewCoordinates will be used, i.e. an aspect ratio of 1/1

Example:

originalCoordinates : {
  width: 2272,
  height : 1704
}

previewCoordinates

An object with the width and height coordinates for the preview picture.

Example:

previewCoordinates : {
  width: 600,
  height : 450
}

initialCoordinates

The coordinates for the initial crop area. If ommitted, the crop area will cover the entire picture.

Example:

initialCoordinates : {
  left : 150,
  top : 150,
  width: 500,
  height:500
}

listeners

Event listeners. You can also add events afterwards using the addEvent method

Example:

listeners : {
  render : function() {
    updateForm(this.getCoordinates());
  },
  crop : function() {
    updateForm(this.getCoordinates());
  }
}

resizeConfig

Config properties for the DG.resize object, i.e. the class used to resize the crop area. See below for the available attributes.

Example:

resizeConfig: {
  preserveAspectRatio : false,
  handles : 'se'
}

moveConfig

Config properties for the DG.movable object, i.e. the class used to move the crop area. See below for the available attributes.

Example:

moveConfig: {
  keyNavEnabled : false,
}

lazyShadows

True to position the blue shadows around the crop area after the resize or move is completed instead of during the crop process. default = true

Public methods

getCoordinates : object

Returns the crop coordinates relative to the original picture size

getPreviewCoordinates : object

Returns the crop coordinates relative to the size of the preview picture

maximize : void

The crop area selects the entire picture and fires the beforecrop, crop and aftercrop events.

alignTo : void

Align the crop area to the picture. Possible values: nw, n, ne, w, e, sw, s, se, center, vcenter (vertical center) and hcenter (horizontal center)

addEvent : void

The DG.Crop class extends the Events class of the mootools library. addEvent is a method from this library. You can use it to manually assign render, beforecrop, crop or aftercrop events to your DG.Crop object

For more info regarding the available mootools methods, see the mootools documentation.

Config properties for the DG.resize class

You define which properties you want to use via the resizeConfig object to the constructor of the DG.Crop class.

handleOffset

Position offset for the resize handles. example: 0 = south east handle will be placed inside the bottom right corner. positive value will position the handle outside the edge of the crop area. default = 4

handles

Resize handles to use. possible values: all, nw, n, ne, w, e, sw, s, se. You can specify more than one in a commaseparated string. example. 's,se'

handleSize

Size of the resize handle. The image used for the resize handle is specified inside dg-crop.css

maxWidth

Maximum width of the crop area. When ommitted, the maximum size will be determined only by the size of the picture you crop

maxHeight

Maximum height of the crop area. When ommitted, the maximum size will be determined only by the size of the picture you crop

minWidth

Minimum width of the crop area. default = 20

minHeight

Minimum height of the crop area. default = 20

preserveAspectRatio

To preserve aspect ratio, set this value to true. You can also preserve aspect ratio by holding down the shift key while you drag the resize handles

shim

Hides the element during the resize process, and displays a shim element instead. default = false

The DG.resizable class supports the events beforeresize, resize and afterresize.

Config for the DG.movable class

keyNavEnabled

Enables move of crop area by using the arrow keys. default = true

shiftValue

Specify how many pixels to move the crop area when shift + arrow key is pressed. default = 10

handleHeight

Height of move handle (valid css value). default = 100%

shim

Hides the element during the move process, and displays a shim element instead. default = false

Events for the DG.movable class

The DG.movable class supports the events beforemove, move and aftermove.

Events

These are the available events:

render

This event fires when the widget is fully rendered

beforecrop

This event is fired before the crop area is moved or resized

crop

This event is fired during the crop process, i.e. whenever the crop area is moved or resized.

aftercrop

Fires after the crop is complete, i.e. when the mouse is released after moving or resizing the crop area, or after moving the crop area using the keyboard.

Comments

1 2 3 4 5

I've been using CBD gummies for or a year now, and I can't believe how much they've improved my person like [url=https://www.cornbreadhemp.com/products/cbd-sleep-gummies ]cbd gummies sleep[/url] ! The flavors are still delicious, making it a delightful renounce of my day after day routine. My anxiety and prominence levels partake of significantly decreased, and my beauty sleep blue blood has improved tremendously. I wake up sensibility more refreshed and energetic. Notwithstanding, I've noticed a tittle of drowsiness during the daytime, and I wish the effects lasted a whit longer. Despite these trivial issues, I powerfully commend these CBD gummies for anyone looking to improve their well-being normally!

EloiseSnive at 02:53PM, 2024/07/22.

Post your comment

Your name:
Your email:
Your website:
Don't have an avatar? Create one at Gravatar.com.

 

Confirmation code:

Please wait...

Comment preview:

Type some text to see comment preview...

Anonymous at 02:07, 12-22-2024.