-
Notifications
You must be signed in to change notification settings - Fork 2
/
example.html
83 lines (75 loc) · 4.25 KB
/
example.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
<html>
<head>
<meta charset="utf-8">
<title>Try SnapSite</title>
<style>
body {margin:0px;padding:0px;background-color: #f0ecea;}
#content {height:100%;display:flex;justify-content: center;}
#content ul {align-self: center;margin:0px;padding:0px;width:50%;list-style-type: none;}
#content li {width:49%;display:inline-block;margin-bottom: 5px;color:white;padding:10px;box-sizing: border-box;}
#feedback {
position: fixed;
bottom: 30px;
right: 30px;
box-shadow: 0px 4px 10px 1px gray;
background-color: #03A9F4;
color: white;
line-height: 36px;
text-align: center;
cursor: pointer;
width: 100px;
height: 36px;
}
</style>
</head>
<body>
<div id="content">
<ul>
<li style="background-color:#ff3a6a;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum risus nec sodales maximus. Nam eget risus sed tortor mollis faucibus. Pellentesque hendrerit ligula eu augue tincidunt, eu dignissim magna ultrices. Sed tristique finibus neque id cursus. Praesent malesuada a nulla eget tristique. Donec ullamcorper purus magna, eget elementum velit elementum sit amet. Donec sed lorem lacinia, laoreet mi eu, condimentum diam. Nunc eu varius nibh. Quisque gravida congue eros.</li>
<li style="background-color:#ff9646;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum risus nec sodales maximus. Nam eget risus sed tortor mollis faucibus. Pellentesque hendrerit ligula eu augue tincidunt, eu dignissim magna ultrices. Sed tristique finibus neque id cursus. Praesent malesuada a nulla eget tristique. Donec ullamcorper purus magna, eget elementum velit elementum sit amet. Donec sed lorem lacinia, laoreet mi eu, condimentum diam. Nunc eu varius nibh. Quisque gravida congue eros.</li>
<li style="background-color:#b1c953;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum risus nec sodales maximus. Nam eget risus sed tortor mollis faucibus. Pellentesque hendrerit ligula eu augue tincidunt, eu dignissim magna ultrices. Sed tristique finibus neque id cursus. Praesent malesuada a nulla eget tristique. Donec ullamcorper purus magna, eget elementum velit elementum sit amet. Donec sed lorem lacinia, laoreet mi eu, condimentum diam. Nunc eu varius nibh. Quisque gravida congue eros.</li>
<li style="background-color:#38acb5;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum risus nec sodales maximus. Nam eget risus sed tortor mollis faucibus. Pellentesque hendrerit ligula eu augue tincidunt, eu dignissim magna ultrices. Sed tristique finibus neque id cursus. Praesent malesuada a nulla eget tristique. Donec ullamcorper purus magna, eget elementum velit elementum sit amet. Donec sed lorem lacinia, laoreet mi eu, condimentum diam. Nunc eu varius nibh. Quisque gravida congue eros.</li>
</ul>
<div id="feedback">Try me</div>
</div>
<script src="snapsite.js"></script>
<script type="text/javascript">
function dataUrlToBlob(dataUrl){
const binary = atob(dataUrl.split(',')[1]);
const array = [];
for(let i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {type: 'image/png'});
}
function save(url){
const anchor = document.createElement('a');
anchor.href = url;
anchor.style.display = 'none';
anchor.target = '_blank';
document.body.appendChild(anchor);
anchor.click();
document.body.removeChild(anchor);
}
SnapSite(function(data) {
//Do what you want..
//Send it to your favorite bug tracker tool
//Log screenshot as data url
//console.log(data.snap);
//Browser User-Agent
console.log(data.platform);
// Open screenshot in new tab
// Create blob from data.snap because data-urls in top level are blocked
// https://blog.mozilla.org/security/2017/11/27/blocking-top-level-navigations-data-urls-firefox-59/
const blob = dataUrlToBlob(data.snap);
// create url and open it
save(URL.createObjectURL(blob));
delete blob;
}, {}, function(err) {
//No extension found, redirect to install page
console.error("Please install extension first.");
window.location.href = "http://snapsite.live/install?r="+window.location.href;
});
</script>
</body>
</html>