-
Notifications
You must be signed in to change notification settings - Fork 1
/
snapshot.js
56 lines (45 loc) · 1.86 KB
/
snapshot.js
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
function resizeCanvas(origCanvas, width, height) {
let resizedCanvas = document.createElement("canvas");
let resizedContext = resizedCanvas.getContext("2d");
resizedCanvas.height = height;
resizedCanvas.width = width;
resizedContext.drawImage(origCanvas, 0, 0, width, height);
return resizedCanvas.toDataURL();
}
document.getElementById("snap-button").addEventListener("click", function() {
console.log("target found");
let aScene = document
.querySelector("a-scene")
.components.screenshot.getCanvas("perspective");
let frame = captureVideoFrame("video", "png");
aScene = resizeCanvas(aScene, frame.width, frame.height);
frame = frame.dataUri;
let link = document.getElementById("download-link", "png");
link.setAttribute("download", "AR.png");
link.setAttribute("href", frame);
link.click();
});
function captureVideoFrame(video, format, width, height) {
if (typeof video === 'string') {
video = document.querySelector(video);
}
format = format || 'jpeg';
if (!video || (format !== 'png' && format !== 'jpeg')) {
return false;
}
var canvas = document.createElement("CANVAS");
canvas.width = width || video.videoWidth;
canvas.height = height || video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0);
var dataUri = canvas.toDataURL('image/' + format);
var data = dataUri.split(',')[1];
var mimeType = dataUri.split(';')[0].slice(5)
var bytes = window.atob(data);
var buf = new ArrayBuffer(bytes.length);
var arr = new Uint8Array(buf);
for (var i = 0; i < bytes.length; i++) {
arr[i] = bytes.charCodeAt(i);
}
var blob = new Blob([ arr ], { type: mimeType });
return { blob: blob, dataUri: dataUri, format: format, width: canvas.width, height: canvas.height };
};