sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

enhance: ドライブに画像ファイルをアップロードするときオリジナル画像を破棄してwebpublicのみ保持するオプション (#8216)

Browse Source 
* wip

* Update packages/client/src/os.ts

Co-authored-by: tamaina <tamaina@hotmail.co.jp>

* メニューをComposition API化、switchアイテム追加
クライアントサイド画像圧縮の準備

* メニュー型定義を分離 (TypeScriptの型支援が効かないので)

* disabled

* make keepOriginal to follow setting value

* ✌️

* fix

* fix

* ✌️

* WEBP

* aaa

* ✌️

* webp

* lazy load browser-image-resizer

* rename

* rename 2

* Fix

* clean up

* add comment

* clean up

* jpeg, pngにもどす

* fix

* fix name

* webpでなくする ただしサムネやプレビューはwebpのまま (テスト)

* 動画サムネイルはjpegに

* エラーハンドリング

* ✌️

* v2.2.1-misskey-beta.2

* browser-image-resizer#v2.2.1-misskey.1

* ✌️

* fix alert

* update browser-image-resizer to v2.2.1-misskey.2

* lockfile

Co-authored-by: mei23 <m@m544.net>
Co-authored-by: MeiMei <30769358+mei23@users.noreply.github.com>
This commit is contained in:
tamaina
2022-04-28 11:14:03 +09:00
committed by GitHub
parent d0443f9de1
commit 12a3c6872f
17 changed files with 169 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
packages/backend/src/services/drive/add-file.ts
View File

@ -7,7 +7,7 @@ import { deleteFile } from './delete-file.js';
import { fetchMeta } from '@/misc/fetch-meta.js';
import { GenerateVideoThumbnail } from './generate-video-thumbnail.js';
import { driveLogger } from './logger.js';
import { IImage, convertSharpToJpeg, convertSharpToWebp, convertSharpToPng, convertSharpToPngOrJpeg } from './image-processor.js';
import { IImage, convertSharpToJpeg, convertSharpToWebp, convertSharpToPng } from './image-processor.js';
import { contentDisposition } from '@/misc/content-disposition.js';
import { getFileInfo } from '@/misc/get-file-info.js';
import { DriveFiles, DriveFolders, Users, Instances, UserProfiles } from '@/models/index.js';
@ -179,6 +179,7 @@ export async function generateAlts(path: string, type: string, generateWeb: bool
}
let img: sharp.Sharp | null = null;
let satisfyWebpublic: boolean;
try {
img = sharp(path);
@ -192,6 +193,13 @@ export async function generateAlts(path: string, type: string, generateWeb: bool
thumbnail: null,
};
}
satisfyWebpublic = !!(
type !== 'image/svg+xml' && type !== 'image/webp' &&
!(metadata.exif || metadata.iptc || metadata.xmp || metadata.tifftagPhotoshop) &&
metadata.width && metadata.width <= 2048 &&
metadata.height && metadata.height <= 2048
);
} catch (err) {
logger.warn(`sharp failed: ${err}`);
return {
@ -203,15 +211,15 @@ export async function generateAlts(path: string, type: string, generateWeb: bool
// #region webpublic
let webpublic: IImage | null = null;
if (generateWeb) {
if (generateWeb && !satisfyWebpublic) {
logger.info(`creating web image`);
try {
if (['image/jpeg'].includes(type)) {
if (['image/jpeg', 'image/webp'].includes(type)) {
webpublic = await convertSharpToJpeg(img, 2048, 2048);
} else if (['image/webp'].includes(type)) {
webpublic = await convertSharpToWebp(img, 2048, 2048);
} else if (['image/png', 'image/svg+xml'].includes(type)) {
} else if (['image/png'].includes(type)) {
webpublic = await convertSharpToPng(img, 2048, 2048);
} else if (['image/svg+xml'].includes(type)) {
webpublic = await convertSharpToPng(img, 2048, 2048);
} else {
logger.debug(`web image not created (not an required image)`);
@ -220,7 +228,8 @@ export async function generateAlts(path: string, type: string, generateWeb: bool
logger.warn(`web image not created (an error occured)`, err as Error);
}
} else {
logger.info(`web image not created (from remote)`);
if (satisfyWebpublic) logger.info(`web image not created (original satisfies webpublic)`);
else logger.info(`web image not created (from remote)`);
}
// #endregion webpublic
@ -228,10 +237,8 @@ export async function generateAlts(path: string, type: string, generateWeb: bool
let thumbnail: IImage | null = null;
try {
if (['image/jpeg', 'image/webp'].includes(type)) {
thumbnail = await convertSharpToJpeg(img, 498, 280);
} else if (['image/png', 'image/svg+xml'].includes(type)) {
thumbnail = await convertSharpToPngOrJpeg(img, 498, 280);
if (['image/jpeg', 'image/webp', 'image/png', 'image/svg+xml'].includes(type)) {
thumbnail = await convertSharpToWebp(img, 498, 280);
} else {
logger.debug(`thumbnail not created (not an required file)`);
}

1
packages/backend/src/services/drive/generate-video-thumbnail.ts
View File

@ -27,6 +27,7 @@ export async function GenerateVideoThumbnail(path: string): Promise<IImage> {
const outPath = `${outDir}/output.png`;
// JPEGに変換 (Webpでもいいが、MastodonはWebpをサポートせず表示できなくなる)
const thumbnail = await convertToJpeg(outPath, 498, 280);
// cleanup

28
packages/backend/src/services/drive/image-processor.ts
View File

@ -38,11 +38,11 @@ export async function convertSharpToJpeg(sharp: sharp.Sharp, width: number, heig
* Convert to WebP
* with resize, remove metadata, resolve orientation, stop animation
*/
export async function convertToWebp(path: string, width: number, height: number): Promise<IImage> {
return convertSharpToWebp(await sharp(path), width, height);
export async function convertToWebp(path: string, width: number, height: number, quality: number = 85): Promise<IImage> {
return convertSharpToWebp(await sharp(path), width, height, quality);
}
export async function convertSharpToWebp(sharp: sharp.Sharp, width: number, height: number): Promise<IImage> {
export async function convertSharpToWebp(sharp: sharp.Sharp, width: number, height: number, quality: number = 85): Promise<IImage> {
const data = await sharp
.resize(width, height, {
fit: 'inside',
@ -50,7 +50,7 @@ export async function convertSharpToWebp(sharp: sharp.Sharp, width: number, heig
})
.rotate()
.webp({
quality: 85,
quality,
})
.toBuffer();
@ -85,23 +85,3 @@ export async function convertSharpToPng(sharp: sharp.Sharp, width: number, heigh
type: 'image/png',
};
}
/**
* Convert to PNG or JPEG
* with resize, remove metadata, resolve orientation, stop animation
*/
export async function convertToPngOrJpeg(path: string, width: number, height: number): Promise<IImage> {
return convertSharpToPngOrJpeg(await sharp(path), width, height);
}
export async function convertSharpToPngOrJpeg(sharp: sharp.Sharp, width: number, height: number): Promise<IImage> {
const stats = await sharp.stats();
const metadata = await sharp.metadata();
// 不透明で300x300pxの範囲を超えていればJPEG
if (stats.isOpaque && ((metadata.width && metadata.width >= 300) || (metadata.height && metadata!.height >= 300))) {
return await convertSharpToJpeg(sharp, width, height);
} else {
return await convertSharpToPng(sharp, width, height);
}
}