Cleaning up image conversions to use webp, and increasing the thumbnail size.

This commit is contained in:
Skystryder 2023-01-28 17:46:03 -08:00
parent 84cb921573
commit 72e8d9e1ce
4 changed files with 14 additions and 92 deletions

View File

@ -11,11 +11,7 @@ import { InternalStorage } from "@/services/drive/internal-storage.js";
import { createTemp } from "@/misc/create-temp.js"; import { createTemp } from "@/misc/create-temp.js";
import { downloadUrl } from "@/misc/download-url.js"; import { downloadUrl } from "@/misc/download-url.js";
import { detectType } from "@/misc/get-file-info.js"; import { detectType } from "@/misc/get-file-info.js";
import { import { convertToWebp } from "@/services/drive/image-processor.js";
convertToWebp,
convertToJpeg,
convertToPng,
} from "@/services/drive/image-processor.js";
import { GenerateVideoThumbnail } from "@/services/drive/generate-video-thumbnail.js"; import { GenerateVideoThumbnail } from "@/services/drive/generate-video-thumbnail.js";
import { StatusError } from "@/misc/fetch.js"; import { StatusError } from "@/misc/fetch.js";
import { FILE_TYPE_BROWSERSAFE } from "@/const.js"; import { FILE_TYPE_BROWSERSAFE } from "@/const.js";
@ -77,7 +73,7 @@ export default async function (ctx: Koa.Context) {
"image/avif", "image/avif",
].includes(mime) ].includes(mime)
) { ) {
return await convertToWebp(path, 498, 280); return await convertToWebp(path, 996, 560);
} else if (mime.startsWith("video/")) { } else if (mime.startsWith("video/")) {
return await GenerateVideoThumbnail(path); return await GenerateVideoThumbnail(path);
} }
@ -85,7 +81,7 @@ export default async function (ctx: Koa.Context) {
if (isWebpublic) { if (isWebpublic) {
if (["image/svg+xml"].includes(mime)) { if (["image/svg+xml"].includes(mime)) {
return await convertToPng(path, 2048, 2048); return await convertToWebp(path, 2048, 2048, 100);
} }
} }

View File

@ -30,11 +30,7 @@ import { IdentifiableError } from "@/misc/identifiable-error.js";
import { getS3 } from "./s3.js"; import { getS3 } from "./s3.js";
import { InternalStorage } from "./internal-storage.js"; import { InternalStorage } from "./internal-storage.js";
import type { IImage } from "./image-processor.js"; import type { IImage } from "./image-processor.js";
import { import { convertSharpToWebp } from "./image-processor.js";
convertSharpToJpeg,
convertSharpToWebp,
convertSharpToPng,
} from "./image-processor.js";
import { driveLogger } from "./logger.js"; import { driveLogger } from "./logger.js";
import { GenerateVideoThumbnail } from "./generate-video-thumbnail.js"; import { GenerateVideoThumbnail } from "./generate-video-thumbnail.js";
import { deleteFile } from "./delete-file.js"; import { deleteFile } from "./delete-file.js";
@ -75,8 +71,8 @@ async function save(
if (type === "image/vnd.mozilla.apng") ext = ".apng"; if (type === "image/vnd.mozilla.apng") ext = ".apng";
} }
// 拡張子からContent-Typeを設定してそうな挙動を示すオブジェクトストレージ (upcloud?) も存在するので、 // Some cloud providers (notably upcloud) will infer the content-type based
// 許可されているファイル形式でしか拡張子をつけない // on extension, so we remove extensions from non-browser-safe types.
if (!FILE_TYPE_BROWSERSAFE.includes(type)) { if (!FILE_TYPE_BROWSERSAFE.includes(type)) {
ext = ""; ext = "";
} }
@ -282,13 +278,13 @@ export async function generateAlts(
try { try {
if (["image/jpeg"].includes(type)) { if (["image/jpeg"].includes(type)) {
webpublic = await convertSharpToJpeg(img, 2048, 2048); webpublic = await convertSharpToWebp(img, 2048, 2048);
} else if (["image/webp"].includes(type)) { } else if (["image/webp"].includes(type)) {
webpublic = await convertSharpToPng(img, 2048, 2048); webpublic = await convertSharpToWebp(img, 2048, 2048);
} else if (["image/png"].includes(type)) { } else if (["image/png"].includes(type)) {
webpublic = await convertSharpToPng(img, 2048, 2048); webpublic = await convertSharpToWebp(img, 2048, 2048, 100);
} else if (["image/svg+xml"].includes(type)) { } else if (["image/svg+xml"].includes(type)) {
webpublic = await convertSharpToPng(img, 2048, 2048); webpublic = await convertSharpToWebp(img, 2048, 2048);
} else { } else {
logger.debug("web image not created (not an required image)"); logger.debug("web image not created (not an required image)");
} }
@ -315,7 +311,7 @@ export async function generateAlts(
"image/avif", "image/avif",
].includes(type) ].includes(type)
) { ) {
thumbnail = await convertSharpToWebp(img, 498, 280); thumbnail = await convertSharpToWebp(img, 996, 560);
} else { } else {
logger.debug("thumbnail not created (not an required file)"); logger.debug("thumbnail not created (not an required file)");
} }

