react-avatar-edit - npm Package Compare versions

Comparing version 0.9.0 to 1.0.0

package.json

 {
   "name": "react-avatar-edit",
-  "version": "0.9.0",
+  "version": "1.0.0",
   "description": "ReactJS component to upload, crop, and preview avatars",
@@ -10,3 +10,3 @@ "main": "lib/react-avatar.js",
     "build": "webpack --config webpack.prod.js --optimize-minimize",
-    "build:example": "webpack --config webpack.example.js --optimize-minimize"
+    "build:example": "webpack --config webpack.example.js"
   },
@@ -19,3 +19,3 @@ "repository": {
     "name": "Kirill Novikov",
-    "email": "[e-mail]"
+    "email": "[e-mail]"
   },
@@ -38,3 +38,3 @@ "license": "MIT",
   "devDependencies": {
-    "@babel/cli": "^7.11.6",
+    "@babel/cli": "^7.13.10",
     "@babel/core": "^7.11.6",
@@ -46,12 +46,12 @@ "@babel/plugin-proposal-class-properties": "^7.10.4",
     "babel-loader": "^8.1.0",
-    "compression-webpack-plugin": "1.1.11",
-    "html-webpack-plugin": "3.2.0",
+    "compression-webpack-plugin": "^7.1.2",
+    "html-webpack-plugin": "5.3.1",
     "react": "16.8.3",
     "react-dom": "16.8.3",
     "rollup-webpack-loader": "1.0.0",
-    "uglifyjs-webpack-plugin": "1.2.5",
-    "webpack": "^4.44.2",
-    "webpack-bundle-analyzer": "2.13.1",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0"
+    "uglifyjs-webpack-plugin": "2.2.0",
+    "webpack": "^5.24.4",
+    "webpack-bundle-analyzer": "^4.4.0",
+    "webpack-cli": "4.5.0",
+    "webpack-dev-server": "3.11.2"
   },
@@ -58,0 +58,0 @@ "peerDependencies": {

README.md

@@ -99,2 +99,6 @@ # react-avatar
 | onClose()              | Function         | Invoked when user clicks on close editor button
+| exportAsSquare         | Boolean          | The exported image is a square and the circle is not cut-off from the image
+| exportSize             | Number           | The size the exported image should have (width and height equal). The cropping will be made on the original image to ensure a high quality. Only supported when using "exportAsSquare"
+| exportMimeType         | String           | The mime type that should be used to export the image, supported are: image/jpeg, image/png (Default: image/png)
+| exportQuality          | Number           | The quality that should be used when exporting in image/jpeg. A value between 0.0 and 1.0.
 
@@ -101,0 +105,0 @@ ## Contributing

src/avatar.d.ts

@@ -93,2 +93,26 @@ // Type definitions for react-avatar 0.5.9
   /**
+   * When set to true the returned data for onCrop is a square instead of a circle.
+   * Default: false
+   */
+  exportAsSquare?: boolean;
+
+  /**
+   * The number of pixels width/height should have on the exported image.
+   * Default: original size of the image
+   */
+  exportSize?: number;
+
+  /**
+   * The mime type used to generate the data param for onCrop
+   * Default: image/png
+   */
+  exportMimeType?: string;
+
+  /**
+   * The quality used to generate the data param for onCrop, only relevant for image/jpeg as exportMimeType
+   * Default: 1.0
+   */
+  exportQuality?: number;
+
+  /**
    * Label text
@@ -95,0 +119,0 @@ * Default: Choose a file

src/avatar.jsx

@@ -23,2 +23,6 @@ import React from 'react'
     mimeTypes: 'image/jpeg,image/png',
+    exportAsSquare: false,
+    exportSize: undefined,
+    exportMimeType: 'image/png',
+    exportQuality: 1.0,
     mobileScaleSpeed: 0.5, // experimental
@@ -284,9 +288,38 @@ onClose: () => {
 
-    const getPreview = () => crop.toDataURL({
-      x: crop.x() - crop.radius(),
-      y: crop.y() - crop.radius(),
-      width: crop.radius() * 2,
-      height: crop.radius() * 2
-    });
+    const getPreview = () => {
+      if(this.props.exportAsSquare) {
+        const fullSizeImage = new Konva.Image({ image: this.image });
+        const xScale = fullSizeImage.width() / background.width();
+        const yScale = fullSizeImage.height() / background.height();
 
+        const width = crop.radius() * 2 * xScale;
+        const height = crop.radius() * 2 * yScale;
+        const pixelRatio = this.props.exportSize ? this.props.exportSize / width : undefined;
+
+        return fullSizeImage.toDataURL({
+          x: (crop.x() - crop.radius()) * xScale,
+          y: (crop.y() - crop.radius())  * yScale,
+          width,
+          height,
+          pixelRatio,
+          mimeType: this.props.exportMimeType,
+          quality: this.props.exportQuality
+        });
+      } else {
+        const width = crop.radius() * 2;
+        const height = crop.radius() * 2;
+        const pixelRatio = this.props.exportSize ? this.props.exportSize / width : undefined;
+
+        return crop.toDataURL({
+          x: crop.x() - crop.radius(),
+          y: crop.y() - crop.radius(),
+          width,
+          height,
+          pixelRatio,
+          mimeType: this.props.exportMimeType,
+          quality: this.props.exportQuality
+        });
+      }
+    };
+
     const onScaleCallback = (scaleY) => {
@@ -293,0 +326,0 @@ const scale = scaleY > 0 || isNotOutOfScale(scaleY) ? scaleY : 0;

New alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 2 instances in 1 package

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

221592

0.54%

Number of package files

9

28.57%

Number of low quality alerts

1

-50%

Number of lines in readme file

108

3.85%

Worsened metrics

Number of low license alerts

2

Infinity%

License quality

80

-20%

Lines of code

613

-14.86%

No dependency changes