-
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
59 lines (59 loc) · 3.44 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<style>body{box-sizing:border-box;display:flex;justify-content:space-evenly;margin:0;padding:4em 0 0}body,html{height:100%}h1:hover+section{order:2}img{display:block}figcaption{line-height:2}figcaption::after{content:" ms"}figure{margin:0}h1{position:absolute;top:0}pre{width:256px}</style>
<script type="module">
import { decode } from "https://unpkg.com/[email protected]/dist/index.mjs"
import { decodeBlurHash } from "https://unpkg.com/[email protected]/index.js"
import { Bench } from "https://unpkg.com/[email protected]/dist/index.js"
import { render } from "/src/index.ts"
const params = new URLSearchParams(location.search)
const source = params.get("source") || "|HF5]+Yk^6#M9wKSW@j=#*@-5b,1J5O[V=Nfs;w[@[or[k6.O[TLtJnNnO};FxngOZE3NgNHsps,jMFxS#OtcXnzRjxZxHj]OYNeR:JCs9xunhwIbeIpNaxHNGr;v}aeo0Xmt6XS$et6#*$ft6nhxHnNV@w{nOenwfNHo0"
const buraha = document.body.appendChild(document.createElement("section"))
buraha.appendChild(document.createElement("h2")).textContent = "Buraha"
const blurhash = document.body.appendChild(document.createElement("section"))
blurhash.appendChild(document.createElement("h2")).textContent = "BlurHash"
const fastBlurHash = document.body.appendChild(document.createElement("section"))
fastBlurHash.appendChild(document.createElement("h2")).textContent = "Fast BlurHash"
const canvasBuraha = document.createElement("canvas")
const canvasBlurHash = document.createElement("canvas")
const canvasFastBlurHash = document.createElement("canvas")
canvasBuraha.width = canvasBuraha.height = canvasBlurHash.width = canvasBlurHash.height = canvasFastBlurHash.width = canvasFastBlurHash.height = params.get("size") || 256
function runBuraha() {
render(source, canvasBuraha, 1)
return canvasBuraha
}
function runBlurHash() {
const pixels = decode(source, canvasBlurHash.width, canvasBlurHash.height)
const context = canvasBlurHash.getContext("2d")
const imageData = context.createImageData(canvasBlurHash.width, canvasBlurHash.height)
imageData.data.set(pixels)
context.putImageData(imageData, 0, 0)
return canvasBlurHash
}
function runFastBlurHash() {
const pixels = decodeBlurHash(source, canvasFastBlurHash.width, canvasFastBlurHash.height)
const context = canvasFastBlurHash.getContext("2d")
const imageData = context.createImageData(canvasFastBlurHash.width, canvasFastBlurHash.height)
imageData.data.set(pixels)
context.putImageData(imageData, 0, 0)
return canvasFastBlurHash
}
const burahaImage = buraha.appendChild(new Image())
const blurhashImage = blurhash.appendChild(new Image())
const fastBlurHashImage = fastBlurHash.appendChild(new Image())
burahaImage.src = runBuraha().toDataURL()
blurhashImage.src = runBlurHash().toDataURL()
fastBlurHashImage.src = runFastBlurHash().toDataURL()
Promise.all([burahaImage.decode(), blurhashImage.decode(), fastBlurHashImage.decode()]).then(async () => {
const bench = new Bench({ time: 4096 })
bench
.add("Buraha", runBuraha)
.add("BlurHash", runBlurHash)
.add("Fast BlurHash", runFastBlurHash)
await bench.run()
const [resultBuraha, resultBlurHash, resultFastBlurHash] = bench.table()
buraha.appendChild(document.createElement("pre")).textContent = JSON.stringify(resultBuraha, null, 2)
blurhash.appendChild(document.createElement("pre")).textContent = JSON.stringify(resultBlurHash, null, 2)
fastBlurHash.appendChild(document.createElement("pre")).textContent = JSON.stringify(resultFastBlurHash, null, 2)
})
</script>
<h1>benchmark (compare w/ original implementation)</h1>