-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
66 lines (61 loc) · 2.17 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas"></canvas>
<canvas id="canvasScale"></canvas>
<script type="module">
import {scaleImage} from './src/xBRZ.js'
// scaleImage()
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
const canvasScale = document.querySelector('#canvasScale');
const ctxScale = canvasScale.getContext('2d');
const srcImage = new Image();
srcImage.src = './source.png';
srcImage.onload = () => {
const {width, height} = srcImage;
canvas.width = width;
canvas.height = height;
ctx.drawImage(srcImage, 0, 0, width, height);
const imageData = ctx.getImageData(0, 0, width, height);
const buffer = Array.from(imageData.data);
let source = [];
for (let i = 0, len = buffer.length; i < len; i += 4) {
const r = buffer[i];
const g = buffer[i + 1];
const b = buffer[i + 2];
const a = buffer[i + 3];
const pixel = a << 24 | r << 16 | g << 8 | b;
source.push(pixel)
}
const scaleSize = 6;
let target = new Array(width * scaleSize * height * scaleSize);
target.fill(0);
scaleImage(scaleSize, source, target, width, height, 0, height);
let bufferScale = [];
for (let i = 0, len = target.length; i < len; ++i) {
const pixel = target[i];
const a = (pixel >> 24) & 0xff;
const r = (pixel >> 16) & 0xff;
const g = (pixel >> 8) & 0xff;
const b = (pixel) & 0xff;
bufferScale.push(r);
bufferScale.push(g);
bufferScale.push(b);
bufferScale.push(a);
}
const widthScale = width * scaleSize;
const heightScale = height * scaleSize;
canvasScale.width = widthScale;
canvasScale.height = heightScale;
const imgScaleBuffer = new Uint8ClampedArray(bufferScale);
const imgScaleData = new ImageData(imgScaleBuffer, widthScale, heightScale);
ctxScale.putImageData(imgScaleData, 0, 0)
}
</script>
</body>
</html>