cropimg.jquery.js v. 0.3.0

Another croping jQuery plugin.

Go back to homepage http://requtize.github.io/cropimg/

Basic usage

Include this files to Your HTML document:

<link rel="stylesheet" type="text/css" href="/cropimg/cropimg.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/cropimg/cropimg.jquery.min.js"></script>

resultWidth and resultHeight are required options:

$(document).ready(function() {
    $('img.my-image').cropimg({
    resultWidth:        300,
    resultHeight:       200
  });
});

If You want, add these four input into document - plugin update values of these inputs when user change cropped area.

<input type="hidden" name="x" value="" id="ci-x" />
<input type="hidden" name="y" value="" id="ci-y" />
<input type="hidden" name="w" value="" id="ci-w" />
<input type="hidden" name="h" value="" id="ci-h" />

Full usage

Example of full usage of options.

$(document).ready(function() {
  $('img.my-image').cropimg({
    maxContainerWidth:             200,
    resultWidth:                   300,
    resultHeight:                  200,
    inputPrefix:                   'ci-',
    zoomDelay:                     400,
    mouseWheelZoomTimes:           10,
    zoomStep:                      1,
    displayZoomingButtons:         true,
    displayFixingPositionsButtons: true,
    displayFixingSizeButtons:      true,
    showBtnTips:                   true,
    btnTipsFadeTime:               100,
    textBtnTipZoomIn:              'Zoom in',
    textBtnTipZoomOut:             'Zoom out',
    textBtnTipRTW:                 'Resize to container width',
    textBtnTipRTH:                 'Resize to container height',
    textBtnTipFPTL:                'Move image to Top Left Corner',
    textBtnTipFPTC:                'Move image to Top Center',
    textBtnTipFPTR:                'Move image to Top Right Corner',
    textBtnTipFPCL:                'Move image to Center Left',
    textBtnTipFPCC:                'Move image to Center of container',
    textBtnTipFPCR:                'Move image to Center Right',
    textBtnTipFPBL:                'Move image to Bottom Left Corner',
    textBtnTipFPBC:                'Move image to Bottom Center',
    textBtnTipFPBR:                'Move image to Bottom Right Corner',
    onInit: function() {
      alert('cropimg init!');
    },
    onChange: function(w, h, x, y, image) {
      alert('cropimg changed: w: '+w+', h: '+h+', x: '+x+', y: '+y);

      // Image jQuery object was changed
      console.log(image);
    }
  });
});

Options

type: integer     default: null

maxContainerWidth

Sets the maximum width of the image container. Dimensions of the crop will be calculated proportionately.

type: integer     default: 100

resultWidth

Width of the cropped image.

type: integer     default: 100

resultHeight

Height of the cropped image.

type: string     default: ''

inputPrefix

Prefix of the inputs, where plugin introduce values of cropping.

There are four inputs with values. Begin ID of each input is the prefix from the option, and next, in sequence:

  • x - X position of the cropped image on the upper left pixel.
  • y - Y position of the cropped image on the upper left pixel.
  • w - the width of the cropped piece of the picture.
  • h - the height of the cropped piece of the picture.
type: integer     default: 400

zoomDelay

The time between click and hold the button of zoom, and start of zooming.

type: integer     default: 10

mouseWheelZoomTimes

Define count of clicks on one of zooming buttons (in or out), when user scroll on zooming area.

Example: one mouse scroll = 10 clicks on Zoom in button.

Work only if jquery.mousewheel.js script is included.

type: integer     default: 1

zoomStep

Define how fast zooming should work. Higher value means faster zooming. Default value is 1, lowest value is greater than 0.

type: boolean     default: true

displayZoomingButtons

If true, zooming buttons will be displayed.

type: boolean     default: true

displayFixingPositionsButtons

If true, position control buttons will be displayed.

type: boolean     default: true

displayFixingSizeButtons

If true, size control buttons will be displayed.

type: boolean     default: true

showBtnTips

If true, buttons tooltips will be showed on hover.

type: integer     default: 100

btnTipsFadeTime

Time in miliseconds of animation of buttons tooltips.

Methods

type: function     default: function() {}

onInit

This function is called after the initiation of the plugin. Takes no arguments.

type: function     default: function() {}

onChange

This function is called when you change the cropped area of the image. The function takes parameters:

  • x - X position of the cropped image on the upper left pixel.
  • y - Y position of the cropped image on the upper left pixel.
  • w - the width of the cropped piece of the picture.
  • h - the height of the cropped piece of the picture.
  • image - jQuery image object was changed.

Reset (destroy)

If you want to destroy plugin instance and reset HTML code generated by plugin to only IMG tag, you have to get data from IMG and call reset() method. Example showed below. 

$(document).ready(function() {
  $('img.my-image').data('cropimg').reset();
});

This method removes all HTML tags generated by plugin, and replace it with IMG tag, like before plugin call.

Translate options

All options, prefixed with 'text', are options used to inform user, what this button do. Example, zooming option or moving image to one of the corners.

Full list of translate options with default values:

  • textBtnTipZoomIn - 'Zoom in'
  • textBtnTipZoomOut - 'Zoom out'
  • textBtnTipRTW - 'Resize to container width'
  • textBtnTipRTH - 'Resize to container height'
  • textBtnTipFPTL - 'Move image to Top Left Corner'
  • textBtnTipFPTC - 'Move image to Top Center'
  • textBtnTipFPTR - 'Move image to Top Right Corner'
  • textBtnTipFPCL - 'Move image to Center Left'
  • textBtnTipFPCC - 'Move image to Center of container'
  • textBtnTipFPCR - 'Move image to Center Right'
  • textBtnTipFPBL - 'Move image to Bottom Left Corner'
  • textBtnTipFPBC - 'Move image to Bottom Center'
  • textBtnTipFPBR - 'Move image to Bottom Right Corner'