How to cache an image from URL before displaying it - javascript

Basically, this app should contain a collection of objects in a view showing a representative image of each object (i.e. a movie should show its poster).
Talking about movies, I am trying to use the IMDB APIs in order to retrieve the metadata for a certain movie title, including its poster. However, hotlinking won't let me display the images once their URLs are obtained from the APIs (I keep getting the "GET [...] 403 Forbidden" error...).
Since I am using the JSONStore feature in order to cache the data, I would like to know if there is a possibility to store those images in JSONStore and then display them like a normal browser would do. I am trying to do all this sort of things from the front-end side, not the back-end one, using AngularJS, HTML5 and JavaScript.
Do you have any suggestions for this kind of problems?
Thank you.

Suggested solution: What you'd need to do is to encode the images to base64 and this way you could store the binary image as a string inside your JSONStore collection.
When you then need to display it you will need to base64 decode the string back into an image and display it in your HTML

Related

Loading buffer data from database as PDF

I have been developing a web app where the user can upload a PDF file, and then later retrieve it and view it. What I have been doing to achieve this is having the PDF uploaded to a PostgreSQL database as bytea datatype (the column is called "attachment"), and then having nodeJS offer up this data to be fetched back and turned back into a PDF to view.
However I have been struggling to convert the data back into a valid PDF. This is the method I am using so far.
var file = new Blob([res[i].attachment], { type: 'application/pdf' });
var fileURL = URL.createObjectURL(file);
document.getElementById("pdf_box").data = fileURL;
The #pdf_box identifier refers to an object element in a HTML file which is used to display the PDF (this has been shown to work when I provide the file location of a dummy PDF file to the data attribute of this element).
The res[i].attachment is also shown to provide valid buffer data in JSON format, with an example provided below:
"attachment":{"type":"Buffer","data":[91,111,98,106,101,99,116,32,70,105,108,101,93]}
When I load the created fileURL into the data attribute of #pdf_box however, I get an error indicating along the lines of an invalid PDF file. My research so far appears to indicate this may be because the data is coming in as buffer whereas it needs to be in byte form, but I haven't found much that helps show me how this may be achieved or if there is a way to convert between the forms with the data I have access to? I have also seen occasional reference to a method called pdf.create(), but I cannot find documentation on this and I assume it must belong to a third-party library for JS.
If you know of any information that can help me with understanding what my problem is and what to search to figure out a solution, it would all be greatly appreciated, thank you.
To all reading this question, this method does not seem possible and would likely be incredibly inefficient to implement. If you send a string to nodeJS larger than the MTU of your link to this server (anywhere between 68 bytes and >1500 bytes depending on every component of your network) the packet will be silently dropped with no attempts to resolve or throw an error. What you must do is take the approach of using "multipart/form-data" encoding to send any files to the server (more on this found here).
It should also be mentioned that uploading a file to the database is not recommended in any capacity (due to databases being quite inefficient storage for large amounts of data) and what should be done is to upload a reference to the file path or URL to find the file at. Then on the client-side this file could be rendered as such when you have retrieved the file location...
<object id="pdf" data="../files/test.pdf"></object>
To change the data attribute, the following can be done...
document.getElementById("pdf").data = "../files/test2.pdf";

Images from json data

I have following json data from a web api:
[{"FileName":"D:\\StuckUpTask\\Insta\\Insta\\Images\\/download (1).jpg"},{"FileName":"D:\\StuckUpTask\\Insta\\Insta\\Images\\/download (2).jpg"},{"FileName":"D:\\StuckUpTask\\Insta\\Insta\\Images\\/download.jpg"},{"FileName":"D:\\StuckUpTask\\Insta\\Insta\\Images\\/images (1).jpg"},{"FileName":"D:\\StuckUpTask\\Insta\\Insta\\Images\\/images (2).jpg"},{"FileName":"D:\\StuckUpTask\\Insta\\Insta\\Images\\/images (3).jpg"},{"FileName":"D:\\StuckUpTask\\Insta\\Insta\\Images\\/images (4).jpg"},{"FileName":"D:\\StuckUpTask\\Insta\\Insta\\Images\\/images (5).jpg"},{"FileName":"D:\\StuckUpTask\\Insta\\Insta\\Images\\/images (6).jpg"},{"FileName":"D:\\StuckUpTask\\Insta\\Insta\\Images\\/images (7).jpg"},{"FileName":"D:\\StuckUpTask\\Insta\\Insta\\Images\\/images.jpg"},{"FileName":"D:\\StuckUpTask\\Insta\\Insta\\Images\\/island1.jpg"}]
Is it possible an angualar js code to call this json result and show the pictures as thumbnail?
No. The only data you have is about the file names in the machine that you got the JSON array from (maybe not even that), but to have access to those images, you would need to have the exact url to those images and also permission to view them.

Webpage content converted into JSON

In my textbook the URL http://services.faa.gov/airport/status/SFO?format=application/JSON was provided. That link points to a page that provides the content of the original page in JSON format. I want to format another webpage's content into JSON so I tried copying the method used, (Also the link my professor provided for an assignment uses the same format) and I get nothing. http://www.programmableweb.com/apitag/weather?format=application/JSON Clicking the link from here leads to a search of the website via a search engine. Copy pasting that exact same link just takes you to the actual webpage. My question is, why cant I just append ?format=application/JSON to any url for the JSON format of the webpage?
If it matters I'm trying to get JSON data to display via a Chrome extension.
My question is, why cant I just append ?format=application/JSON to any url for the JSON format of the webpage?
Because a URL is just data, and there is nothing standard about a query string parameter called "format". The server has to be designed to give you JSON before it can or will do that.
That particular website simply provides a feature where you can get the same data in an alternate format such as JSON. Not all websites provide features like that, and not all of them implement it with the same URL parameter. Some sites may have URLs ending with .html be HTML pages and ones ending with .json provide the same info in JSON. Others might provide a separate API. You might check that website to see if it has a "developers" section that gives information on their API, if they have one.

Image corrupted or truncated Phonegap

I'm using Phonegap to develop an android application. Users take photo, the photo is stored in a mysql database (medium-blob column). I store them using a simple INSERT INTO query, without changing the data. The data are sent server side using a REST call (PUT)
Here's an example of the content of this column:
thumb = '/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDACgcHiMeG...'
It is written on the phonegap documentation that the image captured through the camera is encoded in base 64.The problem is, when i try to retrieve my images in the database, I cannot display them using this JS code :
$('#myImg').attr("src", "data:image/png;base64," + data
Any ideas of where this "Image corrupted and truncated" come from ? :(
The problem was located in the way I was sending the images.
I was sending the data through a string. I tried to pass them nested in a json object and It worked.

Populating Nested JSON from remote data

i want to populate this json http://www.godsgypsychristianchurch.net/music.json using a get request, there are multiple level's data which i would like to have parsed using jquery and using some hidden div's (this json hold's music from multiple church's in different cities)
the idea of the parsing is this
Cities>Albums>Tracks>Div with Mp3 Link/Player
detailed explaination
Church
with the string church i'd like to list firstly a list of cites which you click on and then the string
Album is to populate & list each album for the selected city (while hiding the city list)
once a album is selected the string
tracks is to be populated and listed (again while hiding the album list)
once a track is selected id'd like to have a hidden dive which links to the mp3 (which will have to be combined with the baseurl string to complete the url, but once i can get to this div i am capable of creating the template for it, it just parsing the nested json in that type of manner thats the problem..
please help and if you would please include full code (i get very confused when just a snippet of code is shown, and JSfiddle is a big help too, i know it's asking a lot but i really need some help, thank you in advance
to get more of a idea of what i am trying to do, go to you can download the iOS app from the app store "GGCC MOBILE" I'm basically trying to duplicate that but for the website http://www.ggcc.tv
i've rewritten the JSON format and got it working in Sencha touch http://www.ggcc.tv/app/STNL the rewritten data is here http://www.ggcc.tv/app/data.json but the problem with that is scrolling with a mouse, ST would require you having to click and drag in order to scroll, i can't seem to find a way to disable is, so i'm asking for your help in parsing this data for our website without using sencha touch, thank you very much for all your help, time and effort.
"Populating Nested JSON from remote data" is worrying.
Think of it this way :
Web page issues a .getJSON() request (or its $.ajax() equivalent).
Remote server application receives the request.
Script on the remote server responds to the request by retrieving data from database and composing a data structure (deep-object or deep-array or a combination of the two).
Script on the remote server JSON-encodes the data and sends it back to the client in its response.
Client receives the response and jQuery automatically JSON-decodes it into a javascript data structure that mirrors the server's original data structure.
Exactly what you then do with the data is up to you and your application building skills, which, as a byproduct of the exercise, will be honed to perfection.

Categories