js插件---画图软件wePaint如何使用（插入背景图片，保存图片，上传图片）
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>Websanova Paint</title>
6
7 <!-- jQuery -->
8 <script type="text/javascript" src="./inc/jquery.1.8."></script>
9 <script type="text/javascript" src="./inc/"></script>
10 <script type="text/javascript" src="./inc/"></script>
11 <script type="text/javascript" src="./inc/"></script>
12 <script type="text/javascript" src="./inc/"></script>
13
14 <!-- wColorPicker -->
15 <link rel="Stylesheet" type="text/css" href="./inc/" />
16 <script type="text/javascript" src="./inc/"></script>
17
18 <!-- wPaint -->
19 <link rel="Stylesheet" type="text/css" href="./" />
20 <script type="text/javascript" src="./"></script>
21
22 </head>
23 <body>
24
25 <h2>Default</h2>
26
27 <table><tr>
28 <td>
29 <div id="wPaint" style="position:relative; width:500px; height:300px; background:#CACACA; border:solid black 1px;"></div>
30 </td><td>
31 <img id="canvasImage" src=""/>
32 </td>
33 </tr><tr>
34 <td colspan="2">
35 <div>
36 <a href="javascript:loadImage_base64();">load image (base64 encoded)</a> |
37 <a href="javascript:loadImage_png();">load image (png)</a> |
38 <a href="javascript:loadImage_jpg();">load image (jpg)</a> |
39 <a href="javascript:saveImage();">save image</a> |
40 <a href="javascript:clearCanvas();">clear canvas</a>
41 <input type="button" value="Upload Image" onclick="upload_image('wPaint');"/>
42 </div><br/>
43
44 image data: <input id="canvasImageData" type="text" />
45 down: <input id="canvasDown" type="text" />
46 move: <input id="canvasMove" type="text" />
47 up: <input id="canvasUp" type="text" />
48 </td>
49 </tr></table>
50
51 <script type="text/javascript">
52 var wp = $("#wPaint").wPaint({
53 image: "data:image/png;base64,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",
54 drawDown: function(e, mode){ $("#canvasDown").val(this. + ": " + + ',' + ); },
55 drawMove: function(e, mode){ $("#canvasMove").val(this. + ": " + + ',' + ); },
56 drawUp: function(e, mode){ $("#canvasUp").val(this. + ": " + + ',' + ); }
57 }).data('_wPaint');
58
59 function loadImage_base64()
60 {
61 $("#wPaint").wPaint("image", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAGQCAYAAABYs5LGAAAQdklEQVR4nO3dTcg211kA4KO72LRgi9JWpcuEatDEoFBaiVp/NhJKMdvSrMQuonWVXVQsAUGoblyIYCii7aKhLcaiYGxFN0UqBbULaUr+00YT89uvX97bxfd98uTp+zP3POfvmfe6YCCLfO+5z5wz9z1nZp6ZUgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFgoopxElNjbTkbHBQAsdEohf9M2Oj4A4AJnrMyt1AHgmCwo5lbpADA7BR0ANkBBB4ANWFrQI8obo2MFAM6QKOhW6QAwKwUdADZAQQeADYgobyjoALABCjoAbICCDgAbkLiP/sToWAGAMyQKune6A8CsPOkOABsQy764dmP71uh4AYBTRJRvuOwOABvgsjsAbEDmsvvoWAE244zk61Ioq0WUxxV0gI7c36QVBR2gk4WXRX23mlUUdIBOJFxaMr/gFDPc45whhq0atW8TTyI/0zoWtkdBhz0LDogfHB1D6/a3bOQ97ERBd+JGmoIOO2Lht4Ubx7DkPquEv8LCfftaw/aXFnRJlzRzC3YkEu7V0TG0an/LRu/bhScUNzaX3UkZPb9hKjOsoEa3v2WJ8f1so/b/MxGDqzCkyB2wQ0HfthmK6QxzjG0yr2DHDMk2EcMdrWLYqknGN3PZvdn9fLYnMa8+OTpWaC6iXJ0g4Q9fRW7VJAU9c9ndaorF5A7YMzrRSvbtJFfH/94wjsVjHFHubxUH2yJ3wJ7RB4SDsp2I8iczrGKSJxZWUywid8CexEHx1kbt+wxiQzMkvYjy+8lV+idaxcJ2yB2wJ5FkH27U/h0OynaSq+NvNowjU9CNNReKKJ80n2BHIsm+ODqGVu1vWUT5amKMW152fylZ1F9pFQvbIXfAjkmSvYOyoVlWxlbp1GYuwQ4Fffsid9n9U5PE0XTOsQ1yB+yYYcU0uv2ti4lewWqVTk3mEezIrJoaxuCgbGyWIhpRnksW9WYfBuL4zTCnYRpxXG+L+0yrGLZuloKejUUy5jzmEOyIKM+PPigSyd091ZUid//6K41j+USyqP9by3g4XqNzF0wlovxZIrHe0igGq7XGIsqDM504JU8wjDunMn9gTyKxfnlw+w7MA8y0nyPKLydX6fe1jonjM8t8hmkkkuqrjdof/mDeZZBcFX+9QzyZgu52C99D3oA9o5NqRPmMA7O9iPLPo8d6L56vzXTVgONj7sCeGZK8A7OP2QpocpXe7PXDHKeZ5jJMYYYkP7r9yyJyl93v6BDPd2eYfxwn8wb2ZJJ8wxgcmB1ElH9NFNCnOsWUWaXf1iMmjoO8AXsyq6SGMTgwO0kUzy4PoiWvGng4jv8nb8CeiPLs6ANjdPuXyWzFM6L8cWaV3iMmjoM5A3siyh8kEur7GsXQ/cBMrgzfVOgiyv01Y+kp0++OMWX2/xd6xcXcZpvHMIVEMv3qyPYrtfUTKwv5aYX96D4eMmlBfyOz33vFxbwiyh/NNo9hColk+trI9g9sY+2KfMn2Rq190VpEeTrRr2c7xXRbZn/3iIm5RZTXzRc4xejVUcsDM6Lc2rCQ728/W3vf1BZR7pixeCb381/3iov5RJRfmnEOwxQ2XtB7FfMb2wdr75/akv35SKeYvj16HnIcIsrnFHQ4Qwy+r9qq7cjdm622tdhHNWXGu2fx3NI+pp2I8mRirhzN7TCoYsMFvXsx710E14govzFj8UyeaPxor7iYS+SeA3lodLzQVUS5srWCHoNW5yMK4RrJvvxLp5heSsT0co+YmE9E+fzCOfLC6Fihu4jy2AYL+tBiPntRjyjPJfrR6yUzb5stJuYTUT4QF5+wf2N0nDBE5C7B3tOg/arFccHB3nOb9h7ejCcmM8bEfCLK78bZt2g+HVG+b3SMMEwikX59VNsN+rK//fgpf+v+cxLHUReeZL96XXbPxPRqj5iYU0T5+YjySER5Pq79SuKRiHLX6LhguEQSvTKq7QZ9ubEtunwbUa5urKBnfv7T67L7nx7Tvr3gBMRtAaC/kYl9ZEFfEWv6cn62jZ5m7Edy/z7aK669GD84234DKKWMKegR5aZIfKO7QV9W3d/eWEHPXOL+xQlj6r5/I8oD2TmwYjuJKPf27huwAZkkuvLvf+3QJJdoq2khSMY97UNxpZQSUf4u0ZenO8X0vuQ+7vI2u534Whfz/e2pnv0Djlztgh5R3hmJDygcS0HP7KdDThp6SvRnyrfGdY6r5Ud+LuxnRLmlV1+BIxVRvlOrSEWUV1oktERfmhTbiHJvq5hHmrE/EeXh2eIaXMwVdmCZiPIfa5NnVF6Jn7N9ZWFfqheBtck808Yomb51jiuzr29uGMddExTxswr7e1v1GzhSEeXXEonkvuv/5ubeCWxhX5b+vQvvvWaK3Snb1PfPb4goTyX69HMd43o1EdcXG8YxunAr7EBOIoF8M/n/V9sq9+O8BPmlHrHOIHLfSH+ic2xL43qpUfuzXGZfOm9va7EfgCOTSBzfjdzqqdpWuR8tt7saD1dVmaJxWeKKKB+ZYB6t2RR2uOySCWNIsqrcj1bbR1uPVW21x2BAXC0K+jGtzs86Th+vvV+AI5BMFEOS1MJ+DP1pUetxaiESb8DrHNewB/YGF+Pq8zKi3F57HwGTGlwIqyXtiPL+meObUQz+hO45cR1bQT/vK2B/e0F7mYcTVxf22vsJmFAmeVbY/muv7apJu3Nfbmy/UH9U+ogoPzOqcF4Q18sj4or8O/tPdv7tQV8Bi2vvO2g9f99ec38Bk4koryUSwpqH4t51TtvVk3anIn5j6/Ke85ZGFM4FMf19YgwerNhuZuw/VavdvRhuaVzYFXXYqkh+KCWROF5c0HaLgv5jHQr5Zi5hTlrQ35kYi6sV2108B2q1eU4sLQu7og5bFFF+MpEI/vD6vzntLXGvr2i7WfJslAw3U8hvmKWArY2rZmwzFfSdmN7baC6/o1cfgI4SSeDZEe0e8PdrJsJfrdn3WcxWwHbiyozdD1doL3P/vPvbABsVdkUdtiaRAKpd3sy0e8Dfv7NC0tvcqnzXxAX96cQYPVehvcVzokb/DojztpqFfWRfgAZGFbceSefQ5Ferr7OadT9ElLf0nJfHNicqFvZNn7DCpTMqmfVqs9JqZpOJb+Yi1nNeHltB3xVRHj+wuN86ug9AJZlkULndXsn6yUpFfbpkfqiZ+x1RribG5q8ObGtpO9N+TS+i3L5yXm/yZBUupa0X9Ott1brvuKnkl+h3s2+PnxPb7/Ual5lPbDIiytvXzOvRcQOVRJRXtl7QM+0tKR4R5adrxTVSos/PTB7foc9abKbwrSnqo2MGKokoj16Ggn69zZo//Tn6j1/MnvST4/U3B7Qz7T5YI6K8Y/axBRqIKO9OHPwPVWx3SLKJKE9ULOr7BX7xN6nj2vu/vxDXPpLy2PX/vqt2fy+IYeqkH1H+IrP/D2ineRu9RZRbZx5boJFEQvuf3m3Wau+U9lu+M/skotxyRrs3xdmv3D2JKA+06vMpsfz36HFYEGPzk47k2N5Ts38tzT62QAOJZFbtKd9Em80eyGpc1L9nf0WUf1h4MvD+Vn3ei+fm2ZN+coxuWtlGdlzvrN3PFmYfW6CBRCKrdskx0WbTB7IaF/S125db9nlN/3vFc0p8n07stz9f2UZ6jGr3s7ZI3EobHStQ0YhENlPyjDHfUj9ve611n3f6PsUY1Igxojy18u9nv4UeMfH99IjyKzMdX0BHmYJWsc0pE84Exbxrn2eL55AYI8qVDm1Uaa+VzLE8w9gClQ0q6NM+kLUmKVbeur2RbNYxWBNjHPak+z0rx2qalfra+TY6bqCiiPLigIK++IGsiPKbtdpNxHf7wMLe7UUux5D0M+PQq51TtiGr9Yjy8bh2y2B17CPiBhqJa7+B7n7wJ5LO0zXbTcb4UwMKe7cTmFh2/3joO8wjypVe8/PAcTuJKPfV6POCODPvup92bIHKIspbJy/ow5NO9FuxP9q5X88siGnIq193YnyqY0G/s8IYNrsMH1HeU3O+tYqzhnOOt2luc8B0Ispzkxf06RJP1Psm9Y3txYjyWwP6ce+C2D7aO669GBe/Ma5SezWKekSUj9WIZyeuu2sW84jyrprx1XSMOQGmMKqwxvJLqd1+xrVGRLnlgKR6JaL8wOD4//Gc+B4dGdv1+BZ/cKRim4sv81+wnUSUqwfGcnfUvzr07lr7qrYVfVn1c0XYpIEF/cGF7X6pZrutRJTXk4mo2wtkLhJRfjuifOt64Ti5/t/drxicZdD8rF1EU7eOIsqHGsQQEeVHau6nmiLKBw7o1yuj44fhRhX0620/dkGb3V6FyrwGzs/axfTC4h5RPtyokE9/7zmifK5CP98yuh8wTOJAeb5R+188p5g/0KJNjktijr6tQdstH4a80qmt6Yt5KaVElCdr9Hd0P2CYGQ6SuPY50UciyvMR5dvX//uulm1yPBLJ/MVG7f9O48LecjuKYl5KKRHl6Up9fnl0X2CIGQo6nCeZzJs98BX1HpbrtR30QF5vEeXztfo+ui8whAOE2SWT+Qsd4pl1tX4S114W9PHW+6CFOOyhOPkKHCDMbE2S7xTXfRMU8N3tPT363ZqCDgdwgDCzWPHkc+f4Rq/Wj+Ye+RIKOhxgYULaVNLgeMSKJ58HxPixAYX9JKLc3buvrcW679MPnwMwhbj2ZPlFB0iTn6zBRSLK48eUzKPeh1MuVSHfpaDDSnEE7/Pm8ooof3mMyTzqr9hPIsqHRverh4jyQwfuq++M7gMME5O/z5vLK6L8+jEW9F1x+M/dPjy6DyOsPSkaHTcMF5O/z5vLKaJ8f0T53y0k9MjfH/bsShnzgR4AGojkT8RGx0sbF6zYUx+/AWCQiPJPCwu6xA4AM4uzP+Szuz00Ok4A4AIR5YVzinnz174CAJVElIf3HjB7I6J8dnRcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAm/0frx+55AOewsEAAAAASUVORK5CYII=");
62 }
63
64 function loadImage_png()
65 {
66 $("#wPaint").wPaint("image", "images/demo/");
67 }
68
69 function loadImage_jpg()
70 {
71 $("#wPaint").wPaint("image", "images/demo/");
72 }
73
74 function saveImage()
75 {
76 var imageData = $("#wPaint").wPaint("image");
77
78 $("#canvasImage").attr('src', imageData);
79 $("#canvasImageData").val(imageData);
80 }
81
82 function clearCanvas()
83 {
84 $("#wPaint").wPaint("clear");
85 }
86
87 function upload_image(id)
88 {
89 var imageData = $("#" + id).wPaint("image");
90
91 $.ajax({
92 url: '/wPaint/',
93 data: {image: imageData},
94 type: 'post',
95 success: function(resp)
96 {
97 alert('successfully uploaded image!');
98 }
99 });
100 }
101 </script>
102
103
104 <h2>Load Image With Background</h2>
105 The background cannot be modified, but will be part of the save (try the eraser):
106
107 <table><tr>
108 <td>
109 <div id="wPaint2" style="position:relative; width:500px; height:300px; background:#CACACA; border:solid black 1px;"></div>
110 </td><td>
111 <img id="canvasImage2" src=""/>
112 </td>
113 </tr><tr>
114 <td colspan="2">
115 <div>
116 <a href="javascript:saveImage2();">save image</a> |
117 <a href="javascript:updateBg2();">update bg</a>
118 <input type="button" value="Upload Image" onclick="upload_image('wPaint2');"/>
119 </div><br/>
120 </td>
121 </tr></table>
122
123 <br/><br/>
124
125 <script type="text/javascript">
126 $("#wPaint2").wPaint({
127 menuOrientation: 'vertical',
128 image: "data:image/png;base64,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",
129 imageBg: 'images/demo/'
130 });
131
132 function saveImage2()
133 {
134 var imageData2 = $("#wPaint2").wPaint("image");
135
136 $("#canvasImage2").attr('src', imageData2);
137 }
138
139 function updateBg2()
140 {
141 $("#wPaint2").wPaint("imageBg", 'images/demo/');
142 }
143
144 </script>
145 </body>
146 </html>