-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
67 lines (64 loc) · 2.03 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
<!DOCTYPE html>
<html>
<head>
<title>AssemblyScript</title>
<style>
img {
margin: 20px;
}
</style>
</head>
<body>
<img class="before" src="./images/before.png" />
<img class="after" src="./images/after.png" />
<canvas class="diff" width="800" height="568"/>
<script>
"use strict";
function getImageDate(selector) {
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
const img = document.querySelector(selector);
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 0, 0);
return context.getImageData(0, 0, img.width, img.height);
}
var memory = new WebAssembly.Memory({
initial: ((800 * 568 * 4 * 4) & ~0xffff) >>> 16
});
// Fetch and instantiate the module
fetch("build/untouched.wasm")
.then(response => response.arrayBuffer())
.then(buffer =>
WebAssembly.instantiate(buffer, {
env: {
memory,
abort: function() {}
},
})
)
.then(obj => {
const exports = obj.instance.exports;
const mem = new Uint8ClampedArray(memory.buffer);
const before = getImageDate(".before").data;
const after = getImageDate(".after").data;
mem.set(before);
mem.set(after, before.length);
console.log(
exports.pixelmatch(before.length, after.length, 800, 568, 0.1)
);
const canvas = document.querySelector(".diff");
const ctx = canvas.getContext("2d");
const d = ctx.createImageData(800, 568)
d.data.set(new Uint8ClampedArray(mem.buffer, before.length + after.length, 800 * 568 * 4));
ctx.putImageData(d, 0, 0);
})
.catch(err => {
alert(
"Failed to load WASM: " + err.message + " (ad blocker, maybe?)"
);
console.log(err.stack);
});
</script>
</body>
</html>