fix: 外部メディアプロキシ使用時にアバタークロップができない問題を修正 (#10142)
* wip * fix * Update packages/frontend/src/scripts/media-proxy.ts Co-authored-by: syuilo <Syuilotan@yahoo.co.jp> --------- Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
This commit is contained in:
parent
1ba848e5f5
commit
12932d2831
|
@ -226,7 +226,10 @@ export class FileServerService {
|
|||
return;
|
||||
}
|
||||
|
||||
if (this.config.externalMediaProxyEnabled) {
|
||||
// アバタークロップなど、どうしてもオリジンである必要がある場合
|
||||
const mustOrigin = 'origin' in request.query;
|
||||
|
||||
if (this.config.externalMediaProxyEnabled && !mustOrigin) {
|
||||
// 外部のメディアプロキシが有効なら、そちらにリダイレクト
|
||||
|
||||
reply.header('Cache-Control', 'public, max-age=259200'); // 3 days
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
</div>
|
||||
</Transition>
|
||||
<div class="container">
|
||||
<img ref="imgEl" :src="imgUrl" style="display: none;" crossorigin="anonymous" @load="onImageLoad">
|
||||
<img ref="imgEl" :src="imgUrl" style="display: none;" @load="onImageLoad">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -49,7 +49,7 @@ const props = defineProps<{
|
|||
aspectRatio: number;
|
||||
}>();
|
||||
|
||||
const imgUrl = getProxiedImageUrl(props.file.url);
|
||||
const imgUrl = getProxiedImageUrl(props.file.url, undefined, true);
|
||||
let dialogEl = $shallowRef<InstanceType<typeof MkModalWindow>>();
|
||||
let imgEl = $shallowRef<HTMLImageElement>();
|
||||
let cropper: Cropper | null = null;
|
||||
|
|
|
@ -1,20 +1,20 @@
|
|||
import { query, appendQuery } from '@/scripts/url';
|
||||
import { query } from '@/scripts/url';
|
||||
import { url } from '@/config';
|
||||
import { instance } from '@/instance';
|
||||
|
||||
export function getProxiedImageUrl(imageUrl: string, type?: 'preview'): string {
|
||||
if (imageUrl.startsWith(instance.mediaProxy + '/') || imageUrl.startsWith('/proxy/')) {
|
||||
// もう既にproxyっぽそうだったらsearchParams付けるだけ
|
||||
return appendQuery(imageUrl, query({
|
||||
fallback: '1',
|
||||
...(type ? { [type]: '1' } : {}),
|
||||
}));
|
||||
export function getProxiedImageUrl(imageUrl: string, type?: 'preview', mustOrigin: boolean = false): string {
|
||||
const localProxy = `${url}/proxy`;
|
||||
|
||||
if (imageUrl.startsWith(instance.mediaProxy + '/') || imageUrl.startsWith('/proxy/') || imageUrl.startsWith(localProxy + '/')) {
|
||||
// もう既にproxyっぽそうだったらurlを取り出す
|
||||
imageUrl = (new URL(imageUrl)).searchParams.get('url') ?? imageUrl;
|
||||
}
|
||||
|
||||
return `${instance.mediaProxy}/image.webp?${query({
|
||||
return `${mustOrigin ? localProxy : instance.mediaProxy}/image.webp?${query({
|
||||
url: imageUrl,
|
||||
fallback: '1',
|
||||
...(type ? { [type]: '1' } : {}),
|
||||
...(mustOrigin ? { origin: '1' } : {}),
|
||||
})}`;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue