kirill3333 / react-avatar Goto Github PK

Gatsby build gives window is not defined error.

5:12:37 PM: error #95312 ReferenceError: window is not defined
5:12:37 PM: "window" is not available during server side rendering.
5:12:37 PM: See our docs page for more info on this error: https://gatsby.dev/debug-html
5:12:37 PM: 
5:12:37 PM:   ReferenceError: window is not defined
5:12:37 PM:   
5:12:37 PM:   - render-page.js:117315 Object../node_modules/react-avatar-edit/lib/react-avat    ar.js
5:12:37 PM:     /opt/build/repo/public/render-page.js:117315:93
5:12:37 PM:   
5:12:37 PM:   - render-page.js:30 __webpack_require__
5:12:37 PM:     /opt/build/repo/public/render-page.js:30:30
5:12:37 PM:   
5:12:37 PM:   - render-page.js:159590 Module../src/components/profile/ProfilePicture.js

Uncaught ReferenceError: n is not defined
at v (react-avatar.js:1:36132)
at f (react-avatar.js:1:34914)
at react-avatar.js:1:32296
at i3 (react-avatar.js:1:32330)
at FileReader.onload (react-avatar.js:1:34317)

It's very small issue but very annoying and trivial to fix.
The cropRadius property is obscured by const cropRadius = imgWidth / 4; in the init() method.
For my own purposes I modified it to:
const autoCropRadius = Math.max(this.props.minCropRadius, Math.min(imgWidth, imgHeight) / 2);
const cropRadius = this.props.cropRadius || autoCropRadius
Also remove the respective cropRadius property from defaults as its default value is auto computed based on the image size.
Thanks for this nice component anyway!

Src image overflows if bigger than container

Choose a file may be Chinese, Spanish, Russian.

Hi,

Thank you for great component.
Just a question regarding using it on mobile and taking a picture (selfie) with camera - once taken it is rotated 90° clockwise.
Is there a way in component to detect orientation of the image or introduce methods for rotating resulting image in canvas?
Thank you.

Is posible to get the cropped area?

Lets say that I set width = height = 256 on the editor.
If I select an image with height > width, then the image is scaled and padded such that it fits into the editor.
If I select an image with width > height, the the image becomes too wide and overflows the editor.

It would be really nice to have an example of this project that uses every single option. I'm struggling to get the right syntax for the styles, and since the provided example doesn't use this option, I'm just fumbling around with different guesses. It's pretty frustrating.

Hi,

I develop on Typescript (React Hooks) and when i load a page with the Avatar component i get the following issue

ReferenceError: self is not defined

and the error seems coming from node_modules/react-avatar-edit/lib/react-avatar.js:2:250

How can get an image URL after cropping?

when I use onCrop attribute it returns an empty string, How can I fix that?

My Code :
<EditAvatar width={390} height={295} src={'https://pbs.twimg.com/profile_images/776714243173474304/ByDDFCvI_400x400.jpg'} onCrop={(preview) => { console.log('img =>', preview) console.log('img type =>',typeof preview) }} />

result:
img => img type => string

and this warning:
Konva warning: Unable to get data URL. Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Could you plz update the component to make borderStyle and labelStyle customizable?
Now I have to modify them in /lib/react-avatar.js manually.

This looks great. Is there an easy way to have a rectangular / square cropType option as well ?
Thanks.

Can you remove spread operator from labelStyle?
It overwrite lineHeight from props, or you can add one '||' more.

const labelStyle = { ...this.props.labelStyle, ...{ lineHeight: (height || 200) + 'px' } };

After editing preview, I want to fix position of preview in src image. Position every time dumped in center.. Any suggestions ?

the quality param do have the effect even if non-jpg mime is set. for example, webp.
The docs says only jpg is supported. This is documentation bug.
Also it would be nice to have webp in list of default supported mime's, since it is 2023 already.

