Skip to content

agilie/canvas-image-cover-position

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

License

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 Preview

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

<script src="https://unpkg.com/@agilie/canvas-image-cover-position"></script>

or

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

How to use

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 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 [email protected]

Contributors

Agilie Team

Contact us

If you have any questions, suggestions or just need a help with web or mobile development, please email us at [email protected]. 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 (MIT) Copyright © 2019 Agilie Team