From 8b46edeccf5a8907afbb871e3eb5b3b8eef967a8 Mon Sep 17 00:00:00 2001 From: tamaina Date: Fri, 30 Dec 2022 12:00:50 +0900 Subject: enhance: Proxy custom emojis to reduce image size and accelerate the frontend (#9431) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(server): /emoji to accept `@.` host expression * fix(client): use MkEmoji for custom emoji in MkEmojiPicker * change convertToWebp * nanka iroiro * remove * fix * nearLosslessは労多くして益少なしなのでやめる * do not cleanup tmp for development * update sharp.js to 0.31.3 * mixed: true * fix MkAutocomplete of 912791b3ab * clean up * https://github.com/misskey-dev/misskey/pull/9431#discussion_r1059215943 --- packages/backend/src/core/CustomEmojiService.ts | 7 +------ packages/backend/src/core/DownloadService.ts | 2 +- packages/backend/src/core/ImageProcessingService.ts | 20 ++++++++++++++------ 3 files changed, 16 insertions(+), 13 deletions(-) (limited to 'packages/backend/src/core') diff --git a/packages/backend/src/core/CustomEmojiService.ts b/packages/backend/src/core/CustomEmojiService.ts index ff52ad27d6..61cf811192 100644 --- a/packages/backend/src/core/CustomEmojiService.ts +++ b/packages/backend/src/core/CustomEmojiService.ts @@ -2,12 +2,10 @@ import { Inject, Injectable } from '@nestjs/common'; import { DataSource, In, IsNull } from 'typeorm'; import { GlobalEventService } from '@/core/GlobalEventService.js'; import { DI } from '@/di-symbols.js'; -import type { Config } from '@/config.js'; import { IdService } from '@/core/IdService.js'; import type { DriveFile } from '@/models/entities/DriveFile.js'; import type { Emoji } from '@/models/entities/Emoji.js'; import { Cache } from '@/misc/cache.js'; -import { query } from '@/misc/prelude/url.js'; import type { Note } from '@/models/entities/Note.js'; import type { EmojisRepository } from '@/models/index.js'; import { UtilityService } from '@/core/UtilityService.js'; @@ -27,9 +25,6 @@ export class CustomEmojiService { private cache: Cache; constructor( - @Inject(DI.config) - private config: Config, - @Inject(DI.db) private db: DataSource, @@ -117,7 +112,7 @@ export class CustomEmojiService { const isLocal = emoji.host == null; const emojiUrl = emoji.publicUrl || emoji.originalUrl; // || emoji.originalUrl してるのは後方互換性のため - const url = isLocal ? emojiUrl : `${this.config.url}/proxy/${encodeURIComponent((new URL(emojiUrl)).pathname)}?${query({ url: emojiUrl })}`; + const url = emojiUrl; return { name: emojiName, diff --git a/packages/backend/src/core/DownloadService.ts b/packages/backend/src/core/DownloadService.ts index 9097bb08e0..62123246a7 100644 --- a/packages/backend/src/core/DownloadService.ts +++ b/packages/backend/src/core/DownloadService.ts @@ -33,7 +33,7 @@ export class DownloadService { @bindThis public async downloadUrl(url: string, path: string): Promise { - this.logger.info(`Downloading ${chalk.cyan(url)} ...`); + this.logger.info(`Downloading ${chalk.cyan(url)} to ${chalk.cyanBright(path)} ...`); const timeout = 30 * 1000; const operationTimeout = 60 * 1000; diff --git a/packages/backend/src/core/ImageProcessingService.ts b/packages/backend/src/core/ImageProcessingService.ts index 3a61873044..312189eea4 100644 --- a/packages/backend/src/core/ImageProcessingService.ts +++ b/packages/backend/src/core/ImageProcessingService.ts @@ -8,6 +8,16 @@ export type IImage = { ext: string | null; type: string; }; + +export const webpDefault: sharp.WebpOptions = { + quality: 85, + alphaQuality: 95, + lossless: false, + nearLossless: false, + smartSubsample: true, + mixed: true, +}; + import { bindThis } from '@/decorators.js'; @Injectable() @@ -53,21 +63,19 @@ export class ImageProcessingService { * with resize, remove metadata, resolve orientation, stop animation */ @bindThis - public async convertToWebp(path: string, width: number, height: number, quality = 85): Promise { - return this.convertSharpToWebp(await sharp(path), width, height, quality); + public async convertToWebp(path: string, width: number, height: number, options: sharp.WebpOptions = webpDefault): Promise { + return this.convertSharpToWebp(await sharp(path), width, height, options); } @bindThis - public async convertSharpToWebp(sharp: sharp.Sharp, width: number, height: number, quality = 85): Promise { + public async convertSharpToWebp(sharp: sharp.Sharp, width: number, height: number, options: sharp.WebpOptions = webpDefault): Promise { const data = await sharp .resize(width, height, { fit: 'inside', withoutEnlargement: true, }) .rotate() - .webp({ - quality, - }) + .webp(options) .toBuffer(); return { -- cgit v1.2.3-freya