|
|
| Line 1: |
Line 1: |
| <nowiki> <script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>
| | [[File:017_martin-parr_theredlist.jpg]] |
| <script type="text/javascript">
| |
| google.load('search', '1');
| |
| function searchComplete(searcher) { c = document.getElementById("canvas")
| |
| p = c.getContext("2d")
| |
| var dimension = [document.documentElement.clientWidth, document.documentElement.clientHeight];
| |
| c.width = ((dimension[1]-100)/4)*5;
| |
| c.height = (dimension[1]-100)/3;
| |
|
| |
| p.globalAlpha = 0.8;
| |
|
| |
|
|
| |
|
| |
| if (searcher.results && searcher.results.length > 0) {
| |
| var results = searcher.results;
| |
| for (var i = 0; i < results.length; i++) {
| |
| var result = results[i];
| |
| base_image = new Image();
| |
| base_image.src = result.unescapedUrl;
| |
| p.drawImage(base_image, Math.floor((Math.random()*((dimension[1]-100)/4)*5-220)+1), 0);
| |
|
| |
|
|
| | [http://www.eenportfolio.nl/canvasTest.html/== Find my Canvas version of this photograph here. ==] |
| }
| |
| }
| |
| }
| |
|
| |
|
| |
|
| |
| function searchComplete2(searcher) {
| |
| | |
| c = document.getElementById("canvas2")
| |
| p = c.getContext("2d")
| |
| var dimension = [document.documentElement.clientWidth, document.documentElement.clientHeight];
| |
| c.width = ((dimension[1]-100)/4)*5;
| |
| c.height = (dimension[1]-100)/3;
| |
|
| |
| p.globalAlpha = 0.8;
| |
|
| |
|
| |
|
| |
| if (searcher.results && searcher.results.length > 0) {
| |
| var results = searcher.results;
| |
| for (var i = 0; i < results.length; i++) {
| |
| var result = results[i];
| |
| base_image = new Image();
| |
| base_image.src = result.unescapedUrl;
| |
| p.drawImage(base_image, Math.floor((Math.random()*((dimension[1]-100)/4)*5-220)+1),(Math.random()*10)+1);
| |
| | |
|
| |
| }
| |
| }
| |
| }
| |
|
| |
|
| |
|
| |
| function searchComplete3(searcher) {
| |
| | |
| c = document.getElementById("canvas3")
| |
| p = c.getContext("2d")
| |
| var dimension = [document.documentElement.clientWidth, document.documentElement.clientHeight];
| |
| c.width = ((dimension[1]-100)/4)*5;
| |
| c.height = (dimension[1]-100)/3;
| |
|
| |
| p.globalAlpha = 0.8;
| |
|
| |
| if (searcher.results && searcher.results.length > 0) {
| |
| var results = searcher.results;
| |
| for (var i = 0; i < results.length; i++) {
| |
| var result = results[i];
| |
| base_image = new Image();
| |
| base_image.src = result.unescapedUrl;
| |
| p.drawImage(base_image, Math.floor((Math.random()*((dimension[1]-100)/4)*5-220)+1),(Math.random()*10)+1);
| |
| | |
|
| |
| }
| |
| }
| |
| }
| |
|
| |
|
| |
|
| |
| function OnLoad() {
| |
|
| |
| | |
| var imageSearch = new google.search.ImageSearch();
| |
| var imageSearch2 = new google.search.ImageSearch();
| |
| var imageSearch3 = new google.search.ImageSearch();
| |
| | |
| | |
| imageSearch.setResultSetSize(8);
| |
| imageSearch2.setResultSetSize(8);
| |
| imageSearch3.setResultSetSize(8);
| |
| | |
| | |
| imageSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE, google.search.ImageSearch.IMAGESIZE_MEDIUM);
| |
| imageSearch2.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE, google.search.ImageSearch.IMAGESIZE_MEDIUM);
| |
| imageSearch3.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE, google.search.ImageSearch.IMAGESIZE_MEDIUM);
| |
| | |
| imageSearch.setSearchCompleteCallback(this, searchComplete, [imageSearch]);
| |
| imageSearch2.setSearchCompleteCallback(this, searchComplete2, [imageSearch2]);
| |
| imageSearch3.setSearchCompleteCallback(this, searchComplete3, [imageSearch3]);
| |
| | |
| | |
|
| |
|
| |
| imageSearch2.execute("blue sky");
| |
|
| |
| | |
| imageSearch3.execute("the matterhorn");
| |
| | |
|
| |
| imageSearch.execute("old person raising hand");
| |
| | |
| | |
| | |
| }
| |
| google.setOnLoadCallback(OnLoad);
| |
| </script>
| |
| </head>
| |
|
| |
| <div style="width:100%;">
| |
| <div style="width: 50%; margin: 0px auto;">
| |
| <canvas id="canvas2" style="margin = 0px; padding = 0px;"></canvas>
| |
| <canvas id="canvas3" style="margin = 0px; padding = 0px;"></canvas>
| |
| <canvas id="canvas" style="margin = 0px; padding = 0px;"></canvas>
| |
| </div>
| |
| </div>
| |
| </nowiki>
| |
