From ae059881fbc28eb3dc2c90fea3694720b8dda505 Mon Sep 17 00:00:00 2001 From: ThatOneCalculator Date: Thu, 13 Jul 2023 19:00:26 -0700 Subject: [PATCH] refactor: :zap: use blurhash-as for encoding and decoding --- packages/backend/package.json | 2 +- packages/backend/src/misc/get-file-info.ts | 11 ++++++-- packages/client/package.json | 1 + .../src/components/MkImgWithBlurhash.vue | 12 +++++---- pnpm-lock.yaml | 25 ++++++++++++++----- 5 files changed, 37 insertions(+), 14 deletions(-) diff --git a/packages/backend/package.json b/packages/backend/package.json index fe8c078a0..b021f3f40 100644 --- a/packages/backend/package.json +++ b/packages/backend/package.json @@ -47,7 +47,7 @@ "aws-sdk": "2.1413.0", "axios": "^1.4.0", "bcryptjs": "2.4.3", - "blurhash": "2.0.5", + "blurhash-as": "^0.10.0", "bull": "4.10.4", "cacheable-lookup": "7.0.0", "calckey-js": "workspace:*", diff --git a/packages/backend/src/misc/get-file-info.ts b/packages/backend/src/misc/get-file-info.ts index 76964890e..8cc24026d 100644 --- a/packages/backend/src/misc/get-file-info.ts +++ b/packages/backend/src/misc/get-file-info.ts @@ -10,11 +10,12 @@ import FFmpeg from "fluent-ffmpeg"; import isSvg from "is-svg"; import { type predictionType } from "nsfwjs"; import sharp from "sharp"; -import { encode } from "blurhash"; +import * as blurhash from "blurhash-as"; import { detectSensitive } from "@/services/detect-sensitive.js"; import { createTempDir } from "./create-temp.js"; const pipeline = util.promisify(stream.pipeline); +blurhash.init(); export type FileInfo = { size: number; @@ -432,7 +433,13 @@ function getBlurhash(path: string): Promise { let hash; try { - hash = encode(new Uint8ClampedArray(buffer), width, height, 7, 7); + hash = blurhash.encode( + new Uint8ClampedArray(buffer), + width, + height, + 7, + 7, + ); } catch (e) { return reject(e); } diff --git a/packages/client/package.json b/packages/client/package.json index 95fb9f9b2..014f2f646 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -30,6 +30,7 @@ "autobind-decorator": "2.4.0", "autosize": "5.0.2", "blurhash": "2.0.5", + "blurhash-as": "^0.10.0", "broadcast-channel": "5.1.0", "browser-image-resizer": "github:misskey-dev/browser-image-resizer", "calckey-js": "workspace:*", diff --git a/packages/client/src/components/MkImgWithBlurhash.vue b/packages/client/src/components/MkImgWithBlurhash.vue index 5a0cefec2..06f7b56a9 100644 --- a/packages/client/src/components/MkImgWithBlurhash.vue +++ b/packages/client/src/components/MkImgWithBlurhash.vue @@ -4,12 +4,12 @@ ref="canvas" :width="size" :height="size" - :title="title" + :title="title ?? ''" /> import { onMounted } from "vue"; -import { decodeBlurHash } from "fast-blurhash"; +import * as blurhash from "blurhash-as/browser"; +import wasmURL from "blurhash-as/build/optimized.wasm?url"; const props = withDefaults( defineProps<{ @@ -46,9 +47,10 @@ const props = withDefaults( const canvas = $ref(); let loaded = $ref(false); -function draw() { +async function draw() { if (props.hash == null || canvas == null) return; - const pixels = decodeBlurHash(props.hash, props.size, props.size); + blurhash.setURL(wasmURL); + const pixels = await blurhash.decode(props.hash, props.size, props.size); const ctx = canvas.getContext("2d"); const imageData = ctx!.createImageData(props.size, props.size); imageData.data.set(pixels); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index adead9c6f..15f08733f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -147,9 +147,9 @@ importers: bcryptjs: specifier: 2.4.3 version: 2.4.3 - blurhash: - specifier: 2.0.5 - version: 2.0.5 + blurhash-as: + specifier: ^0.10.0 + version: 0.10.0 bull: specifier: 4.10.4 version: 4.10.4 @@ -736,6 +736,9 @@ importers: blurhash: specifier: 2.0.5 version: 2.0.5 + blurhash-as: + specifier: ^0.10.0 + version: 0.10.0 broadcast-channel: specifier: 5.1.0 version: 5.1.0 @@ -780,7 +783,7 @@ importers: version: 2.30.0 emojilib: specifier: github:thatonecalculator/emojilib - version: github.com/thatonecalculator/emojilib/1d6adc1af8105b4937d2f0e7479acf5bd565bd9b + version: github.com/thatonecalculator/emojilib/d3c8c6a77d4362b3b3180099f1d2eac344ce245c escape-regexp: specifier: 0.0.1 version: 0.0.1 @@ -1078,6 +1081,9 @@ packages: '@jridgewell/gen-mapping': 0.3.3 '@jridgewell/trace-mapping': 0.3.18 + /@assemblyscript/loader@0.27.5: + resolution: {integrity: sha512-DGEJQIKh/pMseal4i26haGutxNfs3nGzwY0MNseoFKcE3DKIXQ25deWpNOqIJQPvjS4FKH+oUpzsTv0oa17+xg==} + /@babel/code-frame@7.22.5: resolution: {integrity: sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==} engines: {node: '>=6.9.0'} @@ -5411,8 +5417,15 @@ packages: resolution: {integrity: sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w==} dev: true + /blurhash-as@0.10.0: + resolution: {integrity: sha512-0xkq5uhvdQZfbytKAPtuy3vkkGdsZJxxqL3l6lWIgTIoEdH85jU/0HRENFDH5AW3MwChc6CnfXB4RUvvoRbJeA==} + engines: {node: '>=10'} + dependencies: + '@assemblyscript/loader': 0.27.5 + /blurhash@2.0.5: resolution: {integrity: sha512-cRygWd7kGBQO3VEhPiTgq4Wc43ctsM+o46urrmPOiuAe+07fzlSB9OJVdpgDL0jPqXUVQ9ht7aq7kxOeJHRK+w==} + dev: true /bmp-js@0.1.0: resolution: {integrity: sha512-vHdS19CnY3hwiNdkaqk93DvjVLfbEcI8mys4UjuWrlX1haDmroo8o4xCzh4wD6DGV6HxRCyauwhHRqMTfERtjw==} @@ -17486,8 +17499,8 @@ packages: url-polyfill: 1.1.12 dev: true - github.com/thatonecalculator/emojilib/1d6adc1af8105b4937d2f0e7479acf5bd565bd9b: - resolution: {tarball: https://codeload.github.com/thatonecalculator/emojilib/tar.gz/1d6adc1af8105b4937d2f0e7479acf5bd565bd9b} + github.com/thatonecalculator/emojilib/d3c8c6a77d4362b3b3180099f1d2eac344ce245c: + resolution: {tarball: https://codeload.github.com/thatonecalculator/emojilib/tar.gz/d3c8c6a77d4362b3b3180099f1d2eac344ce245c} name: emojilib version: 3.0.10 dev: true