# @sanity/imagetool

> The image hotspot selector / cropper used in Sanity

Latest version **2.35.3** (published 2022-12-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @sanity/imagetool
pnpm add @sanity/imagetool
yarn add @sanity/imagetool
bun add @sanity/imagetool
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.35.3 |
| Published | 2022-12-21 |
| First published | 2016-09-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 117.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6377 |
| Author | Sanity.io |
| Maintainers | svirs, josh_sanity_io, joneidejohnsen, nina.andal, rankers, snorreeb, mattcraig, vincentquigley, stipsan, michael-sanity, rubioz, tonina, ritasdias, simeonsanity, kmelve, bjoerge, rexxars, skogsmaskin, simenss, robinpyon, mariuslundgard, sanity-io, evenw, radhe_sanity, rbotten, vicbergquist, judofyr, obliadp, dcilke, fredcarlsen, jorn_georg, hermanw, mikolajsanity, sgulseth, atombender |
| Keywords | sanity, cms, headless, realtime, content, imagetool |

## Links

- npm: https://www.npmjs.com/package/@sanity/imagetool
- Repository: https://github.com/sanity-io/sanity
- Homepage: https://www.sanity.io/
- Issues: https://github.com/sanity-io/sanity/issues
- npm.io page: https://npm.io/package/@sanity/imagetool

## Dependencies (2)

- [debug](https://npm.io/package/debug.md) ^3.2.7
- [lodash](https://npm.io/package/lodash.md) ^4.17.15

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 2.35.3 (latest) — 2022-12-21
- 2.36.6 (v2) — 2024-11-07
- 2.36.2-weighted-search.16 (weighted-search) — 2023-07-14
- 2.34.3-cdr-ga-4.23 (cdr-ga-4) — 2022-10-20
- 2.34.3-cdr-ga-2.19 (cdr-ga-2) — 2022-10-20
- 2.34.3-cdr-ga.20 (cdr-ga) — 2022-10-20
- 2.34.3-cdr-preview.20 (cdr-preview) — 2022-10-20
- 2.34.2-empty-template-cli.0 (empty-template-cli) — 2022-10-13
- 2.34.1-canary.0 (canary) — 2022-10-12
- 2.33.4-shopify.8 (shopify) — 2022-09-22
- 2.33.4-performance-opts.16 (performance-opts) — 2022-09-22
- 2.33.3-edge.8 (edge) — 2022-09-20
- 2.30.7-findability.87 (findability) — 2022-09-20
- 2.33.1-performance-opts-doc-pane.2 (performance-opts-doc-pane) — 2022-09-12
- 2.32.1-next.22 (next) — 2022-09-08
- … 734 more at https://npm.io/package/@sanity/imagetool/versions

## README

# ⚠️ THIS PACKAGE IS DEPRECATED

> This package is part of Sanity Studio v2, which has been superseded by **Sanity Studio v3**, the current major version released on Dec 7th, 2022. This package is no longer used/needed for Sanity Studio in its current version and will be retired on Dec 7th, 2023. The core packages for Sanity Studio v2 will only receive critical bug fixes until this date.
>
> Please head over to [the documentation for Sanity Studio v3](https://www.sanity.io/docs/sanity-studio) to learn more.

# The image tool used in sanity

## Getting started

    npm install --save @sanity/imagetool

## Usage

### ImageTool widget

```js
import React from 'react'
import ImageTool from '@sanity/imagetool'

class MyComponent extends React.Component {
  state = {
    value: {
      hotspot: {
        x: 0.4,
        y: 0.3,
        height: 0.6,
        width: 0.4,
      },
      crop: {
        left: 0.1,
        right: 0.2,
        top: 0.1,
        bottom: 0.21,
      },
    },
  }

  handleImageToolchange = (newValue) => {
    this.setState({value: newValue})
  }

  render() {
    return (
      <ImageTool
        src="https://c4.staticflickr.com/8/7514/16189387096_420dbca030_h.jpg"
        value={this.state.value}
        onChange={handleImageToolchange}
      />
    )
  }
}
```

## Usage

### CSS style calculator

```js
import calculateStyles from '@sanity/imagetool/calculateStyles'

const styles = calculateStyles({
  hotspot: {
    x: 0.4,
    y: 0.3,
    height: 0.6,
    width: 0.4,
  },
  crop: {
    left: 0.1,
    right: 0.2,
    top: 0.1,
    bottom: 0.21,
  },
  image: {height: 100, width: 125},
  container: {aspectRatio: 16 / 10},
  align: {
    x: 'left',
    y: 'center',
  },
})
```

returns an object with style objects that can be used with markup

```json
{
  "container": {
    "overflow": "hidden",
    "position": "relative",
    "width": "100%",
    "height": "62.5%"
  },
  "crop": {
    "position": "absolute",
    "overflow": "hidden",
    "height": "100%",
    "width": "79.26%",
    "top": "7.97%",
    "left": "17.51%"
  },
  "image": {
    "position": "absolute",
    "height": "144.93%",
    "width": "142.86%",
    "top": "-14.49%",
    "left": "-14.29%"
  },
  "padding": {
    "marginTop": "62.5%"
  }
}
```

this can then be passed to jsx markup with the following structure:

```jsx
<div style={styles.container}>
  <div style={styles.padding} />
  <div style={styles.crop}>
    <img
      src="https://c4.staticflickr.com/8/7514/16189387096_420dbca030_h.jpg"
      style={styles.image}
    />
  </div>
</div>
```

---
_Source: https://npm.io/package/@sanity/imagetool · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._