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

perf(frontend): MkImgWithBlurhashでblurhash描画に使うcanvasは再利用するようにする (#10966)

Browse source 
* blurhashを描画するためのcanvasは再利用する

* Revert "perf(frontend): WebGL contextの数を減らす"

This reverts commit aeb8955ca2.

* MkAvatarは平均色だけにする

* clean up

* fix
This commit is contained in:
tamaina 2023-07-02 13:46:49 +09:00 • committed by GitHub
parent a1327fa9e1
commit 734c41aba5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 39 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -22,10 +22,13 @@ import TestWebGL2 from '@/workers/test-webgl2?worker';
import { WorkerMultiDispatch } from '@/scripts/worker-multi-dispatch';
import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash';
const workerPromise = new Promise<WorkerMultiDispatch | null>(resolve => {
const canvasPromise = new Promise<WorkerMultiDispatch | HTMLCanvasElement>(resolve => {
// テスト環境で Web Worker インスタンスは作成できない
if (import.meta.env.MODE === 'test') {
resolve(null);
const canvas = document.createElement('canvas');
canvas.width = 64;
canvas.height = 64;
resolve(canvas);
return;
}
const testWorker = new TestWebGL2();
@ -38,7 +41,10 @@ const workerPromise = new Promise<WorkerMultiDispatch | null>(resolve => {
resolve(workers);
if (_DEV_) console.log('WebGL2 in worker is supported!');
} else {
resolve(null);
const canvas = document.createElement('canvas');
canvas.width = 64;
canvas.height = 64;
resolve(canvas);
if (_DEV_) console.log('WebGL2 in worker is not supported...');
}
testWorker.terminate();
@ -70,6 +76,7 @@ const props = withDefaults(defineProps<{
width?: number;
cover?: boolean;
forceBlurhash?: boolean;
onlyAvgColor?: boolean; // 軽量化のためにBlurhashを使わずに平均色だけを描画
}>(), {
transition: null,
src: null,
@ -79,6 +86,7 @@ const props = withDefaults(defineProps<{
width: 64,
cover: true,
forceBlurhash: false,
onlyAvgColor: false,
});
const viewId = uuid();
@ -139,8 +147,8 @@ function drawImage(bitmap: CanvasImageSource) {
ctx.drawImage(bitmap, 0, 0, canvasWidth, canvasHeight);
}
async function draw() {
if (!canvas.value || props.hash == null) return;
function drawAvg() {
if (!canvas.value || !props.hash) return;
const ctx = canvas.value.getContext('2d');
if (!ctx) return;
@ -149,25 +157,28 @@ async function draw() {
ctx.beginPath();
ctx.fillStyle = extractAvgColorFromBlurhash(props.hash) ?? '#888';
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
}
const workers = await workerPromise;
if (workers) {
workers.postMessage(
async function draw() {
if (props.hash == null) return;
drawAvg();
if (props.onlyAvgColor) return;
const work = await canvasPromise;
if (work instanceof WorkerMultiDispatch) {
work.postMessage(
{
id: viewId,
hash: props.hash,
width: canvasWidth,
height: canvasHeight,
},
undefined,
);
} else {
try {
const work = document.createElement('canvas');
work.width = canvasWidth;
work.height = canvasHeight;
render(props.hash, work);
ctx.drawImage(work, 0, 0, canvasWidth, canvasHeight);
drawImage(work);
} catch (error) {
console.error('Error occured during drawing blurhash', error);
}
@ -179,9 +190,9 @@ function workerOnMessage(event: MessageEvent) {
drawImage(event.data.bitmap as ImageBitmap);
}
workerPromise.then(worker => {
if (worker) {
worker.addListener(workerOnMessage);
canvasPromise.then(work => {
if (work instanceof WorkerMultiDispatch) {
work.addListener(workerOnMessage);
}
draw();
@ -204,8 +215,10 @@ onMounted(() => {
});
onUnmounted(() => {
workerPromise.then(worker => {
worker?.removeListener(workerOnMessage);
canvasPromise.then(work => {
if (work instanceof WorkerMultiDispatch) {
work.removeListener(workerOnMessage);
}
});
});
</script>