diff options
author | Misty De Meo <mistydemeo@github.com> | 2017-01-29 05:26:50 -0800 |
---|---|---|
committer | Eugen <eugen@zeonfederated.com> | 2017-01-29 14:26:50 +0100 |
commit | a30e669df24e680fa94fc954144d2fa9b04fcf4f (patch) | |
tree | 206494a8365a578100b7f80731f896e5865d2780 /app/assets/javascripts/components/components | |
parent | ff90a5ff84ab610d96ac474926f4fbdfb7293074 (diff) |
Fix avatar scaling on high-DPI displays (#573)
Diffstat (limited to 'app/assets/javascripts/components/components')
-rw-r--r-- | app/assets/javascripts/components/components/avatar.jsx | 4 |
1 files changed, 2 insertions, 2 deletions
diff --git a/app/assets/javascripts/components/components/avatar.jsx b/app/assets/javascripts/components/components/avatar.jsx index b8420014b..8d5c90b33 100644 --- a/app/assets/javascripts/components/components/avatar.jsx +++ b/app/assets/javascripts/components/components/avatar.jsx @@ -25,7 +25,7 @@ const Avatar = React.createClass({ }, handleLoad () { - this.canvas.getContext('2d').drawImage(this.image, 0, 0, this.props.size, this.props.size); + this.canvas.getContext('2d').drawImage(this.image, 0, 0, this.props.size * window.devicePixelRatio, this.props.size * window.devicePixelRatio); }, setImageRef (c) { @@ -42,7 +42,7 @@ const Avatar = React.createClass({ return ( <div onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} style={{ ...this.props.style, width: `${this.props.size}px`, height: `${this.props.size}px`, position: 'relative' }}> <img ref={this.setImageRef} onLoad={this.handleLoad} src={this.props.src} width={this.props.size} height={this.props.size} alt='' style={{ position: 'absolute', top: '0', left: '0', visibility: hovering ? 'visible' : 'hidden', borderRadius: '4px' }} /> - <canvas ref={this.setCanvasRef} width={this.props.size} height={this.props.size} style={{ borderRadius: '4px' }} /> + <canvas ref={this.setCanvasRef} width={this.props.size * window.devicePixelRatio} height={this.props.size * window.devicePixelRatio} style={{ borderRadius: '4px', width: this.props.size, height: this.props.size }} /> </div> ); } |