So currently my website is loading an JSON File from my server, looking for the data it needs and then showing it up on the screen as well as downloading and showing an image related to that info from a public API. I was wondering how would I go about storing the API downloaded image to my own servers database so before every image fetch it would check for the image in my server and if it doesn't exist, it would go to the public API and download and store it in my servers database?
This code below is a sample, when the site is loaded it pulls a random card from the JSON and displays its info along with the image. I want to download the image from the api, store it in my servers database and then check for said image before downloading as to reduce API calls to a minimum.
function RandomCard() {
const RC = Math.floor(Math.random() * cardAPIListings.data.length);
var cardShowcase = document.getElementById("randomcardshowcase");
var randomCardImage = document.getElementById('randomImage');
switch (cardAPIListings.data[RC].type) {
case "Spell Card":
case "Trap Card":
cardShowcase.innerHTML = '\"' +cardAPIListings.data[RC].name + '\"' + '<br><br>' + '[' +
cardAPIListings.data[RC].race + ' / ' + cardAPIListings.data[RC].type + ']' + '<br>' +
'Attri: ' + cardAPIListings.data[RC].attribute + '<br><br>' + 'Effect: ' + '<br>' +
cardAPIListings.data[RC].desc;
randomCardImage.src = cardAPIListings.data[RC].card_images[0].image_url;
break;
Edit:
The PUBLIC API that I'm using says this:
[ Card Images
Users who pull our card images directly from our server instead of our google cloud repository will be immediately blacklisted.
Card images can be pulled from our Google Cloud server but please only pull an image once and then store it locally(I Assume this means Store it in your Own Server/API Database).
If we find you are pulling a very high volume of images per second then your IP will be blacklisted and blocked.]
So I need a way to store the images in my own location as they are being downloaded from the Public API so I Dont get blacklisted.
Unless I'm misunderstanding your question, only store images and other binary data to the file system.
No reason to burden database with big binary data. Only store file link (or URL) in the database.
Related
thanks in advance for any help
How to transfer a local photo file to google drive using multipart/form-data?
I have copied local files to google drive, obtained the google drive file link but following code line hangs and an error comes up related to the html???
var response = UrlFetchApp.fetch(vUrlTelegram + "/sendPhoto?chat_id=" + chat_id + "&photo=" + photoUrl );
note:
have obtained html string for a sample photo from the internet, and the following telegram bot google api javascript code works
function sendPhoto( chat_id, photoUrl ) {
var response = UrlFetchApp.fetch(vUrlTelegram + "/sendPhoto?chat_id=" + chat_id + "&photo=" + photoUrl );
console.log(response.getContentText());
}
Telegram doco
Photo to send.
Pass a file_id as String to send a photo that exists on the Telegram servers (recommended),
pass an HTTP URL as a String for Telegram to get a photo from the Internet, or
upload a new photo using multipart/form-data. More info on Sending Files ยป
From your question, when the direct link of image in the internet is used for the following script, you can confirm that the script works.
function sendPhoto( chat_id, photoUrl ) {
var response = UrlFetchApp.fetch(vUrlTelegram + "/sendPhoto?chat_id=" + chat_id + "&photo=" + photoUrl );
console.log(response.getContentText());
}
From this situation, when you want to use the image file on Google Drive for above script, how about the following flow?
Flow:
Publicly share the image file on Google Drive as Viewer of Anyone with the link.
Use webContentLink of the image file as photoUrl.
In this case, when the file ID of the image file is used, webContentLink is as follows.
https://drive.google.com/uc?export=download&id={fileId}
Sample script:
For example, When the image file is publicly shared and run UrlFetchApp.fetch and sharing image file is stopped, the script is as follows.
var fileId = "###"; // Please set the file ID of the image file.
var file = DriveApp.getFileById(fileId)
file.setSharing(DriveApp.Access.ANYONE_WITH_LINK, DriveApp.Permission.VIEW); // Image file is publicly shared.
var photoUrl = "https://drive.google.com/uc?export=download&id=" + fileId;
var response = UrlFetchApp.fetch(vUrlTelegram + "/sendPhoto?chat_id=" + chat_id + "&photo=" + photoUrl );
console.log(response.getContentText());
// Utilities.sleep(2000); // I'm not sure whether this is required for this situation.
file.setSharing(DriveApp.Access.PRIVATE, DriveApp.Permission.NONE); // Sharing image file is stopped.
References:
Files
setSharing(accessType, permissionType)
Today I set up a new Azure SQL database and HTML5 Webapp to replace an existing Google Apps Script which wasn't working on iPhones. I have the database connected to the webapp with the connection string, and I want to know how to simply post the details from the html form into the SQL database.
Previously I have been using javascript in GAS with a firebase backend, so I am missing a bit here. Although I can see the connection string in my webapp, I don't know how to then call or post the html form information.
I looks at the functions app method but can't really find the code to post html data, plus how I trigger that from clicking a button on the client side.
I found this code which say it will work, but not to use it because it leaves your database open to hackers.
<script>
var objConnection = new ActiveXObject("adodb.connection");
var strConn = "driver={sql server};server=QITBLRQIPL030;database=adventureworks;uid=sa;password=12345";
objConnection.Open(strConn);
var rs = new ActiveXObject("ADODB.Recordset");
var strQuery = "SELECT * FROM Person.Address";
rs.Open(strQuery, objConnection);
rs.MoveFirst();
while (!rs.EOF) {
document.write(rs.fields(0) + " ");
document.write(rs.fields(1) + " ");
document.write(rs.fields(2) + " ");
document.write(rs.fields(3) + " ");
document.write(rs.fields(4) + "<br/>");
rs.movenext();
}
Can anyone please let me know what I am missing to get the SQL database and html5 web app talking?
Thanks
First of all you should not connect to any database from an HTML app which runs on the client side the user will be browsing the site which have a huge security impact. Connecting to a database (it could be sql,mysql or any) happens on the server side, which is where you host your application.
In order to connect to the database you will have to use server side technologies such as node,php or asp.net etc.
I am using the Google maps API v3 to create a portfolio.
Question :
Is there a way to generate the default image link, that would work on every google server, or a way to know what server is used so I can generate the link accordingly ?
Here is an example of what I'm currently doing. It may or may not help you finding an answer
User path :
The user enters the address of his business.
An iframe is displayed with the interior view of this business
The user can navigate on this iframe to select his default picture
From the view selected with the iframe, I can create an image URL directly from the Google servers that I set as default image.
At the moment, this URL can be (JS):
var image = "https://geo3.ggpht.com/cbk?panoid=" + panoId + "&output=thumbnail&cb_client=search.LOCAL_UNIVERSAL.gps&thumb=2&w=689&h=487&yaw=" + povHeading + "&pitch=" + povPitch + "&thumbfov=" + fov;
or
var image = "https://lh5.googleusercontent.com/" + panoId + "/w689-h487-k-no-pi"+povPitch+"-ya"+povHeading+"-ro0-fo"+fov+"/";
This worked for a vast majority of the cases, but as more people are using the service, some special cases appeared (example link) :
https://lh3.ggpht.com/-1dwRgcXpyYk/WS7bUYtLEdI/AAAAAAAAObA/zd-aK-rfWxYvA302eg6WT7qQoEKRrUxGgCLIB/x2-y2-z3/p
I am saving the link for the both first cases but I have not found a general rule that can be applied.
The user that entered his business having this 3rd example link is getting a 404 img not found atm.
Here is the code I'm currently using, if it can help understanding the question (JS):
function generateImg() {
/* here I get all the vars used to create the image */
//generate img link
var image = "https://geo3.ggpht.com/cbk?panoid=" + panoId + "&output=thumbnail&cb_client=search.LOCAL_UNIVERSAL.gps&thumb=2&w=689&h=487&yaw=" + povHeading + "&pitch=" + povPitch + "&thumbfov=" + fov;
//if img does not exist
UrlExists(image, function(status){
if(status === 404){
// 404 not found
var image = "https://lh5.googleusercontent.com/" + panoId + "/w689-h487-k-no-pi"+povPitch+"-ya"+povHeading+"-ro0-fo"+fov+"/";
}
});
}
You can get the consistent result within the official API:
var image = "https://maps.googleapis.com/maps/api/streetview?size=400x400&pano=" + panoId + "&fov=90&heading=235&pitch=10&key=" + API_KEY;
I'm trying to grab the highest quality image for each item that a GetSellerList request returns. The HQ images can be viewed manually by clicking the image on a product page (so I know they exist).
Unfortunately, it only returns medium sized images. I've googled and googled, only to find a lot of mentions of SelectorOutput, which can only be used in the Finding API and that is completely irrelevant to what I'm trying to do.
Here's my xml input (note that my auth is taken care of with a js library I'm using):
var xml = '<?xml version="1.0" encoding="UTF-8"?>' +
'<GetSellerListRequest xmlns="urn:ebay:apis:eBLBaseComponents">' +
'<RequesterCredentials>' +
'<eBayAuthToken> <!-- my ebayAuthToken -->' +
'</RequesterCredentials>' +
'<UserID>samurai-gardens</UserID>' +
'<StartTimeFrom>2016-01-01T23:35:27.000Z</StartTimeFrom>' +
'<StartTimeTo>2016-02-01T23:35:27.000Z</StartTimeTo>' +
'<DetailLevel>ItemReturnDescription</DetailLevel>' +
'<Pagination ComplexType="PaginationType">' +
'<EntriesPerPage>10</EntriesPerPage>' +
'<PageNumber>1</PageNumber>' +
'</Pagination>' +
'</GetSellerListRequest>"';
I am getting the correct output, I just don't see how I can pull the large images with this. Thanks ebay for a super frustrating api!
Just to clarify the comments posted on this question:
To obtain a high resolution image associated with a product listing perform the following..
Utilize a GetSellerRequest as formatted below to obtain the picture URL from the Item Details:
var xml = '<?xml version="1.0" encoding="UTF-8"?>' +
'<GetSellerListRequest xmlns="urn:ebay:apis:eBLBaseComponents">' +
'<RequesterCredentials>' +
'<eBayAuthToken> <!-- my ebayAuthToken -->' +
'</RequesterCredentials>' +
'<UserID>samurai-gardens</UserID>' +
'<StartTimeFrom>2016-01-01T23:35:27.000Z</StartTimeFrom>' +
'<StartTimeTo>2016-02-01T23:35:27.000Z</StartTimeTo>' +
'<DetailLevel>ItemReturnDescription</DetailLevel>' +
'<Pagination ComplexType="PaginationType">' +
'<EntriesPerPage>10</EntriesPerPage>' +
'<PageNumber>1</PageNumber>' +
'</Pagination>' +
'</GetSellerListRequest>"';
This should product a URL such as the following:
i.ebayimg.com/00/s/ODAwWDYyOQ==/z/3eEAAOSwSdZWdJRL/$_1.JPG?set_id=880000500F
Once this URL is obtained, it needs to be modified to point to the high resolution image option. Through trial and error this appears to be either .JPG images 3 or 57 (and possibly others). Each image has different alignments which is the cause of the multiple 'high resolution' options. Modify the returned URL using standard string manipulation techniques to obtain the following:
i.ebayimg.com/00/s/ODAwWDYyOQ==/z/3eEAAOSwSdZWdJRL/$_3.JPG
This could be obtained as follows (in c#). The snippet below was not tested. Make sure there isn't an off by one bug in the substring. There are a myriad way of doing this, this just happens to be what I thought of..
string url = "i.ebayimg.com/00/s/ODAwWDYyOQ==/z/3eEAAOSwSdZWdJRL/$_1.JPG?set_id=880000500F";
int index = url.LastIndexOf(Convert.ToChar(#"/");
url = url.Substring(0,index+1);
url = url + #"/$_3.JPG";
If you are using c# (which I realize the original post was for javascript) you can use information in the following thread to obtain an image stream from the URL: URL to Stream
Here is a post for displaying an image from URL using Javascript: URL To Display Javascript
I get a return from webservices as JSON and there is a binary file which represents a Word docx.
From there I need to show this somehow in a embeded object in the webpage, however I can't find the solution how to do this.
Found: How to build PDF file from binary string returned from a web-service using javascript
This kind of work but says missing plugin, while I have office installed on my pc.
What I try to do is similair as I do with images:
var $image = $("<img/>", {
src: "data:" + files._type + ";base64," + files._thumb,
id: "img_" + files.id,
title: files.name
})
what I tried is as on the link, but get the missing plugin.
I already have the binary data on the client and can do with it what I want, but cant see it in the page, but code behind its there