View File

@ -1,7 +1,7 @@
import * as fs from "node:fs"; import * as fs from "node:fs";
import { createTempDir } from "@/misc/create-temp.js"; import { createTempDir } from "@/misc/create-temp.js";
import type { IImage } from "./image-processor.js"; import type { IImage } from "./image-processor.js";
import { convertToJpeg } from "./image-processor.js"; import { convertToWebp } from "./image-processor.js";
import FFmpeg from "fluent-ffmpeg"; import FFmpeg from "fluent-ffmpeg";
export async function GenerateVideoThumbnail(source: string): Promise<IImage> { export async function GenerateVideoThumbnail(source: string): Promise<IImage> {
@ -22,8 +22,7 @@ export async function GenerateVideoThumbnail(source: string): Promise<IImage> {
}); });
}); });
// JPEGに変換 (Webpでもいいが、MastodonはWebpをサポートせず表示できなくなる) return await convertToWebp(`${dir}/out.png`, 996, 560);
return await convertToJpeg(`${dir}/out.png`, 498, 280);
} finally { } finally {
cleanup(); cleanup();
} }

View File

@ -6,42 +6,6 @@ export type IImage = {
type: string; type: string;
}; };
/**
* Convert to JPEG
* with resize, remove metadata, resolve orientation, stop animation
*/
export async function convertToJpeg(
path: string,
width: number,
height: number,
): Promise<IImage> {
return convertSharpToJpeg(await sharp(path), width, height);
}
export async function convertSharpToJpeg(
sharp: sharp.Sharp,
width: number,
height: number,
): Promise<IImage> {
const data = await sharp
.resize(width, height, {
fit: "inside",
withoutEnlargement: true,
})
.rotate()
.jpeg({
quality: 85,
progressive: true,
})
.toBuffer();
return {
data,
ext: "jpg",
type: "image/jpeg",
};
}
/** /**
* Convert to WebP * Convert to WebP
* with resize, remove metadata, resolve orientation, stop animation * with resize, remove metadata, resolve orientation, stop animation
@ -61,7 +25,7 @@ export async function convertSharpToWebp(
height: number, height: number,
quality: number = 85, quality: number = 85,
): Promise<IImage> { ): Promise<IImage> {
const data = await sharp const data = await sharp
.resize(width, height, { .resize(width, height, {
fit: "inside", fit: "inside",
withoutEnlargement: true, withoutEnlargement: true,
@ -78,36 +42,3 @@ export async function convertSharpToWebp(
type: "image/webp", type: "image/webp",
}; };
} }
/**
* Convert to PNG
* with resize, remove metadata, resolve orientation, stop animation
*/
export async function convertToPng(
path: string,
width: number,
height: number,
): Promise<IImage> {
return convertSharpToPng(await sharp(path), width, height);
}
export async function convertSharpToPng(
sharp: sharp.Sharp,
width: number,
height: number,
): Promise<IImage> {
const data = await sharp
.resize(width, height, {
fit: "inside",
withoutEnlargement: true,
})
.rotate()
.png()
.toBuffer();
return {
data,
ext: "png",
type: "image/png",
};
}