forked from pmiiunugiri/pmiiunugiri.github.io
-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
160 lines (147 loc) · 9.1 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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/png" href="logo.png">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="layout.css">
<!-- <link rel="stylesheet" href="test4.css"> -->
<link rel="stylesheet" href="material.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="jquery-3.3.1.min.js"></script>
<script src="fabric.min.js"></script>
<script src="FileSaver.js"></script>
<script src="canvas-toBlob.js"></script>
<script src="material.min.js"></script>
<link rel="shortcut icon" href="">
<title>PMII UNUGIRI</title>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="editor">
<div class="canvas-padding">
<canvas id="c"></canvas>
</div>
<div class="tombol">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--file">
<input class="mdl-textfield__input" placeholder="Unggah foto mu!" type="text" id="uploadFile" readonly/>
<div class="mdl-button mdl-button--primary mdl-button--icon mdl-button--file">
<i class="material-icons">attach_file</i><input type="file" id="uploadBtn">
</div>
</div>
<br>
<button id="download" class="mdl-button bg-success mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">unduh</button>
</div>
</div>
<div class="control animat">
<h2 class="headline">PMII UNUGIRI BOJONEGORO</h2>
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
<h2>Ayo buat foto Twibbon Kamu!</h2>
<p>
Unggah foto terbaik kamu
</p>
<!-- <input type="file" id="d"> -->
</div>
<!-- <div class="about">
</div> -->
<div class="contact">
<div class="nomor">
<h3>Kontak PMII</h3>
<ul>
<li><a class="text-success" href="https://jowokoding.blogspot.com">Didik Ariyanto</a> <br> <p>085215177089</p></li>
</ul>
</div>
<div class="sosmed">
<h3>Sosial Media PMII UNUGIRI</h3>
<ul>
<li>Instagram <a href="http://www.instagram.com/pmiiunugiri">PMII UNUGIRI</a></li>
<li>Situs Web <a href="https://pmiiunugiri.blogspot.com/">Official Blog</a></li>
</ul>
</div>
<div class="sosmed">
</div>
</div>
</div>
<script>
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.files[0].name;
};
var canvas = new fabric.Canvas('c');
canvas.setWidth(1080);
canvas.setHeight(1350);
var canvasWrapper = document.getElementById('c');
var canvasWrapperWidth = canvasWrapper.clientWidth;
$(function () {
$(":file").change(function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});
fabric.Image.fromURL('twibbon_pmii.png',function(img){
img.scaleToWidth(canvas.getWidth());
canvas.setOverlayImage(img, canvas.renderAll.bind(canvas));
});
function imageIsLoaded(e) {
fabric.Image.fromURL(e.target.result,function(img){
var aspectRatio = 1350/1080;
var factor = 1080 / img.width;
img.set({
scaleX: factor,
scaleY: factor
});
canvas.add(img);
canvas.item(0).set({
borderColor: 'gray',
cornerColor: 'black',
cornerSize: 70,
borderScaleFactor: 10,
hasBorders: true,
rotatingPointOffset:200,
padding:60,
transparentCorners: true
});
canvas.setActiveObject(canvas.item(0));
this.__canvases.push(canvas);
canvas.sendToBack(img);
});
};
$("#download").click(function(){
$("#c").get(0).toBlob(function(blob){
saveAs(blob, "TWB_pmii.png");
});
});
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>