perf: ⚡ use fast-blurhash for blurhash decoding, up deps
This commit is contained in:
ThatOneCalculator
parent
225fa2976b
commit
8d9154c8c0
7 changed files with 484 additions and 347 deletions
12
package.json
12
package.json
|
|
@ -36,17 +36,17 @@
|
|||
"chokidar": "^3.3.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@bull-board/api": "5.2.0",
|
||||
"@bull-board/ui": "5.2.0",
|
||||
"@bull-board/api": "5.6.0",
|
||||
"@bull-board/ui": "5.6.0",
|
||||
"@napi-rs/cli": "^2.16.1",
|
||||
"@tensorflow/tfjs": "^3.21.0",
|
||||
"js-yaml": "4.1.0",
|
||||
"seedrandom": "^3.0.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "18.11.18",
|
||||
"@types/gulp": "4.0.10",
|
||||
"@types/gulp-rename": "2.0.1",
|
||||
"@types/gulp": "4.0.13",
|
||||
"@types/gulp-rename": "2.0.2",
|
||||
"@types/node": "20.4.1",
|
||||
"chalk": "4.1.2",
|
||||
"cross-env": "7.0.3",
|
||||
"cypress": "10.11.0",
|
||||
|
|
@ -59,6 +59,6 @@
|
|||
"install-peers": "^1.0.4",
|
||||
"rome": "^12.1.3",
|
||||
"start-server-and-test": "1.15.2",
|
||||
"typescript": "4.9.4"
|
||||
"typescript": "5.1.6"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
"@syuilo/aiscript": "0.11.1",
|
||||
"@types/escape-regexp": "0.0.1",
|
||||
"@types/glob": "8.1.0",
|
||||
"@types/gulp": "4.0.11",
|
||||
"@types/gulp": "4.0.13",
|
||||
"@types/gulp-rename": "2.0.2",
|
||||
"@types/katex": "0.16.0",
|
||||
"@types/matter-js": "0.18.2",
|
||||
|
|
@ -29,8 +29,8 @@
|
|||
"@vue/compiler-sfc": "3.3.4",
|
||||
"autobind-decorator": "2.4.0",
|
||||
"autosize": "5.0.2",
|
||||
"blurhash": "1.1.5",
|
||||
"broadcast-channel": "4.19.1",
|
||||
"blurhash": "2.0.5",
|
||||
"broadcast-channel": "5.1.0",
|
||||
"browser-image-resizer": "github:misskey-dev/browser-image-resizer",
|
||||
"calckey-js": "workspace:*",
|
||||
"chart.js": "4.3.0",
|
||||
|
|
@ -39,51 +39,52 @@
|
|||
"chartjs-plugin-gradient": "0.6.1",
|
||||
"chartjs-plugin-zoom": "2.0.1",
|
||||
"city-timezones": "^1.2.1",
|
||||
"compare-versions": "5.0.3",
|
||||
"compare-versions": "6.0.0",
|
||||
"cropperjs": "2.0.0-beta.2",
|
||||
"cross-env": "7.0.3",
|
||||
"cypress": "10.11.0",
|
||||
"date-fns": "2.30.0",
|
||||
"emojilib": "github:thatonecalculator/emojilib",
|
||||
"escape-regexp": "0.0.1",
|
||||
"eventemitter3": "4.0.7",
|
||||
"focus-trap": "^7.4.3",
|
||||
"eventemitter3": "5.0.1",
|
||||
"fast-blurhash": "^1.1.2",
|
||||
"focus-trap": "^7.5.2",
|
||||
"focus-trap-vue": "^4.0.2",
|
||||
"gsap": "^3.11.5",
|
||||
"gsap": "^3.12.2",
|
||||
"idb-keyval": "6.2.1",
|
||||
"insert-text-at-cursor": "0.3.0",
|
||||
"json5": "2.2.3",
|
||||
"katex": "0.16.7",
|
||||
"katex": "0.16.8",
|
||||
"matter-js": "0.18.0",
|
||||
"mfm-js": "0.23.3",
|
||||
"photoswipe": "5.3.7",
|
||||
"photoswipe": "5.3.8",
|
||||
"prettier": "3.0.0",
|
||||
"prettier-plugin-vue": "1.1.6",
|
||||
"prismjs": "1.29.0",
|
||||
"punycode": "2.1.1",
|
||||
"punycode": "2.3.0",
|
||||
"querystring": "0.2.1",
|
||||
"rndstr": "1.0.0",
|
||||
"rollup": "3.23.1",
|
||||
"rollup": "3.26.2",
|
||||
"s-age": "1.1.2",
|
||||
"sass": "1.62.1",
|
||||
"sass": "1.63.6",
|
||||
"seedrandom": "3.0.5",
|
||||
"start-server-and-test": "1.15.2",
|
||||
"strict-event-emitter-types": "2.0.0",
|
||||
"stringz": "2.1.0",
|
||||
"swiper": "9.3.2",
|
||||
"swiper": "10.0.4",
|
||||
"syuilo-password-strength": "0.0.1",
|
||||
"textarea-caret": "3.1.0",
|
||||
"three": "0.146.0",
|
||||
"throttle-debounce": "5.0.0",
|
||||
"tinycolor2": "1.5.2",
|
||||
"tsc-alias": "1.8.6",
|
||||
"tinycolor2": "1.6.0",
|
||||
"tsc-alias": "1.8.7",
|
||||
"tsconfig-paths": "4.2.0",
|
||||
"twemoji-parser": "14.0.0",
|
||||
"typescript": "5.1.3",
|
||||
"typescript": "5.1.6",
|
||||
"unicode-emoji-json": "^0.4.0",
|
||||
"uuid": "9.0.0",
|
||||
"vanilla-tilt": "1.8.0",
|
||||
"vite": "4.3.9",
|
||||
"vite": "4.4.2",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"vue": "3.3.4",
|
||||
"vue-isyourpasswordsafe": "^2.0.0",
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted } from "vue";
|
||||
import { decode } from "blurhash";
|
||||
import { decodeBlurHash } from "fast-blurhash";
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
|
|
@ -47,8 +47,8 @@ const canvas = $ref<HTMLCanvasElement>();
|
|||
let loaded = $ref(false);
|
||||
|
||||
function draw() {
|
||||
if (props.hash == null) return;
|
||||
const pixels = decode(props.hash, props.size, props.size);
|
||||
if (props.hash == null || canvas == null) return;
|
||||
const pixels = decodeBlurHash(props.hash, props.size, props.size);
|
||||
const ctx = canvas.getContext("2d");
|
||||
const imageData = ctx!.createImageData(props.size, props.size);
|
||||
imageData.data.set(pixels);
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
import { getBlurHashAverageColor } from "fast-blurhash";
|
||||
|
||||
function rgbToHex(rgb: number[]): string {
|
||||
return `#${rgb
|
||||
.map((x) => {
|
||||
const hex = x.toString(16);
|
||||
return hex.length === 1 ? `0${hex}` : hex;
|
||||
})
|
||||
.join("")}`;
|
||||
}
|
||||
|
||||
export function extractAvgColorFromBlurhash(hash: string) {
|
||||
return typeof hash === "string"
|
||||
? `#${[...hash.slice(2, 6)]
|
||||
.map((x) =>
|
||||
"0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~".indexOf(
|
||||
x,
|
||||
),
|
||||
)
|
||||
.reduce((a, c) => a * 83 + c, 0)
|
||||
.toString(16)
|
||||
.padStart(6, "0")}`
|
||||
? rgbToHex(getBlurHashAverageColor(hash))
|
||||
: undefined;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -217,7 +217,7 @@ function openAccountMenu(ev: MouseEvent) {
|
|||
{
|
||||
withExtraOperation: true,
|
||||
},
|
||||
ev
|
||||
ev,
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -232,7 +232,7 @@ function more(ev: MouseEvent) {
|
|||
src: ev.currentTarget ?? ev.target,
|
||||
},
|
||||
{},
|
||||
"closed"
|
||||
"closed",
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
751
pnpm-lock.yaml
751
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue