Can I embed Google Image search into my html5 webpage

Question

What I would like to be able to do is for user to click button on my website (actually a webapp that runs locally on user machine so each instance is single user) which initiates a Google image search with various params set and display the results in a section of my html page.

This is because the idea is they can then select an image and drag and drop it onto a dropzone on my webpage. This parts works but currently the search is opening in a new tab so its a bit of a pain dragging from that tab to my tab.

Embedding as an iframe does not work, Google does not allow that.

So

a> is there a Google sanctioned API I can use to perform a Google search for images and display within my page.

b> Could I send send a url request from my server (i,e like curl/wget and then screenscrape the results and present on webpage

Answer 1

Google's Custom Search Engine (CSE) API is limited to 100 free requests per day.

Creating cx and modifying it to search for images

1. Create custom search engine at https://cse.google.com/cse/create/new based on your search criteria.
2. Choose sites to search (leave this blank if you want to search the entire web, otherwise you can enter a site to search in one particular site)
3. Enter a name and a language for your search engine.
4. Click "create." You can now find cx in your browser URL.
5. Under "Modify your search engine," click the "Control Panel" button. In the "edit" section you will find an "Image Search" label with an ON/OFF button, change it to ON. Click "update" to save your changes.

Conducting a search with the API

The API endpoint url is https://www.googleapis.com/customsearch/v1

The following JSON parameters are used for this API:

• q: specifies search text
• num: specifies number of results. Requires an integer value between 1 and 10 (inclusive)
• start: the "offset" for the results, which result the search should start at. Requires an integer value between 1 and 101.
• imgSize: the size of the image. I used "medium"
• searchType: must be set to "image"
• filetype: specifies the file type for the image. I used `"jpg", but you can leave this out if file extension doesn't matter to you.
• key: an API key, obtained from https://console.developers.google.com/
• cx: the custom search engine ID from the previous section

Simply make a GET request by passing above parameters as JSON to the API endpoint (also listed above).

Note: If you set a list of referrers in the search engine settings, visiting the URL via your browser will likely not work. You will need to make an AJAX call (or the equivalent from another language) from a server specified in this list. It will work for only the referrers which were specified in the configuration settings.

Reference: https://developers.google.com/custom-search/json-api/v1/reference/cse/list

Answer from: https://stackoverflow.com/a/34062436/4366303