-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathviewer.html
88 lines (76 loc) · 3.14 KB
/
viewer.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
<!DOCTYPE html>
<!-- saved from url=(0057)http://www.html5.jp/test/perspective_canvas/demo1_en.html -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Reclaim the walls</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="jquery.js"></script>
<script src="dades.js"></script>
<script src="perspective.js"></script>
<script>
var id = 0;
var imagepath="";
window.addEventListener("load", function() {
document.getElementById('files').addEventListener('change', handleFileSelect, false);
id = getURLParameter("id");
imagepath = "images/t"+id+".jpg";
replace(imagepath,"images/blank.png",points[id]);
}, false);
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
//alert(files[0].name);
replace(imagepath,"images/examples/"+files[0].name,points[id]);
}
function replace(background,overlay,points){
// General Canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
// BackGround
var bg = new Image();
bg.src = background;
bg.onload = function(){
canvas.height = bg.height;
canvas.width = bg.width;
canvas1.width = canvas.width;
canvas1.height = canvas.height;
}
ctx.drawImage(bg,0,0);
// Overlay
var canvas1 = document.createElement('canvas');
var ctx1 = canvas1.getContext('2d');
var op = null;
var points = points;
var img = new Image();
img.src = overlay;
img.onload = function() {
op = new html5jp.perspective(ctx1, img);
op.draw(points);
draw_canvas(ctx, ctx1, bg);
};
}
function draw_canvas(ctx, ctx1, bg) {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(bg, 0, 0);
ctx.drawImage(ctx1.canvas, 0, 0);
}
function getURLParameter(name) {
return decodeURI(
(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
);
}
</script>
<style type="text/css"></style>
</head>
<body>
<div id="canvasHolder">
<canvas width="600" height="450" id="canvas"></canvas>
</div>
<div id="content">
<form id="imageform">
<input type="file" id="files" name="files[]">
</form>
</div>
</body>
</html>