generated from qq15725/starter-ts
-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
115 lines (99 loc) · 2.74 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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Playground</title>
<style>
canvas {
margin: 8px;
width: 200px;
}
img {
display: block;
margin: 8px;
width: 200px;
}
</style>
</head>
<button>ReEncode</button>
<img src="/test/assets/test10.gif" />
<body>
<script type="module" async>
import { Encoder, decode, decodeFrames } from './src'
/* eslint-disable no-console */
const el = document.querySelector('img')
const url = el.src
let width = 0
let height = 0
let frames = []
if (url.startsWith('data:image/svg+xml;')) {
width = el.naturalWidth
height = el.naturalHeight
const canvas = document.createElement('canvas')
canvas.width = width
canvas.height = height
const ctx = canvas.getContext('2d')
ctx.drawImage(el, 0, 0)
const frame = ctx.getImageData(0, 0, width, height)
frames.push(frame)
} else {
const data = await fetch(url).then((res) => res.arrayBuffer())
console.log('raw size', data.byteLength / 1024)
console.time('decode')
const gif = decode(data)
console.timeEnd('decode')
console.log(gif)
console.time('decode frames')
frames = await decodeFrames(data, {
// workerUrl,
})
console.timeEnd('decode frames')
width = gif.width
height = gif.height
}
const encoder = new Encoder({
debug: true,
width,
height,
maxColors: 255,
// workerUrl,
})
for (let len = frames.length, i = 0; i < len; i++) {
const frame = frames[i]
const canvas = document.createElement('canvas')
canvas.width = width
canvas.height = height
canvas.style.width = '60px'
canvas.style.border = '1px solid grey'
canvas.getContext('2d').putImageData(
new ImageData(frame.data, frame.width, frame.height),
0, 0,
)
document.body.append(canvas)
}
document.querySelector('button').onclick = async () => {
console.time('encode')
for (let len = frames.length, i = 0; i < len; i++) {
const frame = frames[i]
await encoder.encode({
delay: frame.delay,
data: frame.data,
})
}
console.timeEnd('encode')
console.time('flush')
const blob = await encoder.flush('blob')
console.timeEnd('flush')
console.log('encode size', blob.size / 1024)
const img = new Image()
img.src = URL.createObjectURL(blob)
document.body.append(img)
blob.arrayBuffer().then(async buffer => {
console.log(decode(buffer))
await decodeFrames(buffer)
})
console.log(encoder)
}
</script>
</body>
</html>