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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title>Websanova :: wPaint</title>
<link rel="icon" type="image/vnd.microsoft.icon" href="./demo/img/favicon.ico" />
<script type="text/javascript" src="../lib/jquery.1.10.2.min.js"></script>
</head>
<body>
<!-- jQuery UI -->
<script type="text/javascript" src="../lib/jquery.ui.core.1.10.3.min.js"></script>
<script type="text/javascript" src="../lib/jquery.ui.widget.1.10.3.min.js"></script>
<script type="text/javascript" src="../lib/jquery.ui.mouse.1.10.3.min.js"></script>
<script type="text/javascript" src="../lib/jquery.ui.draggable.1.10.3.min.js"></script>
<!-- wColorPicker -->
<link rel="Stylesheet" type="text/css" href="../lib/wColorPicker.min.css" />
<script type="text/javascript" src="../lib/wColorPicker.min.js"></script>
<!-- wPaint -->
<link rel="Stylesheet" type="text/css" href="../src/wPaint.css" />
<script type="text/javascript" src="../src/wPaint.utils.js"></script>
<script type="text/javascript" src="../src/wPaint.js"></script>
<!-- wPaint main -->
<script type="text/javascript" src="../plugins/main/src/fillArea.min.js"></script>
<script type="text/javascript" src="../plugins/main/src/wPaint.menu.main.js"></script>
<!-- wPaint text -->
<script type="text/javascript" src="../plugins/text/src/wPaint.menu.text.js"></script>
<!-- wPaint shapes -->
<script type="text/javascript" src="../plugins/shapes/src/shapes.min.js"></script>
<script type="text/javascript" src="../plugins/shapes/src/wPaint.menu.main.shapes.js"></script>
<!-- wPaint file -->
<script type="text/javascript" src="../plugins/file/src/wPaint.menu.main.file.js"></script>
<div id="wPaint-demo1" style="position:relative; width:500px; height:200px; background-color:#7a7a7a; margin:70px auto 20px auto;"></div>
<center style="margin-bottom: 50px;">
<input type="button" value="toggle menu" onclick="console.log($('#wPaint-demo1').wPaint('menuOrientation')); $('#wPaint-demo1').wPaint('menuOrientation', $('#wPaint-demo1').wPaint('menuOrientation') === 'vertical' ? 'horizontal' : 'vertical');"/>
</center>
<center id="wPaint-img"></center>
<script type="text/javascript">
var images = [
'/test/uploads/wPaint.png',
];
function saveImg(image) {
var _this = this;
$.ajax({
type: 'POST',
url: '/test/upload.php',
data: {image: image},
success: function (resp) {
// internal function for displaying status messages in the canvas
_this._displayStatus('Image saved successfully');
// doesn't have to be json, can be anything
// returned from server after upload as long
// as it contains the path to the image url
// or a base64 encoded png, either will work
resp = $.parseJSON(resp);
// update images array / object or whatever
// is being used to keep track of the images
// can store path or base64 here (but path is better since it's much smaller)
images.push(resp.img);
// do something with the image
$('#wPaint-img').append($('<img/>').attr('src', image));
}
});
}
function loadImgBg () {
// internal function for displaying background images modal
// where images is an array of images (base64 or url path)
// NOTE: that if you can't see the bg image changing it's probably
// becasue the foregroud image is not transparent.
this._showFileModal('bg', images);
}
function loadImgFg () {
// internal function for displaying foreground images modal
// where images is an array of images (base64 or url path)
this._showFileModal('fg', images);
}
function createCallback(cbName) {
return function() {
if (console) {
console.log(cbName, arguments);
}
}
}
// init wPaint
$('#wPaint-demo1').wPaint({
menuOffsetLeft: -35,
menuOffsetTop: -50,
saveImg: saveImg,
loadImgBg: loadImgBg,
loadImgFg: loadImgFg,
onShapeDown: createCallback('onShapeDown'),
onShapeUp: createCallback('onShapeUp'),
onShapeMove: createCallback('onShapeDMove')
});
</script>
</body>
</html>
|
