https://github.com/agilie/canvas-image-cover-position

Calculating image position for scaling it on the canvas.
https://github.com/agilie/canvas-image-cover-position

background-image canvas cover image javascript size-calculation

Last synced: 5 days ago
JSON representation

Calculating image position for scaling it on the canvas.

• Host: GitHub
• URL: https://github.com/agilie/canvas-image-cover-position
• Owner: agilie
• License: mit
• Created: 2017-06-08T10:07:02.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2020-06-08T23:55:28.000Z (over 4 years ago)
• Last Synced: 2024-11-06T05:51:35.535Z (8 days ago)
• Topics: background-image, canvas, cover, image, javascript, size-calculation
• Language: HTML
• Homepage: https://agilie.com
• Size: 199 KB
• Stars: 40
• Watchers: 8
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![License](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/agilie/canvas-image-cover-position)

# Calculate cover size

This method is helpful for calculating size and position of one element to fill another element. A behavior is the same as css property 'background-size: cover;'

![Preview](img/Image.png)

![Preview](img/Image_cover.png)

```typescript

interface CoverSize = {

    width: number;

    height: number;

    offsetLeft: number;

    offsetTop: number;

}

type getCoverSize = (

    contentWidth: number,

    contentHeight: number,

    containerWidth: number,

    containerHeight: number,

    offsetLeft: number = 0.5, 

    offsetTop: number = 0.5) => CoverSize

```

Offsets values are in range between 0 an 1

## Installation 

Just add file or function to your project

```html

```

**or**

```bash

$ npm install @agilie/canvas-image-cover-position

```

## How to use

```javascript

import getCoverSize from '@agilie/canvas-image-cover-position'

var imageCoverSize = getCoverSize(

    image.naturalWidth,

    image.naturalHeight,

    canvas.width,

    canvas.height,

    0.5,

    0.5

);

canvas.getContext('2d').drawImage(

    image,

    imageCoverSize.offsetLeft,

    imageCoverSize.offsetTop,

    imageCoverSize.width,

    imageCoverSize.height

);

```

demo

## Troubleshooting

Problems? Check the [Issues](https://github.com/agilie/canvas-image-cover-position/issues) block 

to find the solution or create an new issue that we will fix asap. Feel free to contribute.

## Author

This method is open-sourced by [Agilie Team](https://www.agilie.com) 

## Contributors

[Agilie Team](https://github.com/agilie)

## Contact us

If you have any questions, suggestions or just need a help with web or mobile development, please email us at . You can ask us anything from basic to complex questions. 

We will continue publishing new open-source projects. Stay with us, more updates will follow!

## License

The [MIT](LICENSE) License (MIT) Copyright © 2019 [Agilie Team](https://www.agilie.com)