MrBesen/tweb
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Support uploading .png wallpapers

Browse Source
This commit is contained in:
Eduard Kuzmenko 2022-06-19 20:51:15 +04:00
parent 23b688f54c
commit 0e988d9367
2 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/sidebarLeft/tabs/background.ts
View File

@ -29,6 +29,9 @@ import choosePhotoSize from "../../../lib/appManagers/utils/photos/choosePhotoSi
import { STATE_INIT, Theme } from "../../../config/state";
import themeController from "../../../helpers/themeController";
import requestFile from "../../../helpers/files/requestFile";
import { renderImageFromUrlPromise } from "../../../helpers/dom/renderImageFromUrl";
import scaleMediaElement from "../../../helpers/canvas/scaleMediaElement";
import { MediaSize } from "../../../helpers/mediaSize";
export default class AppBackgroundTab extends SliderSuperTab {
private grid: HTMLElement;
@ -108,6 +111,15 @@ export default class AppBackgroundTab extends SliderSuperTab {
private onUploadClick = () => {
requestFile('image/x-png,image/png,image/jpeg').then(async(file) => {
if(file.name.endsWith('.png')) {
const img = document.createElement('img');
const url = URL.createObjectURL(file);
await renderImageFromUrlPromise(img, url, false);
const mimeType = 'image/jpeg';
const {blob} = await scaleMediaElement({media: img, size: new MediaSize(img.naturalWidth, img.naturalHeight), mimeType});
file = new File([blob], file.name.replace(/\.png$/, '.jpg'), {type: mimeType});
}
const wallPaper = await this.managers.appDocsManager.prepareWallPaperUpload(file);
const uploadPromise = this.managers.appDocsManager.uploadWallPaper(wallPaper.id);
const uploadDeferred: CancellablePromise<any> = appDownloadManager.getNewDeferredForUpload(file.name, uploadPromise);

9
src/helpers/canvas/scaleMediaElement.ts
View File

@ -2,14 +2,15 @@ import type { MediaSize } from "../mediaSize";
export default function scaleMediaElement(options: {
media: CanvasImageSource,
mediaSize: MediaSize,
boxSize: MediaSize,
mediaSize?: MediaSize,
boxSize?: MediaSize,
quality?: number,
mimeType?: 'image/jpeg' | 'image/png'
mimeType?: 'image/jpeg' | 'image/png',
size?: MediaSize
}): Promise<{blob: Blob, size: MediaSize}> {
return new Promise((resolve) => {
const canvas = document.createElement('canvas');
const size = options.mediaSize.aspectFitted(options.boxSize);
const size = options.size ?? options.mediaSize.aspectFitted(options.boxSize);
canvas.width = size.width * window.devicePixelRatio;
canvas.height = size.height * window.devicePixelRatio;
const ctx = canvas.getContext('2d');