I've got an object called 'output' that I need to display on the page. It is an image object. I tried to use the following code but it doesnt work. Any advice greatly appreciated.
document.getElementById("imageDiv").appendChild(output);
<div id='imageDiv'></div>
When I alert the object I got the following:
{"result":{"output":"data://path-to-file/background-32.png"},"metadata":{"content_type":"json","duration":9.845787767000001}}
How do I actually display the file?
You are using the ColorfulImageColorization API from Algorithmia.
It turns out that this service doesn't actually return the image data or a true URL path to the resulting image. Instead, it returns a pointer to where the image is stored in your data collection that you have set up with them. You can read about the various types of data collections and such on their Hosted Data page here
Also, from their comments sectiion:
Nir_Photomyne: Hey there! :) how to access the output using JS? I get the out put url but then what?? HELP
deeplearning: #Nir_Photomyne: There are a couple options depending on what you want to do with the images. The best option is probably to set the output location to s3,after setting up an s3 data connector at https://algorithmia.com/data
.
My personal opinion?
I'd see if I could find a similar API that is more straight forward and simply sends the image data in the response instead of storing the data.
http://jsbin.com/diwekox/edit?html,js,output
Do you just forgot the put on the image source attribute or something else?
Related
it's probably a basic question but it seems i can't find a solution about this.
It's my first time dealing with third party API, whose methods i'm restructuring in a personal php api service.
All data are retrieved fine, but what i don't get is how to use the image if the content i'm getting is just:
{image: 'name-of-image.jpg'}
should i upload all the images i get from the call to the server? Shouldn't they be already allocated in a url? How do I do this... I'm lost.
Thank you
I'm working with html canvas and creating a data URI to preview an image that the user can build himself. When he hits a preview button, the image gets displayed:
$("#show_label").html('<img src='+canvas.toDataURLWithMultiplier("png",1,1)+' width="157" height="202">');
Works fine. Now I want to save the dataURL in a cookie as I want to restore the image at a later stage on the website or store it in my database later.
$.cookie("current_label",canvas.toDataURL());
That won't work.
I understand that this is not a no-brainer, although it would make sense to store objects in a cookie as well. I guess I would have to encode the data URI and decode it later. But how? Researching didn't give me any results.
Also, could it be that cookies would become too large then so this is not even something to consider?
Should I store the dataURL in a SQL database instead and just use a cookie to identify the database entry (e.g. via ID)?
Any help appreciated.
Try using Web Storage objects.
Do you have to use cookies? Might I suggest using localStorage?
Example:
localStorage['aVariable'] = 'a Value';
//A week later this will still hold value:
alert(localStorage['aVariable'])
We are creating a website based on images. Those images are uploaded on a facebook page too. I managed to get the albums, the images inside them and the likes that they have through Facebook Graph API. I'm using javascript to fetch all these urls and json to parse all the responses.
We could not found a way to get a like button or create one of our own that could manipulate the likes of each image and change them on facebook too.
I dig through Graph docs, i tried use the social plugin with urls like that https://graph.facebook.com/ but the results from json that fb graph gives ( witch are the true ones checked with the images ) are different from those in social plug in.
I'm not posting any code because i do not thing it is needed. But if someone need more details or code please feel free to ask.
I can use only Javascript for this task server side scripting not allowed.
Sorry for my enlgish, thanks in advance.
Well, if you have a look at the docs at https://developers.facebook.com/docs/plugins/like-button/ you could see that the URLs need to be some "public" URL, i.e. the "link" field of a photo object (as of https://developers.facebook.com/docs/graph-api/reference/photo).
I'm currently exposing some application icons (such as the Notepad.exe icon) as bitmap data in JSON format through a RESTfull service. I'd like to capture the data using javasript and/or jQuery and display the original icons in my HTML website. The number of Icons exposed is not fixed but arbitrary. This means that,the website might have to dynamically create tags to display the captured icons into(?). How can I do that? Would it be easier to achieve my goal if I was to expose the icons as Base64 strings in JSON/XML format? Any other ideas?
Any help would be much appreciated. Thank you in advance!
I suggest that your service response points to a image url instead of adding the image data to the response. then on response, you can iterate your object and add as many img tags as you want and set their source to whatever the service gives you.
I am trying to get dynamic reloading to work in d3 and I'm having trouble trying to figure out how to refresh the data from the database.
I have an array that contains values should change every second:
var data = [1,2,3,4];
In my initial script, I had PHP pull the data from the database to set up the array, and reloading the page works fine for that, but I'd like to use d3's reload functionality to fetch new data and redraw the diagram.
I'm completely new to js and d3, so any suggestions would be very helpful.
I tried using jQuery's get command to call an external PHP script that outputs the values but that doesn't seem to work.
I'm basically trying to replicate the bar chart from Google Analytics real time display.
firstly, you need a page on the server that will output the data in JSON format*. Once you have that page, call it from the browser, and you should get the encoded data appearing on screen (this will prove that the page is hosted properly and returning data)
Next, follow the simple example on the D3 docs link that Yeco posted. You'll need to replace the dummy URL with the address to your new data page, and stick your own function call in there to redraw the chart with the new data.
*Note: I am not familiar with PHP, but it should have either a native JSON encoder, or a library will be available on the net. You'll also need to make sure you set the response mime type appropriately - a quick google should give you the correct mime type - it's something like 'application/json' I think, but can't remember of the top of my head
This might help you: https://github.com/d3/d3-request/blob/master/README.md#request
Edit: updated link to API v4