moris/mi.moris.day
1
0
Fork 0
forked from mirror/misskey
Code Pull Requests Activity

use buraha

Browse Source
This commit is contained in:
tamaina 2023-05-07 16:39:38 +00:00
parent 15d4cfa2f7
commit 0a17d7fa22
5 changed files with 73 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/frontend/package.json
View File

@ -25,9 +25,9 @@
"@vue-macros/reactivity-transform": "^0.3.5",
"@vue/compiler-sfc": "3.2.47",
"autosize": "5.0.2",
"blurhash": "2.0.5",
"broadcast-channel": "4.20.2",
"browser-image-resizer": "github:misskey-dev/browser-image-resizer#v2.2.1-misskey.3",
"buraha": "github:misskey-dev/buraha",
"canvas-confetti": "1.6.0",
"chart.js": "4.3.0",
"chartjs-adapter-date-fns": "3.0.0",

65
packages/frontend/src/components/MkImgWithBlurhash.vue
View File

@ -14,15 +14,22 @@
</TransitionGroup>
</div>
</template>
<script lang="ts">
import DrawBlurhash from '@/workers/draw-blurhash?worker';
const worker = new DrawBlurhash();
</script>
<script lang="ts" setup>
import { computed, onMounted, shallowRef, useCssModule, watch } from 'vue';
import { computed, onMounted, onUnmounted, shallowRef, useCssModule, watch } from 'vue';
import { v4 as uuid } from 'uuid';
import { render } from 'buraha';
import { defaultStore } from '@/store';
import DrawBlurhash from '@/workers/draw-blurhash?worker';
import TestWebGL2 from '@/workers/test-webgl2?worker';
const workerPromise = new Promise<Worker | null>(resolve => {
const testWorker = new TestWebGL2();
testWorker.addEventListener('message', event => {
if (event.data.result) resolve(new DrawBlurhash());
else resolve(null);
testWorker.terminate();
});
});
const $style = useCssModule();
const props = withDefaults(defineProps<{
@ -54,11 +61,11 @@ const props = withDefaults(defineProps<{
forceBlurhash: false,
});
const viewId = uuid();
const canvas = shallowRef<HTMLCanvasElement>();
let loaded = $ref(false);
let canvasWidth = $ref(props.width);
let canvasHeight = $ref(props.height);
let currentDrawId = $ref<string>();
const hide = computed(() => !loaded || props.forceBlurhash);
function onLoad() {
@ -78,32 +85,38 @@ watch([() => props.width, () => props.height], () => {
immediate: true,
});
function draw() {
if (props.hash == null) return;
currentDrawId = uuid();
worker.postMessage({
id: currentDrawId,
hash: props.hash,
width: canvasWidth,
height: canvasHeight,
});
async function draw(transfer: boolean = false) {
if (!canvas.value || props.hash == null) return;
const worker = await workerPromise;
if (worker) {
let offscreen: OffscreenCanvas | undefined;
if (transfer) {
offscreen = canvas.value.transferControlToOffscreen();
}
worker.postMessage({
id: viewId,
canvas: offscreen ?? undefined,
hash: props.hash,
}, offscreen ? [offscreen] : []);
} else {
try {
render(props.hash, canvas.value);
} catch (error) {
console.error('Error occured during drawing blurhash', error);
}
}
}
worker.addEventListener('message', event => {
if (!canvas.value) return;
if (event.data.id !== currentDrawId) return;
const ctx = canvas.value.getContext('2d');
if (!ctx) return;
const bitmap = event.data.bitmap as ImageBitmap;
ctx.drawImage(bitmap, 0, 0, canvasWidth, canvasHeight);
});
watch(() => props.hash, () => {
draw();
});
onMounted(() => {
draw();
draw(true);
});
onUnmounted(() => {
workerPromise.then(worker => worker!.terminate());
});
</script>

25
packages/frontend/src/workers/draw-blurhash.ts
View File

@ -1,18 +1,19 @@
import { decode } from 'blurhash';
import { render } from 'buraha';
let canvas: OffscreenCanvas;
onmessage = async (event) => {
console.log(event.data);
if (!('hash' in event.data && typeof event.data.hash === 'string')) {
return;
}
const width = event.data.width ?? 64;
const height = event.data.height ?? 64;
const canvas = new OffscreenCanvas(width, height);
const ctx = canvas.getContext!('2d');
if (!ctx) return;
const imageData = ctx.createImageData(width, height);
const pixels = decode(event.data.hash, width, height);
imageData.data.set(pixels);
ctx.putImageData(imageData, 0, 0);
const bitmap = canvas.transferToImageBitmap();
postMessage({ bitmap, id: event.data.id });
if (event.data.canvas) {
canvas = event.data.canvas;
}
if (!canvas) {
throw new Error('No canvas');
}
render(event.data.hash, canvas);
postMessage({ result: true });
};

7
packages/frontend/src/workers/test-webgl2.ts Normal file
View File

@ -0,0 +1,7 @@
const canvas = new OffscreenCanvas(1, 1);
const gl = canvas.getContext('webgl2');
if (gl) {
postMessage({ result: true });
} else {
postMessage({ result: false });
}

20
pnpm-lock.yaml generated
View File

@ -348,7 +348,7 @@ importers:
version: 2.1.0
summaly:
specifier: github:misskey-dev/summaly
version: github.com/misskey-dev/summaly/2d63e2a0066f89871e777cc81d43c1ade8c97517
version: github.com/misskey-dev/summaly/77dd5654bb82280b38c1f50e51a771c33f3df503
systeminformation:
specifier: 5.17.12
version: 5.17.12
@ -657,15 +657,15 @@ importers:
autosize:
specifier: 5.0.2
version: 5.0.2
blurhash:
specifier: 2.0.5
version: 2.0.5
broadcast-channel:
specifier: 4.20.2
version: 4.20.2
browser-image-resizer:
specifier: github:misskey-dev/browser-image-resizer#v2.2.1-misskey.3
version: github.com/misskey-dev/browser-image-resizer/0227e860621e55cbed0aabe6dc601096a7748c4a
buraha:
specifier: github:misskey-dev/buraha
version: github.com/misskey-dev/buraha/3eb01892924dc0bb587a6795adf8a8ed25a816d8
canvas-confetti:
specifier: 1.6.0
version: 1.6.0
@ -984,7 +984,7 @@ importers:
version: github.com/misskey-dev/storybook-addon-misskey-theme/cf583db098365b2ccc81a82f63ca9c93bc32b640(@storybook/blocks@7.0.7)(@storybook/components@7.0.7)(@storybook/core-events@7.0.7)(@storybook/manager-api@7.0.7)(@storybook/preview-api@7.0.7)(@storybook/theming@7.0.7)(@storybook/types@7.0.7)(react-dom@18.2.0)(react@18.2.0)
summaly:
specifier: github:misskey-dev/summaly
version: github.com/misskey-dev/summaly/2d63e2a0066f89871e777cc81d43c1ade8c97517
version: github.com/misskey-dev/summaly/77dd5654bb82280b38c1f50e51a771c33f3df503
vite-plugin-turbosnap:
specifier: 1.0.2
version: 1.0.2
@ -20357,6 +20357,12 @@ packages:
version: 2.2.1-misskey.3
dev: false
github.com/misskey-dev/buraha/3eb01892924dc0bb587a6795adf8a8ed25a816d8:
resolution: {tarball: https://codeload.github.com/misskey-dev/buraha/tar.gz/3eb01892924dc0bb587a6795adf8a8ed25a816d8}
name: buraha
version: 0.0.0
dev: false
github.com/misskey-dev/sharp-read-bmp/02d9dc189fa7df0c4bea09330be26741772dac01:
resolution: {tarball: https://codeload.github.com/misskey-dev/sharp-read-bmp/tar.gz/02d9dc189fa7df0c4bea09330be26741772dac01}
name: sharp-read-bmp
@ -20399,8 +20405,8 @@ packages:
react-dom: 18.2.0(react@18.2.0)
dev: true
github.com/misskey-dev/summaly/2d63e2a0066f89871e777cc81d43c1ade8c97517:
resolution: {tarball: https://codeload.github.com/misskey-dev/summaly/tar.gz/2d63e2a0066f89871e777cc81d43c1ade8c97517}
github.com/misskey-dev/summaly/77dd5654bb82280b38c1f50e51a771c33f3df503:
resolution: {tarball: https://codeload.github.com/misskey-dev/summaly/tar.gz/77dd5654bb82280b38c1f50e51a771c33f3df503}
name: summaly
version: 4.0.2
dependencies: