{"_id":"@agilie/canvas-image-cover-position","_rev":"19-cdcea9bebaaeffd6eb972180d40d3830","name":"@agilie/canvas-image-cover-position","description":"It's method which calculate and return size object for fill one element by another like background-size cover","dist-tags":{"latest":"1.1.1"},"versions":{"1.0.0":{"name":"@agilie/canvas-image-cover-position","version":"1.0.0","description":"It's method which calculate and return image position for fill canvas element like background-size cover","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/agilie/canvas-image-cover-position.git"},"contributors":[{"name":"Bohdan Zolotukhyn","email":"bohdan.zolotukhin@agilie.com","url":"https://github.com/fargo23"}],"keywords":["canvas","image","cover"],"bugs":{"url":"https://github.com/agilie/canvas-image-cover-position/issues"},"author":{"name":"Agilie Team","email":"info@agilie.com","url":"https://agilie.com"},"license":"MIT","gitHead":"07ca2de8e2b4d49e756be75f3f509f1f26cb6352","homepage":"https://github.com/agilie/canvas-image-cover-position#readme","_id":"@agilie/canvas-image-cover-position@1.0.0","_shasum":"dcb2b56daedb5a6a6cf3b9d78ed5b8fc45ea2272","_from":".","_npmVersion":"3.9.3","_nodeVersion":"6.2.1","_npmUser":{"name":"fargo23","email":"zolotukhin_bohdan@ukr.net"},"dist":{"shasum":"dcb2b56daedb5a6a6cf3b9d78ed5b8fc45ea2272","tarball":"https://registry.npmjs.org/@agilie/canvas-image-cover-position/-/canvas-image-cover-position-1.0.0.tgz","integrity":"sha512-gf/aMP2p7QN7OSuxdxra99+beXtSkW811Tk+oJK5ZlfpqCHpbzLeqc//aRpXBuZkMxcuNOHJc+lOSkmb7pmu2A==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKaoqwVM5DyBa26kt1VKqm6IMohwUv+9WGNIQG3cJMBQIhAOIhpgiXDzrH3bSq26uQLWtgxucKtwiYl73S6EWjSXms"}]},"maintainers":[{"name":"fargo23","email":"zolotukhin_bohdan@ukr.net"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/canvas-image-cover-position-1.0.0.tgz_1496919994429_0.36262147407978773"},"directories":{}},"1.0.1":{"name":"@agilie/canvas-image-cover-position","version":"1.0.1","description":"It's method which calculate and return image position for fill canvas element like background-size cover","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/agilie/canvas-image-cover-position.git"},"contributors":[{"name":"Bohdan Zolotukhyn","email":"bohdan.zolotukhin@agilie.com","url":"https://github.com/fargo23"}],"keywords":["canvas","image","cover"],"bugs":{"url":"https://github.com/agilie/canvas-image-cover-position/issues"},"author":{"name":"Agilie Team","email":"info@agilie.com","url":"https://agilie.com"},"license":"MIT","gitHead":"ca03a3dc5f4638ccdec9c967a7da8e697d01e115","homepage":"https://github.com/agilie/canvas-image-cover-position#readme","_id":"@agilie/canvas-image-cover-position@1.0.1","_shasum":"84e43aa451a271a5479ebc09a53f0f2bfdbcd308","_from":".","_npmVersion":"3.9.3","_nodeVersion":"6.2.1","_npmUser":{"name":"fargo23","email":"zolotukhin_bohdan@ukr.net"},"dist":{"shasum":"84e43aa451a271a5479ebc09a53f0f2bfdbcd308","tarball":"https://registry.npmjs.org/@agilie/canvas-image-cover-position/-/canvas-image-cover-position-1.0.1.tgz","integrity":"sha512-hZTnZj8dEjmNL6pae78MrqU5ufaobSjob2xr39h8O5whBJK8rU+YjUg5+GymzN/8y1mAscjqjN0cDO+/xCWHKQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChklHXTBZB2ee4SABVT8Z+8qkyZu52alTYtiM8ibugzgIhALocpyAI83sdBGdoQCUmNpQpc6g5DYaN5GZ8xnuUL0e6"}]},"maintainers":[{"name":"fargo23","email":"zolotukhin_bohdan@ukr.net"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/canvas-image-cover-position-1.0.1.tgz_1496920683722_0.5164064550772309"},"directories":{}},"1.0.2":{"name":"@agilie/canvas-image-cover-position","version":"1.0.2","description":"It's method which calculate and return image position for fill canvas element like background-size cover","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/agilie/canvas-image-cover-position.git"},"contributors":[{"name":"Bohdan Zolotukhyn","email":"bohdan.zolotukhin@agilie.com","url":"https://github.com/fargo23"}],"keywords":["canvas","image","cover"],"bugs":{"url":"https://github.com/agilie/canvas-image-cover-position/issues"},"author":{"name":"Agilie Team","email":"info@agilie.com","url":"https://agilie.com"},"license":"MIT","gitHead":"f568cff7a0c8632758f52d3df6af25046cd84b63","homepage":"https://github.com/agilie/canvas-image-cover-position#readme","_id":"@agilie/canvas-image-cover-position@1.0.2","_shasum":"f6639a66b42518ddfef3c0c345fda06f895fae35","_from":".","_npmVersion":"3.9.3","_nodeVersion":"6.2.1","_npmUser":{"name":"fargo23","email":"zolotukhin_bohdan@ukr.net"},"dist":{"shasum":"f6639a66b42518ddfef3c0c345fda06f895fae35","tarball":"https://registry.npmjs.org/@agilie/canvas-image-cover-position/-/canvas-image-cover-position-1.0.2.tgz","integrity":"sha512-TEGTVp9BJOU7RinR3Kd99UqBurwx5ZKfUz6RAfp5oUVJ9FRPHg4rO/DQLxg6Vr8811GdUo2F0Qboj62V4DVzDQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHwxYF1a0elPNOqeHvIR8n0zLMlKhd/sycwHWmT/lcn6AiAzW4sZUpxXeY6ygYQUq8CsRaChqxy8BANMCAzKbCbr/g=="}]},"maintainers":[{"name":"fargo23","email":"zolotukhin_bohdan@ukr.net"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/canvas-image-cover-position-1.0.2.tgz_1496921414909_0.8029500476550311"},"directories":{}},"1.0.3":{"name":"@agilie/canvas-image-cover-position","version":"1.0.3","description":"It's method which calculate and return image position for fill canvas element like background-size cover","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/agilie/canvas-image-cover-position.git"},"contributors":[{"name":"Bohdan Zolotukhyn","email":"bohdan.zolotukhin@agilie.com","url":"https://github.com/fargo23"}],"keywords":["canvas","image","cover"],"bugs":{"url":"https://github.com/agilie/canvas-image-cover-position/issues"},"author":{"name":"Agilie Team","email":"info@agilie.com","url":"https://agilie.com"},"license":"MIT","gitHead":"f0afe2c375e23b21bcf865d322fae6f7265dc24d","homepage":"https://github.com/agilie/canvas-image-cover-position#readme","_id":"@agilie/canvas-image-cover-position@1.0.3","_shasum":"c019953bb20e496c5bf2bdcd51e217661cdbf7f9","_from":".","_npmVersion":"3.9.3","_nodeVersion":"6.2.1","_npmUser":{"name":"fargo23","email":"zolotukhin_bohdan@ukr.net"},"dist":{"shasum":"c019953bb20e496c5bf2bdcd51e217661cdbf7f9","tarball":"https://registry.npmjs.org/@agilie/canvas-image-cover-position/-/canvas-image-cover-position-1.0.3.tgz","integrity":"sha512-1zsIR8zUjx5pUoIbn+7x8w62VJo23IdcU0I6uP4Ht8urFZ7swHB1O0ABfRuX/6L5w8EZsXise2boho0D9ptNuQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICwJPWygRPu60mEA323Ku273DejIuyolE0G+6P4akr7uAiBFteLNjRHLT+KLjGaphvXUtHYGcCl4lEMyMt9VqWyARQ=="}]},"maintainers":[{"name":"fargo23","email":"zolotukhin_bohdan@ukr.net"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/canvas-image-cover-position-1.0.3.tgz_1496925356242_0.8698451698292047"},"directories":{}},"1.1.0":{"name":"@agilie/canvas-image-cover-position","version":"1.1.0","description":"It's method which calculate and return size object for fill one element by another like background-size cover","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/agilie/canvas-image-cover-position.git"},"contributors":[{"name":"Agilie Team","email":"info@agilie.com","url":"https://github.com/agilie"}],"keywords":["canvas","image","cover","video"],"bugs":{"url":"https://github.com/agilie/canvas-image-cover-position/issues"},"author":{"name":"Agilie Team","email":"info@agilie.com","url":"https://agilie.com"},"license":"MIT","gitHead":"bfb141f58dac16ada0425cdf4b9baf89c698e4f7","homepage":"https://github.com/agilie/canvas-image-cover-position#readme","_id":"@agilie/canvas-image-cover-position@1.1.0","_nodeVersion":"10.12.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-EHqBNQ08eNCB0MRkZ1/SV9LwR2ZuRwkH+NLx/HXVFg73a9A6xGcX/7u8e5AGaGiMQvdWOi8aQUDu3srD0b+GfA==","shasum":"af98c68e04d7072cca9f1c116385406a8c1b0086","tarball":"https://registry.npmjs.org/@agilie/canvas-image-cover-position/-/canvas-image-cover-position-1.1.0.tgz","fileCount":4,"unpackedSize":5514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcvtAxCRA9TVsSAnZWagAAQY4P/1n3Mu8nJJMv59BJyEyn\nM+YYXvq/ZJh2aT5PywqBo/pSqI7rEUDwROa+M7qmf2KeqXMday2cPHJlwQAn\nEBInt25Nsqc7J4JMxgqYnHbzOCiqn/yRop3XfIVsDPRyNsYitLmqvj6q333j\nwM0mnx3g19o3tZXngQqBRe6K664nqvW/YiYGU23H/81yQk0r443x+4vIbZyB\ni1GJ+wosaeB08CTBsVEdnM1f6FGQqAaF468vFF4LXgeOLvwhJKW4kTwhPog3\nGuRm7KocTu16p3HhI1gV93aujFAZYG9dbpiHy+13rKi2C4gfOPOnAf+VEqys\n91W8sBnrSLXCqpvWlh/IOlhFoVQv/MYIKRBcT3PaAMK3I0S6aSm1yRLynto+\nB7M2BNJKq4K6+iGwZbULWDyXOEbuxXrV/8EaiQkDK05mlptg6cgCUhtFDsJe\nM8Fzi12dPSaNWwak2dDqxqrPaoOPfNl3mUtewUwzouSpO4RpwCfE9iE4EYYd\nN0PKu1ZNONcR/EOfiDm002bK9T3vI1SoD6RibbADpn0XCw18Fo+Bz0QzQ17L\nKj/SVtV5T+8hCD5MKbDg0Ns9xd155XIsF2ykTqtqgPLDpIH0NEx/KHsV5BaZ\n1etBaZcY5nRcK1sooD1MJHS+JcWtLxI8wuO2eLJYaWyZ+TRX2ohZwQ9FZWUz\nWYoE\r\n=uSoL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJVELBiPt5iR31G+KsFm/8ynUL5k5QE/ow4ABx1R4PQQIhAMNcFeLqMS1hLa4rdLzpefOqURLj/kLSkPKbgkdQegKe"}]},"maintainers":[{"email":"web@agilie.com","name":"agilie-admin"},{"email":"zolotukhin_bohdan@ukr.net","name":"fargo23"}],"_npmUser":{"name":"fargo23","email":"bohdan.zolotukhin@agilie.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/canvas-image-cover-position_1.1.0_1556009008896_0.08550726674664166"},"_hasShrinkwrap":false},"1.1.1":{"name":"@agilie/canvas-image-cover-position","version":"1.1.1","description":"It's method which calculate and return size object for fill one element by another like background-size cover","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/agilie/canvas-image-cover-position.git"},"contributors":[{"name":"Agilie Team","email":"info@agilie.com","url":"https://github.com/agilie"}],"keywords":["canvas","image","cover","video"],"bugs":{"url":"https://github.com/agilie/canvas-image-cover-position/issues"},"author":{"name":"Agilie Team","email":"info@agilie.com","url":"https://agilie.com"},"license":"MIT","gitHead":"c4468a7c0afd9436f842c7fb92c7e4244ffbd776","homepage":"https://github.com/agilie/canvas-image-cover-position#readme","_id":"@agilie/canvas-image-cover-position@1.1.1","_nodeVersion":"10.12.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-P+Z8p+Kc6j0eHS9WnU40aOg+pcY6Can/92mWOAGj0ewlUe6ywnOR4/O5V7rctKqbsfXBbpPw4H5IzH9eoP6Gpw==","shasum":"e986a2607dc164d87d11dc452799169f1b1ad06d","tarball":"https://registry.npmjs.org/@agilie/canvas-image-cover-position/-/canvas-image-cover-position-1.1.1.tgz","fileCount":4,"unpackedSize":5638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcvtG8CRA9TVsSAnZWagAARDEP/20tnnhdxTJHBlDKlhoA\nnkXkFdVLWiDDj9NZQx7S2Q33OnulZfkptvHldMRtt3aXS4+txTN5ClyDUy+w\nds9wGshQqOwJKoOmvNBM8irkKlZXMOk3mTuaCm96hOCn3+EeZ3nN4H0nuodc\nxaXU08m8H+0KAOwOeu0cyw45rDl7qqWWTFVyjfXXcyU0bgAujkZEo2QImCpn\nYmYx/pFUjYn0AvOWXUf2m0R/2MmhMKXwoy8sFLYm9lp2/O/MHTsZJTwihRbu\n0A4qb+uwQyqf3BXfdOohfqKbLbLDVhQS8gEcpvXjiYitVE79Cmlujo19tAfA\n1Ww6Diz1TAJ3nalGKqPDyLIOUdxZM4cE4KMYlK2MG/GBLfrPSl9+FyaaWQ25\n2luXYn5QLwHEDazWJeWOzkx1ROgCfXJZzUXjF1JXY5hDWHPo3/y6VFDOzlIU\nuLUdMBovJjBXxVoSa1raksqaM7TBVPiSYARdkEeFKTzgd1SF0wl1HtX4IF7K\nN1UkVXgSP10tsU1ap3yvd+n7GVwBp00iurVF8Npbj2uc3JJahHASrjsDuDsL\nKUOEGfddo8tUMl2g4kFLr9o+gXK6FaIHL81x8pYjli7XlhjAaSCR9pT32W53\neDn1MDbrA1u+cLLBywCQvFwyUmYVD93OQVQwGCvxxN4VvXAYSFVpxqMZFRPF\nWEYr\r\n=zECO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAG2OWgDThpXdlIzQlgGPAImre9/MKIG6BFLaOdCQZ8ZAiAWPwHRak72bId52Kt6/4kz1P7OlbyjSag3e+h6zDY7zQ=="}]},"maintainers":[{"email":"web@agilie.com","name":"agilie-admin"},{"email":"zolotukhin_bohdan@ukr.net","name":"fargo23"}],"_npmUser":{"name":"fargo23","email":"bohdan.zolotukhin@agilie.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/canvas-image-cover-position_1.1.1_1556009403573_0.953400749549806"},"_hasShrinkwrap":false}},"readme":"[![License](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/agilie/canvas-image-cover-position)\n\n# Calculate cover size\nThis 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;'\n\n![Preview](img/Image.png)\n![Preview](img/Image_cover.png)\n```typescript\ninterface CoverSize = {\n    width: number;\n    height: number;\n    offsetLeft: number;\n    offsetTop: number;\n}\n\ntype getCoverSize = (\n    contentWidth: number,\n    contentHeight: number,\n    containerWidth: number,\n    containerHeight: number,\n    offsetLeft: number = 0.5, \n    offsetTop: number = 0.5) => CoverSize\n```\nOffsets values are in range between 0 an 1\n## Installation \nJust add file or function to your project\n\n```html\n<script src=\"https://unpkg.com/@agilie/canvas-image-cover-position\"></script>\n```\n\n**or**\n\n```bash\n$ npm install @agilie/canvas-image-cover-position\n```\n## How to use\n```javascript\nimport getCoverSize from '@agilie/canvas-image-cover-position'\n\nvar imageCoverSize = getCoverSize(\n    image.naturalWidth,\n    image.naturalHeight,\n    canvas.width,\n    canvas.height,\n    0.5,\n    0.5\n);\ncanvas.getContext('2d').drawImage(\n    image,\n    imageCoverSize.offsetLeft,\n    imageCoverSize.offsetTop,\n    imageCoverSize.width,\n    imageCoverSize.height\n);\n```\n<a href=\"https://agilie.github.io/canvas-image-cover-position/\" style=\"font-size: 20px\" target=\"_blank\">demo</a>\n\n## Troubleshooting\nProblems? Check the [Issues](https://github.com/agilie/canvas-image-cover-position/issues) block \nto find the solution or create an new issue that we will fix asap. Feel free to contribute.\n\n## Author\nThis method is open-sourced by [Agilie Team](https://www.agilie.com) <info@agilie.com>\n\n## Contributors\n[Agilie Team](https://github.com/agilie)\n\n## Contact us\nIf you have any questions, suggestions or just need a help with web or mobile development, please email us at <web@agilie.com>. You can ask us anything from basic to complex questions. \n\nWe will continue publishing new open-source projects. Stay with us, more updates will follow!\n\n## License\nThe [MIT](LICENSE) License (MIT) Copyright © 2019 [Agilie Team](https://www.agilie.com)\n","maintainers":[{"email":"sergey.mell@agilie.com","name":"sergey.mell"},{"email":"web@agilie.com","name":"agilie-admin"}],"time":{"modified":"2022-06-12T14:22:18.665Z","created":"2017-06-08T11:06:35.259Z","1.0.0":"2017-06-08T11:06:35.259Z","1.0.1":"2017-06-08T11:18:05.433Z","1.0.2":"2017-06-08T11:30:15.876Z","1.0.3":"2017-06-08T12:35:57.272Z","1.1.0":"2019-04-23T08:43:29.037Z","1.1.1":"2019-04-23T08:50:03.749Z"},"homepage":"https://github.com/agilie/canvas-image-cover-position#readme","keywords":["canvas","image","cover","video"],"repository":{"type":"git","url":"git+https://github.com/agilie/canvas-image-cover-position.git"},"contributors":[{"name":"Agilie Team","email":"info@agilie.com","url":"https://github.com/agilie"}],"author":{"name":"Agilie Team","email":"info@agilie.com","url":"https://agilie.com"},"bugs":{"url":"https://github.com/agilie/canvas-image-cover-position/issues"},"license":"MIT","readmeFilename":"README.md"}