Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 13:14:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

optimize

Browse Source
This commit is contained in:
Dariusz Niemczyk 2021-08-23 13:03:09 +02:00
parent 99a935534c
commit b1a2f16e43
No known key found for this signature in database
GPG Key ID: 3E8DC619E3C59A05
1 changed files with 26 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/structures/BackdropPanel.tsx
View File

@ -77,13 +77,29 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
const leftPanelCanvas = document.createElement('canvas');
const leftLeftPanelContext = leftLeftPanelCanvas.getContext("2d");
const leftPanelContext = leftPanelCanvas.getContext("2d");
const { leftLeftPanelWidth, height } = this.sizes;
const { backgroundImage } = this.props;
const { leftLeftPanelWidth, leftPanelWidth, height } = this.sizes;
const width = leftLeftPanelWidth + leftPanelWidth;
const imageWidth = (backgroundImage as ImageBitmap).width;
const imageHeight = (backgroundImage as ImageBitmap).height;
const contentRatio = imageWidth / imageHeight;
const containerRatio = width / height;
let resultHeight;
let resultWidth;
if (contentRatio > containerRatio) {
resultHeight = height;
resultWidth = height * contentRatio;
} else {
resultWidth = width;
resultHeight = width / contentRatio;
}
// This value has been chosen to be as close with rendering as the css-only
// backdrop-filter: blur effect was, mostly takes effect for vertical pictures.
const x = width * 0.1;
const y = (height - resultHeight) / 2;
leftLeftPanelCanvas.width = leftLeftPanelWidth;
leftLeftPanelCanvas.height = height;
@ -98,15 +114,20 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
leftLeftPanelContext.drawImage(
backgroundImage,
0, 0,
imageWidth, imageHeight,
x,
y,
resultWidth,
resultHeight,
);
leftPanelContext.drawImage(
backgroundImage,
0, 0,
imageWidth, imageHeight,
0,
0,
window.screen.width * 0.5,
window.screen.height,
x - leftLeftPanelWidth,
y,
resultWidth,
resultHeight,
);
this.setState({
lpImage: leftPanelCanvas.toDataURL('image/jpeg', 1),