Maintain aspect ratio for preview image (#3966)

This commit is contained in:
Yamagishi Kazutoshi 2017-06-27 20:43:53 +09:00 committed by Eugen Rochko
parent 98eaa2aa27
commit 8f2c91568c
2 changed files with 116 additions and 36 deletions

View file

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classNames from 'classnames';
export default class ImageLoader extends React.PureComponent { export default class ImageLoader extends React.PureComponent {
@ -20,46 +21,121 @@ export default class ImageLoader extends React.PureComponent {
error: false, error: false,
} }
componentWillMount() { removers = [];
this._loadImage(this.props.src);
get canvasContext() {
if (!this.canvas) {
return null;
}
this._canvasContext = this._canvasContext || this.canvas.getContext('2d');
return this._canvasContext;
} }
componentWillReceiveProps(props) { componentDidMount () {
this._loadImage(props.src); this.loadImage(this.props);
} }
_loadImage(src) { componentWillReceiveProps (nextProps) {
if (this.props.src !== nextProps.src) {
this.loadImage(nextProps);
}
}
loadImage (props) {
this.removeEventListeners();
this.setState({ loading: true, error: false });
Promise.all([
this.loadPreviewCanvas(props),
this.loadOriginalImage(props),
])
.then(() => {
this.setState({ loading: false, error: false });
this.clearPreviewCanvas();
})
.catch(() => this.setState({ loading: false, error: true }));
}
loadPreviewCanvas = ({ previewSrc, width, height }) => new Promise((resolve, reject) => {
const image = new Image(); const image = new Image();
const removeEventListeners = () => {
image.removeEventListener('error', handleError);
image.removeEventListener('load', handleLoad);
};
const handleError = () => {
removeEventListeners();
reject();
};
const handleLoad = () => {
removeEventListeners();
this.canvasContext.drawImage(image, 0, 0, width, height);
resolve();
};
image.addEventListener('error', handleError);
image.addEventListener('load', handleLoad);
image.src = previewSrc;
this.removers.push(removeEventListeners);
})
image.onerror = () => this.setState({ loading: false, error: true }); clearPreviewCanvas () {
image.onload = () => this.setState({ loading: false, error: false }); const { width, height } = this.canvas;
this.canvasContext.clearRect(0, 0, width, height);
image.src = src;
this.setState({ loading: true });
} }
render() { loadOriginalImage = ({ src }) => new Promise((resolve, reject) => {
const { alt, src, previewSrc, width, height } = this.props; const image = new Image();
const removeEventListeners = () => {
image.removeEventListener('error', handleError);
image.removeEventListener('load', handleLoad);
};
const handleError = () => {
removeEventListeners();
reject();
};
const handleLoad = () => {
removeEventListeners();
resolve();
};
image.addEventListener('error', handleError);
image.addEventListener('load', handleLoad);
image.src = src;
this.removers.push(removeEventListeners);
});
removeEventListeners () {
this.removers.forEach(listeners => listeners());
this.removers = [];
}
setCanvasRef = c => {
this.canvas = c;
}
render () {
const { alt, src, width, height } = this.props;
const { loading } = this.state; const { loading } = this.state;
const className = classNames('image-loader', {
'image-loader--loading': loading,
});
return ( return (
<div className='image-loader'> <div className={className}>
<img <canvas
alt={alt} className='image-loader__preview-canvas'
className='image-loader__img'
src={src}
width={width} width={width}
height={height} height={height}
ref={this.setCanvasRef}
/> />
{loading && {!loading && (
<img <img
alt='' alt={alt}
src={previewSrc} className='image-loader__img'
className='image-loader__preview-img' src={src}
width={width}
height={height}
/> />
} )}
</div> </div>
); );
} }

View file

@ -1099,20 +1099,22 @@
.image-loader { .image-loader {
position: relative; position: relative;
}
.image-loader__preview-img { &.image-loader--loading {
position: absolute; .image-loader__preview-canvas {
top: 0; filter: blur(2px);
left: 0; }
width: 100%; }
height: 100%;
filter: blur(2px);
}
.media-modal img.image-loader__preview-img { .image-loader__img {
width: 100%; position: absolute;
height: 100%; top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-image: none;
}
} }
.navigation-bar { .navigation-bar {
@ -2933,6 +2935,7 @@ button.icon-button.active i.fa-retweet {
position: relative; position: relative;
img, img,
canvas,
video { video {
max-width: 80vw; max-width: 80vw;
max-height: 80vh; max-height: 80vh;
@ -2940,7 +2943,8 @@ button.icon-button.active i.fa-retweet {
height: auto; height: auto;
} }
img { img,
canvas {
display: block; display: block;
background: url('../images/void.png') repeat; background: url('../images/void.png') repeat;
} }