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

tamaina · 2022-01-29T13:15:21Z

Resolve #6626
Resolve #7704
Resolve #8167
Resolve #8173
Fix #8558

What

#8176, #8215 のつづき

画像ファイルをアップロードするとき圧縮してオリジナルをアップロードしないオプション（デフォルトでオリジナルをアップロードしないように）
アップロードされた画像がwebpublicの条件を満たしている場合はwebpublicを生成しないように
ドライブ（ファイル一覧）画面でアップロードするときやファイル選択メニュー(画像)で一時的にオリジナルをアップロードするかどうか選択できるように
ついでに諸々の圧縮形式をwebpにする

Why

サーバーのストレージの容量・ファイル数を削減する
アップロードの容量を軽くできる

Additional Info

orientationが付いてる画像をアップするとうまく回転してくれない問題には手を付けていない
ericnograles/browser-image-resizer#34

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

クライアントサイド画像圧縮の準備

tamaina · 2022-01-30T16:22:50Z

Safariでwebpを出力するとやたらファイル容量がでかくなる

第二引数(quality)はwebpしか対応していないため

https://developer.apple.com/documentation/webkitjs/htmlcanvaselement/1630000-todataurl

tamaina · 2022-02-16T10:46:12Z

Chrome 81+とか？
https://stackoverflow.com/questions/62240685/how-to-ignore-image-exif-data-on-a-canvas-in-chrome-81

tamaina · 2022-02-16T10:49:40Z

CSSのimage-orientationに対応してたら自動回転対応みたいな感じで良いのかもしれない
https://caniuse.com/css-image-orientation

mei23 · 2022-02-16T10:51:00Z

どのブラウザのどのバージョンまでが自動回転しなかった(?)のか不明なんだけど何か情報ないかしら

2020年4月の時点で自動回転しなかったのはFirefoxだけなので、今は流石に大丈夫だろうというのしかわからないわね。
w3c/csswg-drafts#4666 (comment)

mei23 · 2022-02-16T10:54:40Z

CSSのimage-orientationに対応してたら自動回転対応みたいな感じで良いのかもしれない

image-orientation対応とcanvas自動回転のタイミングは一致してなさそうだからダメそう

mei23 · 2022-02-16T11:17:45Z

どのブラウザのどのバージョンまでが自動回転しなかった

Firefoxは、たぶん78 (2020年7月) からちゃんとcanvasも回転
https://bugzilla.mozilla.org/show_bug.cgi?id=1615440
https://bugzilla.mozilla.org/show_bug.cgi?id=1635315

Chromeは、たぶん上の通り81から

Safariは、canvasサポートかはわからないけどChromeと同じタイミングだと13.1から

tamaina · 2022-02-16T11:49:45Z

ExifReaderなくしたらコード量が相当減ったので遅延ロードはしないようにした

tamaina · 2022-04-27T14:32:24Z

misskey.ioに導入されている(?)

syuilo · 2022-04-27T14:52:18Z

あきうすの別のPRマージしたら一緒にくっついてきた
全Misskeyで導入されている

tamaina · 2022-04-27T14:56:50Z

#8215 か

チェックボックス機能してないなこれ

tamaina · 2022-04-27T14:59:05Z

p1.a9z.devを除くMisskeyはチェックボックスだけ存在して機能はまったくしていない状態

syuilo · 2022-04-28T02:14:15Z

🙏🏻

mei23 · 2022-12-24T09:44:58Z

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

@@ -27,6 +27,7 @@ export async function GenerateVideoThumbnail(path: string): Promise<IImage> {

 	const outPath = `${outDir}/output.png`;

+	// JPEGに変換 (Webpでもいいが、MastodonはWebpをサポートせず表示できなくなる)


動画のサムネイルがリモートに送られることはなかった気がするわ

misskey/packages/backend/src/core/activitypub/ApRendererService.ts

Lines 155 to 163 in c7f4fd1

@bindThis

public renderDocument(file: DriveFile) {

return {

type: 'Document',

mediaType: file.type,

url: this.driveFileEntityService.getPublicUrl(file),

name: file.comment,

};

}

そうかも

うーん、ffmpegがwebpをサポートしてなかったのが原因か…？

一度ffmpegで原寸のPNGを出してからJPEG変換＋リサイズしているのは、ffmpegにいい感じの縮小メソッドがなかった (アス比保持で最大サイズに外接でするのがうまくいかなかった) からだった気がするのだわ。

多分ffmpeg周り触るたびに毎回言ってるぐらいの感じなんだろうけど、代案が見つからないのでIssue建てるのを躊躇したみたいな感じなのでは。

移行するなら https://github.com/ffmpegwasm/ffmpeg.wasm とか？

fluent-ffmpegはやめてないはずだわ
#5186

多分それ

移行するなら https://github.com/ffmpegwasm/ffmpeg.wasm とか？

基本的には生で支障ないから execa とかじゃない？

本題のコードの話だけど、これをwebpにする必要ある…？

本題のコードの話だけど、これをwebpにする必要ある…？

他のサムネがWebP化されてたからここは揃えないのかなって思ったのだわ

mei23 and others added 26 commits January 22, 2022 20:17

wip

4d4ac5d

Update packages/client/src/os.ts

bb11a37

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

メニューをComposition API化、switchアイテム追加

ed5805e

クライアントサイド画像圧縮の準備

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

0a788d1

disabled

8da8329

make keepOriginal to follow setting value

bb67923

Merge branch 'v12-8173' into better-8176

0ed6f4d

✌️

323d020

fix

0802306

fix

32dd3bf

✌️

1ce9e92

Merge branch 'menu-switch' into better-8176

8fcf86c

WEBP

3236eba

aaa

35845bc

✌️

0f8f7de

webp

8a32ced

lazy load browser-image-resizer

38f84a9

rename

4fdec40

rename 2

d42c985

Fix

af42693

Merge branch 'menu-switch' into better-8176

0133902

clean up

8a5fdd1

add comment

7b4f5ac

Merge branch 'menu-switch' into better-8176

2b7ec30

Merge branch 'develop' into better-8176

4905299

clean up

39f0eb1

tamaina added 2 commits January 31, 2022 01:36

jpeg, pngにもどす

6a000b3

fix

599510c

mei23 mentioned this pull request Feb 1, 2022

enhance: 画像の圧縮(webpublic化)をクライアントサイドで行う #8176

Closed

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

40dfef9

✌️

60d7d03

tamaina added 4 commits February 19, 2022 19:15

fix alert

673361f

Merge branch 'develop' into better-8176

50b7ef7

Merge branch 'develop' into better-8176

05c011a

Merge branch 'develop' into better-8176

3401cf8

tamaina mentioned this pull request Feb 20, 2022

enhance: アバターをサーバーで圧縮して取得する #8337

Closed

tamaina added 7 commits February 21, 2022 14:17

Merge branch 'develop' into better-8176

03b254a

Merge branch 'develop' into better-8176

2326cbb

Merge branch 'develop' into better-8176

2adcd2b

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

c27892c

lockfile

0215c61

Merge branch 'develop' into better-8176

7ef1302

Merge branch 'develop' into better-8176

7351365

tamaina mentioned this pull request Apr 27, 2022

「オリジナル画像を保持」チェックボックスは機能していない #8558

Closed

syuilo merged commit 12a3c68 into develop Apr 28, 2022

syuilo deleted the better-8176 branch April 28, 2022 02:14

tamaina mentioned this pull request Dec 5, 2022

Add a way to compress PNG images when uploading #9277

Closed

mei23 reviewed Dec 24, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

tamaina commented Jan 29, 2022 •

edited

Loading

tamaina commented Jan 30, 2022

tamaina commented Feb 16, 2022

tamaina commented Feb 16, 2022

mei23 commented Feb 16, 2022

mei23 commented Feb 16, 2022

mei23 commented Feb 16, 2022 •

edited

Loading

tamaina commented Feb 16, 2022

tamaina commented Apr 27, 2022

syuilo commented Apr 27, 2022

tamaina commented Apr 27, 2022

tamaina commented Apr 27, 2022

syuilo commented Apr 28, 2022

mei23 Dec 24, 2022

tamaina Dec 24, 2022

tamaina Dec 24, 2022

mei23 Dec 24, 2022 •

edited

Loading

acid-chicken Dec 24, 2022

tamaina Dec 24, 2022

mei23 Dec 24, 2022

acid-chicken Dec 24, 2022

tamaina Dec 24, 2022

mei23 Dec 24, 2022 •

edited

Loading

		@@ -27,6 +27,7 @@ export async function GenerateVideoThumbnail(path: string): Promise<IImage> {

		const outPath = `${outDir}/output.png`;

		// JPEGに変換 (Webpでもいいが、MastodonはWebpをサポートせず表示できなくなる)

	@bindThis
	public renderDocument(file: DriveFile) {
	return {
	type: 'Document',
	mediaType: file.type,
	url: this.driveFileEntityService.getPublicUrl(file),
	name: file.comment,
	};
	}

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

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

Conversation

tamaina commented Jan 29, 2022 • edited Loading

What

Why

Additional Info

tamaina commented Jan 30, 2022

tamaina commented Feb 16, 2022

tamaina commented Feb 16, 2022

mei23 commented Feb 16, 2022

mei23 commented Feb 16, 2022

mei23 commented Feb 16, 2022 • edited Loading

tamaina commented Feb 16, 2022

tamaina commented Apr 27, 2022

syuilo commented Apr 27, 2022

tamaina commented Apr 27, 2022

tamaina commented Apr 27, 2022

syuilo commented Apr 28, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mei23 Dec 24, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mei23 Dec 24, 2022 • edited Loading

Choose a reason for hiding this comment

tamaina commented Jan 29, 2022 •

edited

Loading

mei23 commented Feb 16, 2022 •

edited

Loading

mei23 Dec 24, 2022 •

edited

Loading

mei23 Dec 24, 2022 •

edited

Loading