@agilie/canvas-image-cover-position - npm Package Compare versions

Comparing version 1.0.3 to 1.1.0

index.js

@@ -1,37 +0,38 @@
-/*
- * By Bohdan Zolotukhyn
- * 
- * A1,B1 = imgNaturalWidth,imgNaturalHeight - images natural width and height
- * A2,B2 = canvasWidth,canvasHeight - canvas width and height
- * A3,B3 - proportional values of the output image
- * offsetLeft - left offset in percent equal to background-position-x. Range(0-1)
- * offsetTop - top offset in percent equal to background-position-y. Range(0-1)
- *
- * If the offsets are not specified, the image is centered
- * var imagePosition = canvasImageCoverPosition(image.naturalWidth, image.NaturalHeight , canvas.width, canvas.height, [offsetLeft, offsetTop])
- * canvas.getContext('2d')
-   .drawImage(image, imagePosition.offsetLeft, imagePosition.offsetTop, imagePosition.width, imagePosition.height);
-*/
-function canvasImageCoverPosition (imgNaturalWidth, imgNaturalHeight , canvasWidth, canvasHeight, offsetLeft, offsetTop) {
-    var A1,A2,A3,B1,B2,B3,dA,dB;
-    offsetLeft = offsetLeft || 0.5;
-    offsetTop = offsetTop || 0.5;
-    A1 = imgNaturalWidth;
-    A2 = canvasWidth;
-    dA = A2 - A1;
-    B1 = imgNaturalHeight;
-    B2 = canvasHeight;
-    dB = B2 - B1;
-    if (dA < dB) {
-      B3 = B2;
-      A3 = A1 + (A1 * ((dB * 100) / B1)) / 100;
-    }
+
+// The MIT License (MIT) Copyright © 2019 Agilie Team https://www.agilie.com/
+
+;(function webpackUniversalModuleDefinition(root, factory) {
+    if(typeof exports === 'object' && typeof module === 'object')
+        module.exports = factory();
+    else if(typeof define === 'function' && define.amd)
+        define([], factory);
+    else if(typeof exports === 'object')
+        exports["getCoverSize"] = factory();
     else {
-      A3 = A2;
-      B3 = B1 + (B1 * ((dA * 100) / A1)) / 100;
+        root["canvasImageCoverPosition"] = root["getCoverSize"] = factory();
     }
-    return {width: A3, height:B3, offsetLeft: round((A2 - A3) * offsetLeft), offsetTop: round((B2 - B3) * offsetTop)};
-    function round(v) {
-      return (+(v >= 0) || -1) * Math.round(Math.abs(v));
-    }
-}
+})(window, function() {
+    return (function (contentWidth, contentHeight, containerWidth, containerHeight, offsetLeft, offsetTop) {
+            var contentRatio = contentWidth / contentHeight;
+            var containerRatio = containerWidth / containerHeight;
+            var resultHeight;
+            var resultWidth;
+            offsetLeft = typeof offsetLeft === 'undefined' ? 0.5 : offsetLeft;
+            offsetTop = typeof offsetTop === 'undefined' ? 0.5 : offsetTop;
+            if (contentRatio > containerRatio) {
+                resultHeight = containerHeight;
+                resultWidth = containerHeight * contentRatio;
+            }
+            else {
+                resultWidth = containerWidth;
+                resultHeight = containerWidth / contentRatio;
+            }
+            return {
+                width: resultWidth,
+                height: resultHeight,
+                offsetLeft:(containerWidth - resultWidth) * offsetLeft,
+                offsetTop: (containerHeight - resultHeight) * offsetTop
+            };
+        });
+});
+

package.json

 {
   "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",
+  "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",
@@ -14,3 +14,3 @@ "scripts": {
   "contributors": [
-    "Bohdan Zolotukhyn <[e-mail]> (https://github.com/fargo23)"
+    "Agilie Team <[e-mail]> (https://github.com/agilie)"
   ],
@@ -20,3 +20,4 @@ "keywords": [
     "image",
-    "cover"
+    "cover",
+    "video"
   ],
@@ -23,0 +24,0 @@ "bugs": {

README.md

@@ -0,20 +1,25 @@
+[![License](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/agilie/canvas-image-cover-position)
 
-# Canvas image cover position
-This method is helpful for calculating image position for fitting canvas element. A behavior is same as css property 'background-size: cover;'
+# 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)
-```javascript
-canvasImageCoverPosition(
-imageNaturalWidth,
-imageNaturalHeight,
-canvasWidth,
-canvasHeight,
-[offsetLeft, offsetTop]
-)
+```typescript
+type getCoverSize = (
+    contentWidth:number,
+    contentHeight:number,
+    containerWidth:number,
+    containerHeight:number,
+    offsetLeft:number = 0.5, 
+    offsetTop:number = 0.5) => void
 ```
-If the offsets are not specified, the image is centered
+Offsets values are in range between 0 an 1
 ## Installation 
 Just add file or function to your project
 
+```html
+<script src="https://unpkg.com/@agilie/canvas-image-cover-position"></script>
+```
+
 **or**
@@ -27,27 +32,38 @@
 ```javascript
-var imagePosition = canvasImageCoverPosition(
-image.naturalWidth,
-image.NaturalHeight,
-canvas.width,
-canvas.height,
-0.5,
-0.5
-)
+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,
-imagePosition.offsetLeft,
-imagePosition.offsetTop,
-imagePosition.width,
-imagePosition.height
+    image,
+    imageCoverSize.offsetLeft,
+    imageCoverSize.offsetTop,
+    imageCoverSize.width,
+    imageCoverSize.height
 );
 ```
 <a href="https://agilie.github.io/canvas-image-cover-position/" style="font-size: 20px" target="_blank">demo</a>
+
 ## 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) <[e-mail]>
+
 ## Contributors
-[Bohdan Zolotukhyn](https://github.com/fargo23)
+[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 <[e-mail]>. 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 © 2017 [Agilie Team](https://www.agilie.com)
+The [MIT](LICENSE) License (MIT) Copyright © 2019 [Agilie Team](https://www.agilie.com)

No alert changes

Improved metrics

Total package byte prevSize

5514

increased by11.53%

Number of lines in readme file

69

increased by30.19%

Worsened metrics

Number of package files

4

decreased by-20%

Lines of code

35

decreased by-5.41%

No dependency changes