forked from websanova/wPaint
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
146 lines (121 loc) · 21.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Websanova Paint</title>
<!-- jQuery -->
<script type="text/javascript" src="./inc/jquery.1.8.2.min.js"></script>
<script type="text/javascript" src="./inc/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="./inc/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="./inc/jquery.ui.mouse.min.js"></script>
<script type="text/javascript" src="./inc/jquery.ui.draggable.min.js"></script>
<!-- wColorPicker -->
<link rel="Stylesheet" type="text/css" href="./inc/wColorPicker.css" />
<script type="text/javascript" src="./inc/wColorPicker.js"></script>
<!-- wPaint -->
<link rel="Stylesheet" type="text/css" href="./wPaint.css" />
<script type="text/javascript" src="./wPaint.js"></script>
</head>
<body>
<h2>Default</h2>
<table><tr>
<td>
<div id="wPaint" style="position:relative; width:500px; height:300px; background:#CACACA; border:solid black 1px;"></div>
</td><td>
<img id="canvasImage" src=""/>
</td>
</tr><tr>
<td colspan="2">
<div>
<a href="javascript:loadImage_base64();">load image (base64 encoded)</a> |
<a href="javascript:loadImage_png();">load image (png)</a> |
<a href="javascript:loadImage_jpg();">load image (jpg)</a> |
<a href="javascript:saveImage();">save image</a> |
<a href="javascript:clearCanvas();">clear canvas</a>
<input type="button" value="Upload Image" onclick="upload_image('wPaint');"/>
</div><br/>
image data: <input id="canvasImageData" type="text" />
down: <input id="canvasDown" type="text" />
move: <input id="canvasMove" type="text" />
up: <input id="canvasUp" type="text" />
</td>
</tr></table>
<script type="text/javascript">
var wp = $("#wPaint").wPaint({
image: "data:image/png;base64,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",
drawDown: function(e, mode){ $("#canvasDown").val(this.settings.mode + ": " + e.pageX + ',' + e.pageY); },
drawMove: function(e, mode){ $("#canvasMove").val(this.settings.mode + ": " + e.pageX + ',' + e.pageY); },
drawUp: function(e, mode){ $("#canvasUp").val(this.settings.mode + ": " + e.pageX + ',' + e.pageY); }
}).data('_wPaint');
function loadImage_base64()
{
$("#wPaint").wPaint("image", "data:image/png;base64,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");
}
function loadImage_png()
{
$("#wPaint").wPaint("image", "images/demo/wPaint.png");
}
function loadImage_jpg()
{
$("#wPaint").wPaint("image", "images/demo/wPaint.jpg");
}
function saveImage()
{
var imageData = $("#wPaint").wPaint("image");
$("#canvasImage").attr('src', imageData);
$("#canvasImageData").val(imageData);
}
function clearCanvas()
{
$("#wPaint").wPaint("clear");
}
function upload_image(id)
{
var imageData = $("#" + id).wPaint("image");
$.ajax({
url: '/wPaint/upload.php',
data: {image: imageData},
type: 'post',
success: function(resp)
{
alert('successfully uploaded image!');
}
});
}
</script>
<h2>Load Image With Background</h2>
The background cannot be modified, but will be part of the save (try the eraser):
<table><tr>
<td>
<div id="wPaint2" style="position:relative; width:500px; height:300px; background:#CACACA; border:solid black 1px;"></div>
</td><td>
<img id="canvasImage2" src=""/>
</td>
</tr><tr>
<td colspan="2">
<div>
<a href="javascript:saveImage2();">save image</a> |
<a href="javascript:updateBg2();">update bg</a>
<input type="button" value="Upload Image" onclick="upload_image('wPaint2');"/>
</div><br/>
</td>
</tr></table>
<br/><br/>
<script type="text/javascript">
$("#wPaint2").wPaint({
menuOrientation: 'vertical',
image: "data:image/png;base64,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",
imageBg: 'images/demo/wPaint.png'
});
function saveImage2()
{
var imageData2 = $("#wPaint2").wPaint("image");
$("#canvasImage2").attr('src', imageData2);
}
function updateBg2()
{
$("#wPaint2").wPaint("imageBg", 'images/demo/wPaint.jpg');
}
</script>
</body>
</html>