I got an error from a user when uploading a specific image the component breaks and the airbrake sent me this error

TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'.

then I got this error multiple times again so this issue happened with different users

It is not possible to scale the cropping circle in IE11.
Maybe IE 11 is not supported by this package but i couldn't find any hint about that topic on the package description.

Thanks for the awesome library!
However, I would like to see a live demo of it on a web page (as opposed to GIF).

I've found that moving round selection frame doesn't change crop area any more (more exactly: visually you can make the cropping area smaller but after saving image is not cropped).

I guess that it is caused by update of some library from dependency list of your component.

If the "src" prop was assigned asynchron the component crashed in

componentDidUpdate(prevProps, prevState) {
    if (prevProps.src !== this.props.src) {
      this.image.src = this.props.src
    }
}

because this.image don't exists at this time because the componentDidMount() was finished without creating it (showLoader was true).

In my case the async assignment of "src" was needed to fetch an (possibly) existing avatar-image.

ERROR in ./node_modules/react-avatar-edit/src/avatar.jsx
Module parse failed: Unexpected token (14:22)
You may need an appropriate loader to handle this file type.
| class Avatar extends React.Component {
| 
|   static defaultProps = {
|     shadingColor: 'grey',
|     shadingOpacity: 0.6,

My webpack config snippet

  module: {

    // apply loaders to files that meet given conditions
    loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
    ]
  }

.babelrc

{
  "presets": [
    "es2015", "react"
  ]
}

Hello! An error occurs when using the component.
<Avatar width={250} height={200} onCrop={this.onCrop} onClose={this.onClose} src={this.props.srcAvatar} />
This is the avatar component that is created in the component SmdaAddNewClientCmpnt
when I create this component, and I try to draw content = <SmdaAddNewClientCmpnt />
an error is produced, but the most interesting is that the component itself, despite the error, works, but tests do not fail.
Konva instance is already exist in current eviroment. Please use only one instance. TypeError: Cannot read property 'webkitBackingStorePixelRatio' of null at C:\dev\Work\snap-md.site\src\SnapMD\v2\node_modules\react-avatar-edit\lib\react-avatar.js:29:14761 at C:\dev\Work\snap-md.site\src\SnapMD\v2\node_modules\react-avatar-edit\lib\react-avatar.js:29:14905 at Object.t (C:\dev\Work\snap-md.site\src\SnapMD\v2\node_modules\react-avatar-edit\lib\react-avatar.js:29:16605) at e (C:\dev\Work\snap-md.site\src\SnapMD\v2\node_modules\react-avatar-edit\lib\react-avatar.js:1:435) at Object.i (C:\dev\Work\snap-md.site\src\SnapMD\v2\node_modules\react-avatar-edit\lib\react-avatar.js:1:11539) at e (C:\dev\Work\snap-md.site\src\SnapMD\v2\node_modules\react-avatar-edit\lib\react-avatar.js:1:435) at Object.e.exports (C:\dev\Work\snap-md.site\src\SnapMD\v2\node_modules\react-avatar-edit\lib\react-avatar.js:1:1933) at e (C:\dev\Work\snap-md.site\src\SnapMD\v2\node_modules\react-avatar-edit\lib\react-avatar.js:1:435) at t.__esModule.default (C:\dev\Work\snap-md.site\src\SnapMD\v2\node_modules\react-avatar-edit\lib\react-avatar.js:1:792) at C:\dev\Work\snap-md.site\src\SnapMD\v2\node_modules\react-avatar-edit\lib\react-avatar.js:1:801 at n.(anonymous function).i (C:\dev\Work\snap-md.site\src\SnapMD\v2\node_modules\react-avatar-edit\lib\react-avatar.js:1:143) at Object.<anonymous> (C:\dev\Work\snap-md.site\src\SnapMD\v2\node_modules\react-avatar-edit\lib\react-avatar.js:1:311) at Module._compile (module.js:570:32) at Module._extensions..js (module.js:579:10) ...

In general, the error occurs when you create a parent component with respect to a component <Avatar>, in another component.

Hello, i added this package in my project and after run 'npm audit', this was the response

                       === npm audit security report ===                        
                                                                                
┌──────────────────────────────────────────────────────────────────────────────┐
│                                Manual Review                                 │
│            Some vulnerabilities require your attention to resolve            │
│                                                                              │
│         Visit https://go.npm.me/audit-guide for additional guidance          │
└──────────────────────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ braces                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=2.3.1                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ react-avatar-edit                                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ react-avatar-edit > webpack-cli > jscodeshift > micromatch > │
│               │ braces                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/786                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ braces                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=2.3.1                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ react-avatar-edit                                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ react-avatar-edit > webpack-cli > webpack-addons >           │
│               │ jscodeshift > micromatch > braces                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/786                       │
└───────────────┴──────────────────────────────────────────────────────────────┘

I do some search about the problem and i discovered that the problem was fixed in braces package, but this react-avatar-edit still using webpack-cli 2.1.4 (the latest version is in v3.2.3). Could someone update the dependencies, pls?

How to use this react-avatar with dropzone ?

Hi,
your react library is very cool, the only thing I see is that your latest commits are not in the current NPM release v.0.5.9, I'm trying to customize the text inside the box and I can't because your commit 2ba8bac is not in that release. Do you plan to update it?

Thanks!

It was so hard to find it. Suggestion is to do some simple advertising: enlist in the various free components lists there on github, message some youtubers which observe react components.
This component saved me time and I'd even donate
It just works and have all needed stuff, and has very few issues

After loading the image I'm getting this error...

In the window just appear this...

It works good but its not working when user upload pdf files ? what can I do ?

in avatar.d.ts file, props such as imageWidth and onBeforeFileLoad are not defined for typescript

I have an task wrap Avatar component in react-dropzone but I cant match it.
Thank u for read and comment!!!

i tried do run this service with next.js, but no success. the error I'm receiving is : ReferenceError: window is not defined

When i set the state.src with a url or base 64img the edit area is not updated

axios.get("/images/img.jpg")
     .then( (response) => {
       self.setState({
           src:response.data
       });
       
       
     })
     .catch( (error) => {
       console.log(error);
     });  

Hello please could tell me how to make clicking inside the component also open the box to select image, and not just when I click on the text 'Choose a file'.

Thank you

i hope it would work properly on mobile. Is there any chance of having that soon? Thanks!

i want to fix max crop radius

Please add a simple line indicating that this package is called react-avatar-edit and not react-avatar, which is another package.

It would be nice if you could send in a HTML button as a prop (with a pre-specified onClick action maybe) so that the UI can be more controllable as the given UI may not fit a given design too good. The package is great thanks.

Ex, how I would have my button look:


^How the package makes my button look:


this might be more beautiful
thanks for good component

Hey! Just wondering how to get the file name that is being uploaded/ if there is a way to do so

Get this issue when i am using typescript.

react-dom.development.js:13891 Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/avatar.b9414da5.jsx') is not a valid name.

Hello!

I thing that your lib needs to have a typings for TypeScript.

I want to do a PR for you. :)

I don't see any info in the docs or in a quick scan of the source code - does this lib check at all that the file is actually what it says it is? An image?

When taking an image from a camera it displays rotated

Even when the same on close function is called for a on-Click function to remove the image It is not working

Looks like a great project! Unfortunately, I'm having an integration issue as follows:

InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/avatar.b9414da5.jsx') is not a valid name.

My integration looks as follows

<Avatar
    width={390}
    height={295}
    onCrop={this.onCrop}
    onClose={this.onClose}
    src={this.state.src}
/>

Any ideas?

How to upload cropped image with axios ?

Hi,

Thank you for your work, guys.

I have a question - does it mean this component will always return the preview as a png file?