-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathaction-sequence.html
executable file
·88 lines (78 loc) · 2.38 KB
/
action-sequence.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
<!DOCTYPE html>
<!-- inspired by http://www.html5multimedia.com/code/ch9/video-canvas-screenshot.html -->
<html lang="en">
<head>
<meta charset=utf-8>
<title>video2action-sequence</title>
<style>
.overlay {
position:relative;
}
.overlay img {
position:absolute;
left:0;
top:0;
opacity:0.10;
}
.overlay.video img {
position:absolute;
left:0;
top:0;
opacity:0.40;
}
.strip img {
width:200px;
}
canvas {
display:none;
}
</style>
</head>
<body>
click play, then click take screenshot several times, then open GIMP and make action sequence ;-)
For now, teste in Chrome only, sorry
<div class="overlay video">
<video controls >
<source src="./sample.mp4" type="video/mp4">
</video>
<img>
</div>
<canvas></canvas>
<button id="snap" onclick="snap()">Take screenshot</button>
<div class="strip"></div>
<div class="overlay images"></div>
<script>
var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
var strip = document.querySelector('.strip');
var overlay = document.querySelector('.overlay.images');
var lastImage = document.querySelector('.overlay.video img');
var context = canvas.getContext('2d');
video.playbackRate=0.2;
// Add a listener to wait for the 'loadedmetadata' state so the video's dimensions can be read
video.addEventListener('loadedmetadata', function() {
canvas.width = video.videoWidth
canvas.height = video.videoHeight;
}, false);
// Takes a snapshot of the video
function snap() {
// Define the size of the rectangle that will be filled (basically the entire element)
context.fillRect(0, 0, canvas.width, canvas.height);
// Grab the image from the video
context.drawImage(video, 0, 0);
//img.setAttribute('crossOrigin', 'anonymous');
var url=canvas.toDataURL('image/png');
lastImage.src=url;
var img=new Image();
img.src=url;
strip.appendChild(img);
overlay.appendChild(img.cloneNode(true));
// chrome Save Method ;-) http://www.codepool.biz/how-to-use-javascript-to-save-canvas-data-in-chrome.html
var link = document.createElement('a');
link.download = "action-sequence."+video.currentTime+".png";
link.href = url.replace("image/png", "image/octet-stream");;
link.click();
}
</script>
</body>
</html>