oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

enhance(client): 1枚だけのメディアリストの画像のアスペクト比を画像に応じて縦長にする (#10452)

Browse source 
* ✌️

* fix

* ✌️

* 422px上限

* 334

* min-height: 130px

* 64px

* fix

* wip

* ✌️

* fix

* max-height: none

* MkImgWithBlurHashでratioを計算する

* wip

* fix

* fix?

* Revert "fix?"

This reverts commit e39d832dd1498ae58a2372b6dc527585ae165bac.

* Revert "fix"

This reverts commit 15be36ba55a411c5aac69037f693e1d922451f15.

* Revert "wip"

This reverts commit af7d86f69dd89e138d98f1285976b502f382e6c6.

* fix

* Revert "Revert "wip""

This reverts commit bb0036ae22ea2bca896ee9bb500bae624e81049b.

* Revert "Revert "fix""

This reverts commit c1d94a45c575cc843e061a0c55df1106bf033035.

* Revert "Revert "fix?""

This reverts commit 9cb4fbfd96db9adaf92cf3ec1f6f15b1b257d7b3.

* fix

* use clamp

* readable

* add 1:1, 3:4

* moveComment

* 3:4 → 2:3

* fix

* default

* fallback

* Revert "fallback"

This reverts commit 741717dd4903ed89b6536d8ea1ca061aacfa7dcb.

* Fix?(server): Content-Dispositionのパースでエラーが発生した場合にもダウンロードが完了するように
#10626
This commit is contained in:
tamaina 2023-04-15 21:35:19 +09:00 • committed by GitHub
parent 38fdc73d01
commit 15761a0fa8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 138 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

55
packages/frontend/src/components/MkImgWithBlurhash.vue
View file

@ -1,12 +1,12 @@
<template>
<div :class="[$style.root, { [$style.cover]: cover }]" :title="title">
<canvas v-if="!loaded || forceBlurhash" ref="canvas" :class="$style.canvas" :width="size" :height="size" :title="title"/>
<img v-if="src && !forceBlurhash" :class="$style.img" :src="src" :title="title" :alt="alt" @load="onLoad"/>
<div :class="[$style.root, { [$style.cover]: cover }]" :title="title ?? ''">
<canvas v-if="!loaded || forceBlurhash" ref="canvas" :class="$style.canvas" :width="width" :height="height" :title="title ?? ''"/>
<img v-if="src && !forceBlurhash" v-show="loaded" :class="$style.img" :src="src" :title="title ?? ''" :alt="alt ?? ''" @load="onLoad"/>
</div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import { onMounted, watch } from 'vue';
import { decode } from 'blurhash';
const props = withDefaults(defineProps<{
@ -14,34 +14,55 @@ const props = withDefaults(defineProps<{
hash?: string;
alt?: string | null;
title?: string | null;
size?: number;
height?: number;
width?: number;
cover?: boolean;
forceBlurhash?: boolean;
}>(), {
src: null,
alt: '',
title: null,
size: 64,
height: 64,
width: 64,
cover: true,
forceBlurhash: false,
});
const canvas = $shallowRef<HTMLCanvasElement>();
let loaded = $ref(false);
function draw() {
if (props.hash == null) return;
const pixels = decode(props.hash, props.size, props.size);
const ctx = canvas.getContext('2d');
const imageData = ctx!.createImageData(props.size, props.size);
imageData.data.set(pixels);
ctx!.putImageData(imageData, 0, 0);
}
let width = $ref(props.width);
let height = $ref(props.height);
function onLoad() {
loaded = true;
}
watch([() => props.width, () => props.height], () => {
const ratio = props.width / props.height;
if (ratio > 1) {
width = Math.round(64 * ratio);
height = 64;
} else {
width = 64;
height = Math.round(64 / ratio);
}
}, {
immediate: true,
});
function draw() {
if (props.hash == null) return;
const pixels = decode(props.hash, width, height);
const ctx = canvas.getContext('2d');
const imageData = ctx!.createImageData(width, height);
imageData.data.set(pixels);
ctx!.putImageData(imageData, 0, 0);
}
watch(() => props.hash, () => {
draw();
});
onMounted(() => {
draw();
});
@ -54,6 +75,7 @@ onMounted(() => {
height: 100%;
&.cover {
> .canvas,
> .img {
object-fit: cover;
}
@ -68,8 +90,7 @@ onMounted(() => {
}
.canvas {
position: absolute;
object-fit: cover;
object-fit: contain;
}
.img {