大きすぎる（16777216ピクセルを超える）画像が処理できない

[tamaina]

https://misskey.io/notes/9di5jzpy1b

https://misskey.io/notes/9di6cdvew1

[tamaina]

（Canon のアプリで iPhone に取り込むとなんだか変なファイルが作成されるらしいという噂は聞く）

[syuilo]

サイズがデカすぎるとか？

[tamaina]

サイズのデカさは関係ない気がする

[tamaina]

というかCanonのアプリでiPhoneで取り込んだファイル自体がとりあえず欲しい

[Soli0222]

おそらくこのIssue(misskey-dev/misskey#12026) と同じ問題かと思うのですが、iOS SafariのWebインスペクタを確認すると、Canvas area exceeds the maximum limit (width * height > 16777216).と表示されており、iOS Safariでの制約に当たってしまうことが原因であると考えています。

また、原因の箇所はscaling_operations.tsの125行目、converting = new OffscreenCanvas(bmp.width, bmp.height);であることも特定しており、Canvasのサイズを500*500にして16777216ピクセルを超える画像をアップロードしたところ、真っ黒にはならないことを確認しています。

原因は特定しましたが、修正方法が分からず、コメントにて失礼します。

[kyong]

Canonの写真に限らず、iPhone15Proで撮影した写真では高確率で真っ黒になります。
（マクロモードで撮影した写真はアップロードできる）
再現できるサンプルを添付します。
IMG_7370.jpeg.zip

[samunohito]

scaling_operations.tsのscaleImage()にて、OffscreenCanvasの総ピクセル数が167777216を突破しないように上限を設けるようにしたらいかがでしょうか。
自分の手元の環境でbrowser-image-resizerをMisskeyのworkspaceに組み入れて下記ソースを当てて動かしてみたところ、iPhone/Safariから大きな画像（未対処だと黒い画像になるもの）をアップロードしても黒い画像となりませんでした。

内容としては、縦横の比率を維持したまま167777216ピクセルに収まるようにcanvasの縦横サイズを調節するという物です。

function calcLimitSize(size: { width: number, height: number }, maximumPixels: number) {
	const { width, height } = size;
	const requiredPixels = width * height;
	if (requiredPixels <= maximumPixels) {
		return size;
	}

	const aspectRatio = width / height;
	const newWidth = Math.sqrt(maximumPixels * aspectRatio);
	const newHeight = Math.sqrt(maximumPixels / aspectRatio);

	return {
		width: Math.floor(newWidth),
		height: Math.floor(newHeight),
	};
}

export async function scaleImage({ img, config }: {
	img: ImageBitmapSource | OffscreenCanvas;
	config: BrowserImageResizerConfig;
}) {
	if (config.debug) {
		console.log('browser-image-resizer: Scale: Started', img);
	}
	let converting: OffscreenCanvas;

	if (img instanceof OffscreenCanvas) {
		converting = img;
	} else {
		const bmp = await createImageBitmap(img);
                // 比率を維持したまま
		const limitSize = calcLimitSize({ width: bmp.width, height: bmp.height }, 16777216)
		converting = new OffscreenCanvas(limitSize.width, limitSize.height);
		converting.getContext('2d')?.drawImage(bmp, 0, 0);
	}

	if (!converting?.getContext('2d')) throw Error('browser-image-resizer: Canvas Context is empty.');

        ....

[samunohito]

（safari以外でも問答無用に動いてしまうので、改善する必要あります…）

[tamaina]

#6 (comment)

この例だと画像がはみ出そう

 		converting.getContext('2d')?.drawImage(bmp, 0, 0);

を

 		converting.getContext('2d')?.drawImage(bmp, 0, 0, limitSize.width, limitSize.height);

にする必要がある

[tamaina]

何これ？iOS Safariだけ制限が辛い（macOS Safariは大丈夫）な仕様なんか？？

[tamaina]

https://qiita.com/segur/items/12cdbb04c07ab9a0c567

[tamaina]

しかも挙動見てるとなんかエラーハンドリングできないんだろうか？

[tamaina]

なおした