### Development Environment Setup

Source: https://github.com/jwagner/smartcrop.js/blob/main/CONTRIBUTING.md

Instructions for setting up the smartcrop.js development environment. Requires Node.js and Git. Includes cloning the repository, installing global tools like Grunt, and installing project dependencies.

```shell
git clone
cd normalmap.js
npm install -g grunt jshint jscs
npm install
grunt
```

--------------------------------

### Minimal Smartcrop.js Example

Source: https://github.com/jwagner/smartcrop.js/blob/main/examples/minimal.html

This example demonstrates loading an image, performing an automatic crop using smartcrop.js with defined width and height options, and then displaying the cropped image. It relies on the browser's Image API and the smartcrop.js library.

```javascript
img { width: 320px; }

function loadImage(src) {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.onload = () => resolve(image);
    image.onerror = e => reject(new Error(e));
    image.src = src;
  });
}

async function main() {
  const src = 'images/unsplash/makhmutova-dina-1580313-unsplash.jpg';
  const options = {
    width: 100,
    height: 100
  };
  const image = await loadImage(src);
  const crops = await smartcrop.crop(image, options);
  console.log('crops', crops);
  showCroppedImage(src, crops.topCrop, options)
}

function showCroppedImage(src, crop, options) {
  const div = document.createElement('div');
  const style = div.style;
  style.backgroundImage = `url('${src}')`;
  const scale = options.width / crop.width;
  style.backgroundPositionX = crop.x * scale + 'px';
  style.backgroundPositionY = -crop.y * scale + 'px';
  style.backgroundSize = '100%';
  style.width = options.width + 'px';
  style.height = options.height + 'px';
  document.body.appendChild(div);
}

main();
```

--------------------------------

### Install Smartcrop.js via npm

Source: https://github.com/jwagner/smartcrop.js/blob/main/README.md

Provides the command to install the smartcrop.js library using npm, the Node Package Manager. This is the standard way to add the library to a Node.js project or for use in browserify/webpack builds.

```bash
npm install smartcrop
```

--------------------------------

### Mocha Test Setup and Execution

Source: https://github.com/jwagner/smartcrop.js/blob/main/test/index.html

This snippet configures the Mocha testing framework with the 'bdd' interface, sets up Chai's expect assertion library, and then executes the tests. It includes commented-out lines for leak checking and global variable monitoring.

```javascript
mocha.setup('bdd');
window.expect = chai.expect;
// mocha.checkLeaks();
// mocha.globals(['jQuery', 'LiveReload', '__screenCapturePageContext__']);
mocha.run();
```

--------------------------------

### Crop Image with Smartcrop.js

Source: https://github.com/jwagner/smartcrop.js/blob/main/README.md

Demonstrates how to use the smartcrop.js library to find the best crop for a given image. It takes an image object and desired crop dimensions, returning a Promise that resolves with the crop coordinates.

```javascript
smartcrop.crop(image, { width: 100, height: 100 }).then(function(result) {
  console.log(result);
});
```

--------------------------------

### Smartcrop.js Crop Output

Source: https://github.com/jwagner/smartcrop.js/blob/main/README.md

Illustrates the expected output format from the smartcrop.js library after processing an image. The result object contains the calculated 'topCrop' with x, y, width, and height properties.

```javascript
{topCrop: {x: 300, y: 200, height: 200, width: 200}}
```

--------------------------------

### Smartcrop.js API: Crop Function

Source: https://github.com/jwagner/smartcrop.js/blob/main/README.md

The main API function to find the best crop for an image. It takes an image source and an options object, returning a promise that resolves with the crop result. Supports various image input types and offers extensive configuration for cropping behavior.

```APIDOC
smartcrop.crop(image, options)

  Find the best crop for _image_ using _options_.

  Parameters:
    image: anything ctx.drawImage() accepts, usually HTMLImageElement, HTMLCanvasElement or HTMLVideoElement.
      Note: Origin policies apply to the image source. Cross-domain images require CORS clearance.
    options: [cropOptions](#cropOptions)

  Returns:
    A promise for a [cropResult](#cropResult).

  cropOptions:
    minScale: minimal scale of the crop rect, set to 1.0 to prevent smaller than necessary crops.
    width: width of the crop you want to use.
    height: height of the crop you want to use.
    boost: optional array of regions whose 'interestingness' you want to boost (e.g., faces).
    ruleOfThirds: optional boolean; if false, turns off the rule of thirds composition weight.
    debug _(internal)_: if true, cropResults will contain a debugCanvas and the complete results array.
    Note: Many more undocumented options are available in the source.

  cropResult:
    topCrop: a [crop](#crop) object.

  crop:
    x: number // pixels from the left side
    y: number // pixels from the top
    width: number // pixels
    height: number // pixels

  boost:
    x: number // pixels from the left side
    y: number // pixels from the top
    width: number // pixels
    height: number // pixels
    weight: number // in the range [0, 1]
      Note: The impact of boost is proportional to its weight and area.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.