Demo of using OpenClipart's JSON API through jsonp.jit.su proxy.
catseye
11 years ago
| 0 | <!DOCTYPE html> | |
| 1 | <head> | |
| 2 | <meta charset="utf-8"> | |
| 3 | <title>OpenClipart through JSONP proxy demo</title> | |
| 4 | <style> | |
| 5 | #canvas { border: 1px solid blue; } | |
| 6 | #status { background: #000060; color: white } | |
| 7 | </style> | |
| 8 | </head> | |
| 9 | <body> | |
| 10 | ||
| 11 | <h1>OpenClipart through JSONP proxy demo</h1> | |
| 12 | ||
| 13 | <p id="status"></p> | |
| 14 | ||
| 15 | <canvas id="canvas" width="600" height="400"> | |
| 16 | Your browser doesn't support displaying an HTML5 canvas. | |
| 17 | </canvas> | |
| 18 | ||
| 19 | </body> | |
| 20 | <script type="text/javascript"> | |
| 21 | ||
| 22 | /* The Elements */ | |
| 23 | var status = document.getElementById('status'); | |
| 24 | var canvas = document.getElementById('canvas'); | |
| 25 | ||
| 26 | /* The Image */ | |
| 27 | var img = new Image(); | |
| 28 | var drawOK = false; | |
| 29 | img.onload = function() { | |
| 30 | drawOK = true; | |
| 31 | }; | |
| 32 | ||
| 33 | /* The Renderer */ | |
| 34 | tick = 0; | |
| 35 | var draw = function() { | |
| 36 | var ctx = canvas.getContext('2d'); | |
| 37 | ctx.fillStyle = 'rgb(100,' + (tick % 256) + ',70)'; | |
| 38 | ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| 39 | if (drawOK) { | |
| 40 | var x = Math.floor(((Math.cos(tick / 100) + 1) / 2) * (canvas.width - img.width)); | |
| 41 | var y = Math.floor(((Math.sin(tick / 100) + 1) / 2) * (canvas.height - img.height)); | |
| 42 | ctx.drawImage(img, x, y); | |
| 43 | } | |
| 44 | tick += 1; | |
| 45 | }; | |
| 46 | ||
| 47 | /* The JSONP */ | |
| 48 | var glue = function(data) { | |
| 49 | img.src = data.payload[0].svg.png_thumb; | |
| 50 | status.innerHTML = data.payload[0].svg.png_thumb; | |
| 51 | }; | |
| 52 | ||
| 53 | query = 'tofu'; | |
| 54 | ||
| 55 | script = document.createElement('script'); | |
| 56 | script.type = 'text/javascript'; | |
| 57 | script.src = 'http://jsonp.jit.su/?callback=glue&url=' + | |
| 58 | 'http://openclipart.org/search/json/?query=' + query + '&page=1&amount=1'; | |
| 59 | document.getElementsByTagName("head")[0].appendChild(script); | |
| 60 | ||
| 61 | /* The Animator */ | |
| 62 | var animFrame = function(time) { | |
| 63 | draw(); | |
| 64 | request = requestAnimationFrame(animFrame); | |
| 65 | }; | |
| 66 | request = requestAnimationFrame(animFrame); | |
| 67 | ||
| 68 | </script> |