-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
174 lines (155 loc) · 7.81 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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<html !DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Image Security</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<!-- Jquery Library-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!-- Watermark.js Library-->
<script src="watermark.js"></script>
</head>
<body>
<!-- Header-->
<div style="background: rgb(22, 16, 107); color:white;padding: 10px 20px;text-align: center; font-size: 19px;">
IMAGE SECURITY
</div><br>
<!-- /Header-->
<!-- Procedure-->
<div>
<a href="javascript:showProcedure()" style="cursor: pointer;">
<img src="clickhere.gif" height="60" style="vertical-align: middle;">
Steps to Create WaterMark
</a>
<div id="procedure-here" style="display: none;" show="0">
<h3>
Step 1:- First Upload the <mark>Main Image</mark> that you needed for Encryption.
(<span style="color: red;">*You should upload Image size greater than 500px × 500px.</span>)
<span id="firstsuccess" style="display: none;">
<img src="tick-green-512.png" style="width: 20; position: relative; top:3px; margin-left: 10px;">
</span>
</h3>
<h3>
Step 2:- Now Upload the <mark>Other Image</mark> which will add Watermark to your Main Image.
(<span style="color: red;">*You should upload Image size less than 300px × 300px.</span>)
<span id="secondsuccess" style="display: none;">
<img src="tick-green-512.png" style="width: 20; position: relative; top:3px; margin-left: 10px;">
</span>
</h3>
<h3>
Step 3:- Now Click on the <mark>Add WaterMark Button </mark>to Watermark it and then Right Click on WaterMarked Image to it. <span id="thirdsuccess" style="display: none;">
<img src="tick-green-512.png" style="width: 20; position: relative; top:3px; margin-left: 10px;">
</span>
</h3>
</div>
</div>
<!--/Procedure-->
<!--Input Data-->
<fieldset style="border-color: blue; background-color: #d4ebf2;">
<legend style="font-style: normal; font-weight: bolder;">Let's Start!</legend>
<label>Upload the Main Image Here: </label>
<input type="file" id="imageInput" accept="image/*" /><br><br>
<label>Upload the Other Image Here: </label>
<input type="file" id="imageInput2" accept="image/*" disabled/><br><br>
<button type="button" style=background-color:#22bde4 id="addwatermarkbtn" onclick="javascript:addWatermark()" disabled>Add WaterMark</button><br><br>
<button type="button" style=background-color:#22bde4 onclick="javascript:reloadPage()">Reset All</button>
</fieldset><br><br>
<!--/Input Data-->
<!--Procedure-->
<fieldset style="border-color: blue; background-color: #d4ebf2;">
<legend style="font-style: normal;font-weight: bolder;">Have a Look on your Work here!</legend>
<div style="display: inline-block;">
<h1 id="mainimageh1" style="display: none;">Your Main Image</h1>
<img id="displayuploadmainImage" style="display: none;" src="#" width="300">
</div>
<div style="display: inline-block; margin-left: 10px;">
<h1 id="mainimageh2" style="display: none;">Your Other Image</h1>
<img id="displayuploadlogoImage" style="display: none;" src="#" width="120px">
</div>
<div id="displaywatermarkdiv" style="display: inline-block; margin-left: 150px;">
<h1 id="mainimageh3" style="display: none;">Watermarked Image</h1>
</div>
</fieldset><br><br>
<!--/Procedure-->
<!--Encryption Button-->
<button type="button" style=background-color:#22bde4 onclick="window.location.href='encryption.html'" id="gotoEncryptionbtn">
<b>Encrypt it!</b>
</button>
<!--/Encryption Button-->
<!--Script-->
<script>
//Procedure
function showProcedure(){
var d=parseInt($("#procedure-here").attr("show"));
if(d==0){
$("#procedure-here").css("display","block");
$("#procedure-here").attr("show",1);
}
else if(d==1){
$("#procedure-here").css("display","none");
$("#procedure-here").attr("show",0);
}
}
//Main Image Function
$("#imageInput").change(function() {readURL(this);});
function readURL(input){
if(input.files && input.files[0]) {
var reader = new FileReader();
reader.onload=function(e){
$('#displayuploadmainImage').attr('src', e.target.result);
var imagefirsturl=e.target.result;
}
reader.readAsDataURL(input.files[0]);
$("#displayuploadmainImage").css("display","block"); // Displays main image
$("#mainimageh1").css("display","block"); // Displays Heading
$("#imageInput").attr("disabled","disabled"); // Disables Main Image
$("#imageInput2").removeAttr("disabled"); // Enables Other Image
$("#firstsuccess").css("display","inline-block"); //Tick Mark
alert("Main Image Upload successfully. Now Upload the Other Image!"); // Displays Alert
}
}
//Other Image Function
$("#imageInput2").change(function() {readURL2(this);});
function readURL2(input){
if(input.files && input.files[0]) {
var reader = new FileReader();
reader.onload=function(e){
$('#displayuploadlogoImage').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
$("#displayuploadlogoImage").css("display","block"); // Displays other image
$("#mainimageh2").css("display","block"); // Displays Heading
$("#addwatermarkbtn").removeAttr("disabled"); // Enables WaterMark Button
$("#imageInput").attr("disabled","disabled"); // Disables main Image
$("#imageInput2").attr("disabled","disabled"); // Disables other Image
$("#secondsuccess").css("display","inline-block"); //Tick Mark
alert("Image to be Watermarked Upload successfully. Now Click on Watermark Button!"); // Displays Alert
}
}
//WaterMarking Procedure
function addWatermark(){
$("#mainimageh3").css("display","block");
watermark([$('#displayuploadmainImage')[0].src, $('#displayuploadlogoImage')[0].src]).image(watermark.image.lowerRight(0.5)).then(function (img) {
document.getElementById('displaywatermarkdiv').appendChild(img); // Show the Watermark Image in This Div
});
$("#thirdsuccess").css("display","inline-block");
alert("Watermark added successfully! Download it!");
$("#imageInput").attr("disabled","disabled");
$("#imageInput2").attr("disabled","disabled");
$("#addwatermarkbtn").attr("disabled","disabled");
}
//Reset
function reloadPage(){
var r=confirm("Are you sure you want to Reset! It cannot be undone later!");
if (r == true) {
window.location.href='';
} else {
}
}
</script>
<!--/Script-->
</body>
</html>