|
|
| (8 intermediate revisions by one other user not shown) |
| Line 1: |
Line 1: |
| <script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>
| |
| <script type="text/javascript">
| |
| /*
| |
| * How to search for images and restrict them by size.
| |
| * This demo will also show how to use Raw Searchers, aka a searcher that is
| |
| * not attached to a SearchControl. Thus, we will handle and draw the results
| |
| * manually.
| |
| */
| |
|
| |
| google.load('search', '1');
| |
|
| |
|
| |
|
|
| | == Martin Parr - The Matterhorn == |
|
| |
| function searchComplete(searcher) {
| |
|
| |
|
| |
| c = document.getElementById("canvas")
| |
| //console.log("c is",c)
| |
| 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;
| |
|
| |
|
|
| |
|
| |
| // Math.floor((Math.random()*100)+1);
| |
|
| |
| // Check that we got results
| |
| if (searcher.results && searcher.results.length > 0) {
| |
| // Grab our content div, clear it.
| |
| // Loop through our results, printing them to the page.
| |
| var results = searcher.results;
| |
| for (var i = 0; i < results.length; i++) {
| |
| // For each result write it's title and image to the screen
| |
| 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);
| |
|
| |
|
|
| | [[File:017_martin-parr_theredlist.jpg]] |
| }
| |
| }
| |
| }
| |
|
| |
|
| |
|
| |
| function searchComplete2(searcher) {
| |
|
| |
|
| c = document.getElementById("canvas2")
| |
| //console.log("c is",c)
| |
| 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;
| |
|
| |
|
| |
| // Math.floor((Math.random()*100)+1);
| |
|
| |
| // Check that we got results
| |
| if (searcher.results && searcher.results.length > 0) {
| |
| // Grab our content div, clear it.
| |
| // Loop through our results, printing them to the page.
| |
| var results = searcher.results;
| |
| for (var i = 0; i < results.length; i++) {
| |
| // For each result write it's title and image to the screen
| |
| 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);
| |
|
| |
|
|
| | [http://www.eenportfolio.nl/canvasTest.html Find my Canvas version of this photograph here.] |
| }
| |
| }
| |
| }
| |
|
| |
|
| |
|
| |
| function searchComplete3(searcher) {
| |
|
| |
|
| c = document.getElementById("canvas3")
| | [[File:Mathijs_Matterhorn.png]] |
| //console.log("c is",c)
| |
| 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;
| |
|
| |
|
| |
| // Math.floor((Math.random()*100)+1);
| |
|
| |
| // Check that we got results
| |
| if (searcher.results && searcher.results.length > 0) {
| |
| // Grab our content div, clear it.
| |
| // Loop through our results, printing them to the page.
| |
| var results = searcher.results;
| |
| for (var i = 0; i < results.length; i++) {
| |
| // For each result write it's title and image to the screen
| |
| 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() {
| |
|
| |
| | |
| // Our ImageSearch instance.
| |
| 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);
| |
| | |
| | |
| // Restrict to extra large images only
| |
| 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);
| |
| | |
| // Here we set a callback so that anytime a search is executed, it will call
| |
| // the searchComplete function and pass it our ImageSearch searcher.
| |
| // When a search completes, our ImageSearch object is automatically
| |
| // populated with the results.
| |
| imageSearch.setSearchCompleteCallback(this, searchComplete, [imageSearch]);
| |
| imageSearch2.setSearchCompleteCallback(this, searchComplete2, [imageSearch2]);
| |
| imageSearch3.setSearchCompleteCallback(this, searchComplete3, [imageSearch3]);
| |
| | |
| | |
| // Find me a beautiful car.
| |
|
| |
|
| |
| imageSearch2.execute("blue sky");
| |
|
| |
| | |
| imageSearch3.execute("the matterhorn");
| |
| | |
|
| |
| imageSearch.execute("old person raising hand");
| |
| | |
| | |
| | |
| }
| |
| google.setOnLoadCallback(OnLoad);
| |
| </script>
| |
| | |
|
| |
| <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>
| |
