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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title>Websanova :: wPaint</title>
<!-- filestart -->
<link rel="icon" type="image/vnd.microsoft.icon" href="./demo/img/favicon.ico" />
<link rel="Stylesheet" type="text/css" href="./demo/demo.css" />
<script type="text/javascript" src="./lib/jquery.1.10.2.min.js"></script>
<!-- fileend -->
</head>
<body>
<!-- headstart -->
<header>
<a id="header-logo" href="http://websanova.com"></a>
<div id="header-links">
<a href="http://websanova.com">Blog</a>
<a href="http://websanova.com/plugins">Plugins</a>
<a href="http://websanova.com/extensions">Extensions</a>
<a href="http://websanova.com/services">Services</a>
</div>
</header>
<!-- headend -->
<div id="content">
<h1 id="plugin-name">wPaint.js</h1>
<div class="content-box">
<!-- 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="./wPaint.min.css" />
<script type="text/javascript" src="./wPaint.min.js"></script>
<script type="text/javascript" src="./plugins/main/wPaint.menu.main.min.js"></script>
<script type="text/javascript" src="./plugins/text/wPaint.menu.text.min.js"></script>
<script type="text/javascript" src="./plugins/shapes/wPaint.menu.main.shapes.min.js"></script>
<script type="text/javascript" src="./plugins/file/wPaint.menu.main.file.min.js"></script>
<div id="wPaint" 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').wPaint('menuOrientation')); $('#wPaint').wPaint('menuOrientation', $('#wPaint').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').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);
}
// init wPaint
$('#wPaint').wPaint({
menuOffsetLeft: -35,
menuOffsetTop: -50,
saveImg: saveImg,
loadImgBg: loadImgBg,
loadImgFg: loadImgFg
});
</script>
</div>
</div>
<!-- footstart -->
<footer>
<div id="footer-icons">
<!--a id="youtube-icon" href="http://websanova.com/youtube" target="_blank"></a-->
<a id="stumbleupon-icon" href="http://websanova.com/stumbleupon" target="_blank"></a>
<a id="linkedin-icon" href="http://websanova.com/linkedin" target="_blank"></a>
<a id="facebook-icon" href="http://websanova.com/facebook" target="_blank"></a>
<a id="googleplus-icon" href="http://websanova.com/googleplus" target="_blank"></a>
<a id="twitter-icon" href="http://websanova.com/twitter" target="_blank"></a>
<a id="github-icon" href="http://websanova.com/github" target="_blank"></a>
<a id="rss-icon" href="http://websanova.com/feed" target="_blank"></a>
</div>
</footer>
<!-- footend -->
</body>
</html>
|
