-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
102 lines (102 loc) · 4.13 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
<!DOCTYPE html>
<html>
<head>
<title>Resize.js Demo</title>
<script src="./resize.js"></script>
<script>
function process_data() {
var elementHandle = document.createElement("canvas");
var contextHandle = elementHandle.getContext("2d");
var source = document.getElementById("source");
elementHandle.width = 500;
elementHandle.height = 500;
contextHandle.drawImage(source, 0, 0, source.width, source.height, 0, 0, source.width, source.height);
var dataToScale = contextHandle.getImageData(0, 0, source.width, source.height).data;
//down_context2d
elementHandle = document.getElementById("down_context2d");
contextHandle = elementHandle.getContext("2d");
elementHandle.width = 150;
elementHandle.height = 150;
contextHandle.drawImage(source, 0, 0, source.width, source.height, 0, 0, 150, 150);
//down_context2d_small
elementHandle = document.getElementById("down_context2d_small");
contextHandle = elementHandle.getContext("2d");
elementHandle.width = 50;
elementHandle.height = 50;
contextHandle.drawImage(source, 0, 0, source.width, source.height, 0, 0, 50, 50);
//down_resize
elementHandle = document.getElementById("down_resize");
var contextHandle0 = elementHandle.getContext("2d");
elementHandle.width = 150;
elementHandle.height = 150;
var resized0 = new Resize(source.width, source.height, 150, 150, true, true, false, function (buffer) {
updateCanvas(contextHandle0, contextHandle0.createImageData(150, 150), buffer);
});
resized0.resize(dataToScale);
//down_resize_small
elementHandle = document.getElementById("down_resize_small");
var contextHandle1 = elementHandle.getContext("2d");
elementHandle.width = 50;
elementHandle.height = 50;
var resized1 = new Resize(source.width, source.height, 50, 50, true, true, false, function (buffer) {
updateCanvas(contextHandle1, contextHandle1.createImageData(50, 50), buffer);
});
resized1.resize(dataToScale);
//up_context2d
elementHandle = document.getElementById("up_context2d");
contextHandle = elementHandle.getContext("2d");
elementHandle.width = 1000;
elementHandle.height = 1000;
contextHandle.drawImage(source, 0, 0, source.width, source.height, 0, 0, 1000, 1000);
//up_resize
elementHandle = document.getElementById("up_resize");
var contextHandle2 = elementHandle.getContext("2d");
elementHandle.width = 1000;
elementHandle.height = 1000;
var resized2 = new Resize(source.width, source.height, 1000, 1000, true, true, false, function (buffer) {
updateCanvas(contextHandle2, contextHandle2.createImageData(1000, 1000), buffer);
});
resized2.resize(dataToScale);
//up_resize_crisp
elementHandle = document.getElementById("up_resize_crisp");
var contextHandle3 = elementHandle.getContext("2d");
elementHandle.width = 1000;
elementHandle.height = 1000;
var resized3 = new Resize(source.width, source.height, 1000, 1000, true, false, false, function (buffer) {
updateCanvas(contextHandle3, contextHandle3.createImageData(1000, 1000), buffer);
});
resized3.resize(dataToScale);
}
function updateCanvas(contextHandlePassed, imageBuffer, frameBuffer) {
var data = imageBuffer.data;
var length = data.length;
for (var x = 0; x < length; ++x) {
data[x] = frameBuffer[x] & 0xFF;
}
contextHandlePassed.putImageData(imageBuffer, 0, 0);
}
</script>
</head>
<body>
<h3>Original Image:</h3>
<img src="./flower.png" id="source" onload="process_data();">
<br>
<h3>Downscaling With Context2d:</h3>
<canvas id="down_context2d"></canvas>
<canvas id="down_context2d_small"></canvas>
<br>
<h3>Downscaling With Resize.js:</h3>
<canvas id="down_resize"></canvas>
<canvas id="down_resize_small"></canvas>
<br>
<h3>Upscaling With Context2d:</h3>
<canvas id="up_context2d"></canvas>
<br>
<h3>Upscaling With Resize.js:</h3>
<canvas id="up_resize"></canvas>
<br>
<h3>Upscaling With Resize.js (Crisp):</h3>
<canvas id="up_resize_crisp"></canvas>
<br>
</body>
</html>