iview/iview.html at master · yangcha/iview · GitHub

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
<!DOCTYPE HTML>
<!-- Display image, show mouse position and pixel values
Author: Changjiang Yang
Date:	08/14/2016
TODO:	Add drag and drop
-->
<html>
<head>
<style>
div.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	margin: 0 auto;
	background: #0072BB;
	color:#fff;
}
</style>
</head>

<body>

<p>Open image: <input type="file" id="inputImage"/></p>

<canvas id="canvas" style="margin:12px;"></canvas>

<div class="footer" id="results">Move mouse over image to show mouse location and pixel value and alpha</div>

<script>
var URL = window.URL;
var cvs = document.getElementById('canvas');
var ctx = cvs.getContext('2d');
var res = document.getElementById('results');

cvs.addEventListener('mousemove', mousePos, false);
cvs.addEventListener('click', copyMousePos, false);

window.onload = function() {
	var inputImage = document.getElementById('inputImage');
	inputImage.addEventListener('change', handleImageFiles, false);
}

function copyMousePos(evt) {
	var rect = cvs.getBoundingClientRect();
	var x = parseInt(evt.clientX - rect.left);
	var y = parseInt(evt.clientY - rect.top);
	copyText = x+';'+y
	navigator.clipboard.writeText(copyText).then(function() {
	  console.log('ok')
	}, function() {
	  console.log('ko')
	});
}

function mousePos(evt) {
	var rect = cvs.getBoundingClientRect();
	var x = parseInt(evt.clientX - rect.left);
	var y = parseInt(evt.clientY - rect.top);
	var p = ctx.getImageData(x, y, 1, 1).data;
	results.innerHTML = '<table style="width:100%;table-layout:fixed"><td>X: '
		+ x + '</td><td>Y: ' + y + '</td><td>Red: '
		+ p[0] + '</td><td>Green: ' + p[1] + '</td><td>Blue: '
		+ p[2] + '</td><td>Alpha: ' + p[3]+"</td></table>";
	return {x, y};
}

function handleImageFiles(e) {
	var url = URL.createObjectURL(e.target.files[0]);
	var img = new Image();
	img.onload = function() {
		cvs.width = img.width;
		cvs.height = img.height;
		ctx.drawImage(img, 0, 0);
	}
	img.src = url;
}

</script>
</body>
</html>