UNPKG

fileapi/examples/watermark.html

Version:

1<!DOCTYPE html>
2<!--
3
4
~~~ Демонстрация работы с изображениями ~~~
           (NativeJS + FileAPI)
7
8
9-->
10<html>
11<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
14
<meta name="viewport" content="user-scalable=no, width=400, initial-scale=1, maximum-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<meta name="format-detection" content="email=no" />
<meta name="HandheldFriendly" content="true" />
20
<title>FileAPI :: Watermark :: example</title>
22
<script>
// Settings
var FileAPI = {
	  html5: !!1
	, debug: !0 // debug mode
	, staticPath: '../dist/'
};
</script>
31
<script src="../dist/FileAPI.js"></script>
<script src="../plugins/FileAPI.exif.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/json3/3.2.4/json3.min.js"></script>
35
<style>
body {
	font-size: 15px;
	font-family: "Helvetica Neue";
}
41
@keyframes color {
	from { color: #000; }
	to { color: #f60; }
}
46
@-moz-keyframes color {
	from { color: #000; }
	to { color: #f60; }
}
51
@-webkit-keyframes color {
	from { color: #000; }
	to { color: #f60; }
}
56
.anim {
	-webkit-animation: color 1s infinite;
	-moz-animation: color 1s infinite;
	animation: color 1s infinite;
}
</style>
63
64</head>
65<body>
<div style="left: 0; right: 0; bottom: 0; position: fixed; box-shadow: 0 0 5px rgba(0,0,0,.65); background-color: #f3f3f3;">
<div style="padding: 5px 10px 10px">
	<a href="../">&larr; index</a> |
	<a href="./demo.html">demo</a> -
	<a href="./userpic.html">userpic</a> -
	<a href="./thumbnails.html">thumbnails</a> -
	<b>watermark</b> -
	<a href="./webcam.html">webcam</a> -
	<a href="./caman.html">caman.js</a>
</div>
</div>
77
78
<style>
h4 {
	margin-bottom: 0;
}
83
.btn {
	*zoom: 1;
	*display: inline;
	display: inline-block;
}
89
.col {
	float: left;
	margin-left: 10px;
}
</style>
95
<form style="padding: 10px;">
<h3>Select image:</h3>
<div class="btn js-fileapi-wrapper">
	<input name="file" type="file" accept="image/*"/>
</div>
101
<div id="preview" style="display: none;">
103
	<div class="col">
		<h4>Watermark position</h4>
		<div id="pos" style="font-size: 12px;">
		</div>
108
		<h4>Output result</h4>
		<div id="output">
			<label>
				<input value="image/jpeg" type="radio" name="type"/>
				image/jpeg
			</label>
			<label>
				<input value="image/png" type="radio" name="type"/>
				image/png
			</label>
			<br/>
			<br/>
121
			<input name="width" type="text" style="width: 50px; text-align: center"/> x
			<input name="height" type="text" style="width: 50px; text-align: center"/>
		</div>
	</div>
126
	<div class="col">
		<h4>Preview <span id="preview-processing" class="anim" style="display: none">(processing&hellip;)</span></h4>
		<div id="image"></div>
	</div>
131
	<div class="col" style="position: absolute; right: 10px;">
		<h4>Server response <span id="uploading" class="anim" style="display: none"></span></h4>
		<div id="server"></div>
	</div>
	<br clear="all"/>
137
	<div>
		<h4>EXIF</h4>
		<div id="exif"></div>
	</div>
</div>
</form>
144
<script>
(function (){
	var elms = document.forms[0];
	var positions = ['<table>'];
149
	FileAPI.each(['TOP', 'CENTER', 'BOTTOM'], function (x, i){
		positions.push('<tr>');
		FileAPI.each(['LEFT', 'CENTER', 'RIGHT'], function (y, j){
			positions.push('<td><label><input type="radio" name="rel" value="'+ (i*3 + j) +'"/> '+x+'_'+y+'</label></td>');
		});
		positions.push('</tr>');
	});
157
158
	pos.innerHTML += positions.join('')+'</table>';
160
161
	function _updWatermark(evt){
		var file = FileAPI.getFiles(elms.file)[0];
		var rel =  (FileAPI.filter(elms.rel, function (rel){ return rel.checked; })[0] || {}).value;
		var type = (FileAPI.filter(elms.type, function (type){ return type.checked; })[0] || {}).value;
		var overlay = { x: 5, y: 5, src: '../statics/watermark.png', rel: rel };
167
		document.getElementById('preview-processing').style.display = '';
169
		// Create preview
		FileAPI.Image(file)
			.resize(300, 300, 'max')
			.overlay(overlay)
			.get(function (err, img){
				image.innerHTML = '';
				image.appendChild(img);
				document.getElementById('preview-processing').style.display = 'none';
			})
		;
180
		document.getElementById('uploading').style.display = '';
182
		// Upload
		FileAPI.upload({
			  url: '/upload'
			, files: elms.file
			, imageTransform: {
				  width: elms.width.value|0
				, height: elms.height.value|0
				, preview: true
				, type: type // Output type
				, overlay: overlay // Add watermark
			}
			, upload: function (){
				document.getElementById('uploading').innerHTML = '(uploading&hellip;)';
			}
			, progress: function (evt){
				document.getElementById('uploading').innerHTML = (evt.loaded/evt.total * 100).toFixed(2) +'%';
			}
			, complete: function (err, xhr){
				if( err ){
					alert('Oops, server error.');
				} else {
					var res = JSON.parse(xhr.responseText);
205
					FileAPI.each(res.images, function (file){
						var matrix	= FileAPI.Image.prototype.getMatrix.call({ matrix: { dw: 300, dh: 300, resize: 'max' } }, file);
208
						FileAPI.Image.fromDataURL(file.dataURL, { width: matrix.dw, height: matrix.dh }, function (img){
							server.innerHTML = '';
							server.appendChild(img);
							server.innerHTML += '<div><b>'+file.width+'x'+file.height+', '+file.mime+', '+(file.size/1024).toFixed(3)+'KB</b></div>';
						});
214
						document.getElementById('uploading').style.display = 'none';
					});
				}
			}
		});
	}
221
222
	// Relative position
	FileAPI.each(pos.getElementsByTagName('input'), function (el){
		FileAPI.event.on(el, 'click', _updWatermark);
	});
227
228
	// Output type
	FileAPI.each(output.getElementsByTagName('input'), function (el){
		FileAPI.event.on(el, 'click', _updWatermark);
	});
233
234
	FileAPI.event.on(output, 'keyup', function (){
		clearTimeout(this.pid);
		this.pid = setTimeout(function (){
			_updWatermark();
		}, 1000);
	});
241
242
	FileAPI.event.on(elms.file, 'change', function (){
		FileAPI.getInfo(FileAPI.getFiles(elms.file)[0], function (err, info){
			var html = ['<table>'];
246
			FileAPI.each(info && info.exif, function (val, key){
				html.push('<tr><td>'+ key +'</td><td>'+ val +'</td></tr>');
			});
			exif.innerHTML = html.join('')+'</table>';
251
			elms.width.value = info.width;
			elms.height.value = info.height;
254
			preview.style.display = '';
			_updWatermark();
		});
	});
})();
</script>
261</body>
262</html>

1	`<!DOCTYPE html>`
2	`<!--`
3
4
5	`~~~ Демонстрация работы с изображениями ~~~`
6	`(NativeJS + FileAPI)`
7
8
9	`-->`
10	`<html>`
11	`<head>`
12	`<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">`
13	`<meta http-equiv="Content-Type" content="text/html; charset=utf-8">`
14
15	`<meta name="viewport" content="user-scalable=no, width=400, initial-scale=1, maximum-scale=1" />`
16	`<meta name="apple-mobile-web-app-capable" content="yes" />`
17	`<meta name="apple-mobile-web-app-status-bar-style" content="yes" />`
18	`<meta name="format-detection" content="email=no" />`
19	`<meta name="HandheldFriendly" content="true" />`
20
21	`<title>FileAPI :: Watermark :: example</title>`
22
23	`<script>`
24	`// Settings`
25	`var FileAPI = {`
26	`html5: !!1`
27	`, debug: !0 // debug mode`
28	`, staticPath: '../dist/'`
29	`};`
30	`</script>`
31
32	`<script src="../dist/FileAPI.js"></script>`
33	`<script src="../plugins/FileAPI.exif.js"></script>`
34	`<script src="//cdnjs.cloudflare.com/ajax/libs/json3/3.2.4/json3.min.js"></script>`
35
36	`<style>`
37	`body {`
38	`font-size: 15px;`
39	`font-family: "Helvetica Neue";`
40	`}`
41
42	`@keyframes color {`
43	`from { color: #000; }`
44	`to { color: #f60; }`
45	`}`
46
47	`@-moz-keyframes color {`
48	`from { color: #000; }`
49	`to { color: #f60; }`
50	`}`
51
52	`@-webkit-keyframes color {`
53	`from { color: #000; }`
54	`to { color: #f60; }`
55	`}`
56
57	`.anim {`
58	`-webkit-animation: color 1s infinite;`
59	`-moz-animation: color 1s infinite;`
60	`animation: color 1s infinite;`
61	`}`
62	`</style>`
63
64	`</head>`
65	`<body>`
66	`<div style="left: 0; right: 0; bottom: 0; position: fixed; box-shadow: 0 0 5px rgba(0,0,0,.65); background-color: #f3f3f3;">`
67	`<div style="padding: 5px 10px 10px">`
68	`<a href="../">← index</a> \|`
69	`<a href="./demo.html">demo</a> -`
70	`<a href="./userpic.html">userpic</a> -`
71	`<a href="./thumbnails.html">thumbnails</a> -`
72	`<b>watermark</b> -`
73	`<a href="./webcam.html">webcam</a> -`
74	`<a href="./caman.html">caman.js</a>`
75	`</div>`
76	`</div>`
77
78
79	`<style>`
80	`h4 {`
81	`margin-bottom: 0;`
82	`}`
83
84	`.btn {`
85	`*zoom: 1;`
86	`*display: inline;`
87	`display: inline-block;`
88	`}`
89
90	`.col {`
91	`float: left;`
92	`margin-left: 10px;`
93	`}`
94	`</style>`
95
96	`<form style="padding: 10px;">`
97	`<h3>Select image:</h3>`
98	`<div class="btn js-fileapi-wrapper">`
99	`<input name="file" type="file" accept="image/*"/>`
100	`</div>`
101
102	`<div id="preview" style="display: none;">`
103
104	`<div class="col">`
105	`<h4>Watermark position</h4>`
106	`<div id="pos" style="font-size: 12px;">`
107	`</div>`
108
109	`<h4>Output result</h4>`
110	`<div id="output">`
111	`<label>`
112	`<input value="image/jpeg" type="radio" name="type"/>`
113	`image/jpeg`
114	`</label>`
115	`<label>`
116	`<input value="image/png" type="radio" name="type"/>`
117	`image/png`
118	`</label>`
119	`<br/>`
120	`<br/>`
121
122	`<input name="width" type="text" style="width: 50px; text-align: center"/> x`
123	`<input name="height" type="text" style="width: 50px; text-align: center"/>`
124	`</div>`
125	`</div>`
126
127	`<div class="col">`
128	`<h4>Preview <span id="preview-processing" class="anim" style="display: none">(processing…)</span></h4>`
129	`<div id="image"></div>`
130	`</div>`
131
132	`<div class="col" style="position: absolute; right: 10px;">`
133	`<h4>Server response <span id="uploading" class="anim" style="display: none"></span></h4>`
134	`<div id="server"></div>`
135	`</div>`
136	`<br clear="all"/>`
137
138	`<div>`
139	`<h4>EXIF</h4>`
140	`<div id="exif"></div>`
141	`</div>`
142	`</div>`
143	`</form>`
144
145	`<script>`
146	`(function (){`
147	`var elms = document.forms[0];`
148	`var positions = ['<table>'];`
149
150	`FileAPI.each(['TOP', 'CENTER', 'BOTTOM'], function (x, i){`
151	`positions.push('<tr>');`
152	`FileAPI.each(['LEFT', 'CENTER', 'RIGHT'], function (y, j){`
153	`positions.push('<td><label><input type="radio" name="rel" value="'+ (i*3 + j) +'"/> '+x+'_'+y+'</label></td>');`
154	`});`
155	`positions.push('</tr>');`
156	`});`
157
158
159	`pos.innerHTML += positions.join('')+'</table>';`
160
161
162	`function _updWatermark(evt){`
163	`var file = FileAPI.getFiles(elms.file)[0];`
164	`var rel = (FileAPI.filter(elms.rel, function (rel){ return rel.checked; })[0] \|\| {}).value;`
165	`var type = (FileAPI.filter(elms.type, function (type){ return type.checked; })[0] \|\| {}).value;`
166	`var overlay = { x: 5, y: 5, src: '../statics/watermark.png', rel: rel };`
167
168	`document.getElementById('preview-processing').style.display = '';`
169
170	`// Create preview`
171	`FileAPI.Image(file)`
172	`.resize(300, 300, 'max')`
173	`.overlay(overlay)`
174	`.get(function (err, img){`
175	`image.innerHTML = '';`
176	`image.appendChild(img);`
177	`document.getElementById('preview-processing').style.display = 'none';`
178	`})`
179	`;`
180
181	`document.getElementById('uploading').style.display = '';`
182
183	`// Upload`
184	`FileAPI.upload({`
185	`url: '/upload'`
186	`, files: elms.file`
187	`, imageTransform: {`
188	`width: elms.width.value\|0`
189	`, height: elms.height.value\|0`
190	`, preview: true`
191	`, type: type // Output type`
192	`, overlay: overlay // Add watermark`
193	`}`
194	`, upload: function (){`
195	`document.getElementById('uploading').innerHTML = '(uploading…)';`
196	`}`
197	`, progress: function (evt){`
198	`document.getElementById('uploading').innerHTML = (evt.loaded/evt.total * 100).toFixed(2) +'%';`
199	`}`
200	`, complete: function (err, xhr){`
201	`if( err ){`
202	`alert('Oops, server error.');`
203	`} else {`
204	`var res = JSON.parse(xhr.responseText);`
205
206	`FileAPI.each(res.images, function (file){`
207	`var matrix = FileAPI.Image.prototype.getMatrix.call({ matrix: { dw: 300, dh: 300, resize: 'max' } }, file);`
208
209	`FileAPI.Image.fromDataURL(file.dataURL, { width: matrix.dw, height: matrix.dh }, function (img){`
210	`server.innerHTML = '';`
211	`server.appendChild(img);`
212	`server.innerHTML += '<div><b>'+file.width+'x'+file.height+', '+file.mime+', '+(file.size/1024).toFixed(3)+'KB</b></div>';`
213	`});`
214
215	`document.getElementById('uploading').style.display = 'none';`
216	`});`
217	`}`
218	`}`
219	`});`
220	`}`
221
222
223	`// Relative position`
224	`FileAPI.each(pos.getElementsByTagName('input'), function (el){`
225	`FileAPI.event.on(el, 'click', _updWatermark);`
226	`});`
227
228
229	`// Output type`
230	`FileAPI.each(output.getElementsByTagName('input'), function (el){`
231	`FileAPI.event.on(el, 'click', _updWatermark);`
232	`});`
233
234
235	`FileAPI.event.on(output, 'keyup', function (){`
236	`clearTimeout(this.pid);`
237	`this.pid = setTimeout(function (){`
238	`_updWatermark();`
239	`}, 1000);`
240	`});`
241
242
243	`FileAPI.event.on(elms.file, 'change', function (){`
244	`FileAPI.getInfo(FileAPI.getFiles(elms.file)[0], function (err, info){`
245	`var html = ['<table>'];`
246
247	`FileAPI.each(info && info.exif, function (val, key){`
248	`html.push('<tr><td>'+ key +'</td><td>'+ val +'</td></tr>');`
249	`});`
250	`exif.innerHTML = html.join('')+'</table>';`
251
252	`elms.width.value = info.width;`
253	`elms.height.value = info.height;`
254
255	`preview.style.display = '';`
256	`_updWatermark();`
257	`});`
258	`});`
259	`})();`
260	`</script>`
261	`</body>`
262	`</html>`