# rect-crop

> Crop a dimension in a viewport: Compute a rectangle from a zoom ratio and a center point while preserving the dimension ratio.

Latest version **0.0.0** (published 2014-10-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install rect-crop
pnpm add rect-crop
yarn add rect-crop
bun add rect-crop
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.0 |
| Published | 2014-10-05 |
| First published | 2014-10-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Gaëtan Renaudeau |
| Maintainers | gre |
| Keywords | rect, rectangle, 2d, crop, bound, ratio |

## Links

- npm: https://www.npmjs.com/package/rect-crop
- Repository: https://github.com/gre/rect-crop
- Issues: https://github.com/gre/rect-crop/issues
- npm.io page: https://npm.io/package/rect-crop

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 0.0.0 (latest) — 2014-10-05

## README

rect-crop
===

Crop a dimension in a viewport: Compute a rectangle from a zoom ratio and a center point while preserving the dimension ratio.

The API
---

```javascript
var rect = rectCrop(zoom, center)(viewport, dimension)
```

`rectCrop` computes an absolute Rectangle from relative parameters:
- **`zoom`**: a value in range ]0,1] which describe the crop zoom ratio. 1 is the full dimension size.
- **`center`** *(default to [0.5, 0.5])*: a [w,h] array where w and h are value in range [0,1] describing the desired center of the crop bound.

second parameters:
- **`viewport`**: a object with width and height which is the viewport rectangle (e.g: you can give a Canvas).
- **`dimension`**: an object with width and height which is the rectangle dimension to be cropped on the viewport (e.g: you can give an Image).

The crop will ensure that dimension ratio is preserved.

Returns
---
a `[x, y, width, height]` rectangle describing the area to crop in pixels.

Example
---

The following creates cropping functions:

```javascript
rectCrop.largest == rectCrop(1) == rectCrop(1, [0.5, 0.5]) // The largest possible crop.
rectCrop(0.5) // A 2x zoomed crop
rectCrop(0.5, [0, 0.5]) // A 2x zoomed crop showing the left-middle part of a rectangle.
```

**Typical usage:**

```javascript
var cropHalfCenter = rectCrop(0.5);
var rect = cropHalfCenter(canvas, image);
ctx.drawImage.apply(ctx, [ image ].concat(rect).concat([ 0, 0, canvas.width, canvas.height ]));
```

**Other usage:**

```javascript
var rect = rectCrop(0.3, [0.2, 0.8])({width:800,height:600}, {width:4000,height:3000});
// rect == [ 200, 1950, 1200, 900 ]

var rect2 = rectCrop(0.1, [0, 0])({width:800,height:600}, {width:4000,height:3000});
// rect2 == [ -200, -150, 400, 300 ]
```

Note that this enable out of bounds crop.
If you want to do not crop out of bounds parts, use `rect-clamp`:

```javascript
rectClamped = rectClamp(rect2);
// rectClamped == [ 0, 0, 400, 300 ]
```

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