facebook Share button with temporary, non hosted images - javascript

As part of a weekend project, I'm making a little website that draws on a (google) map based on user running tracks. I would like users to be able to upload a snapshot of the map using a facebook share button. The catch is, I would like to avoid hosting the images myself, to reduce bandwidth usage.
I can use html2canvas to turn a map into a canvas, and that into a .png using toDataURL(). The png would then be contained in a javascript variable in the user's browser, and not stored (or hosted) anywhere. So, with that in mind:
Can anyone think of a way to make facebook scrap that image for the entry in the user's time line?
Would facebook store the image permanently, or would it try to refresh it periodically (and fail)?
I understand that following the link in the post would also not go to the image (which doesn't exist), but less assume that's not an issue for now.
Any ideas or alternatives would be very welcome! Thanks!

According to How long is Facebook caching the sharing thumbnails?, facebook is caching share images for 3-5 years, so if you can get it in there..
perhaps you DO save the image and then delete it with a cron task that runs every minute?
* * * * * /home/me/scripts/deleteAllMyShareThumbs.sh

Related

Is there a way to embed pictures from DROPBOX or just get the picture file itself and upload it to my website?

I'm building a website and need to store images in it. my database gives only 512mb and I'm planning to use more images than that. I taught of the idea to store the images into dropbox and using its API to get the images and embed them into my website.
Is this possible and if it is, how can I go by doing this?
I won't show some code because I don't even know if this is possible.
Also if you have an idea of storing the images into another database or another way feel free to answer. Basically I need a way to upload images at runtime (from my website or while my website is running but without changing the code) and after that I need to display the images to the website.
You might try forwarding image to imgur or something similar and you'll probably get url back as return

How can my web app user click a button to play a locally stored mp3 file?

I'd like to allow my users to click a button in a list of tunes on a page to open a simple mp3 player (the HTML5 Player is fine) that can play a downloaded mp3 track for that song that is stored on the user's hard drive. Is that even possible? Every attempt I've tried - using HTML and/or JS, JQ - fails.
I can copy the local mp3 file path/filename into my Chrome address bar. With no code at all it helpfully opens an HTML5 player in a new tab that allows me to play the tune just fine. Why is it so difficult to allow the user to do the same thing by simply clicking a button inside my app?
I have been able to get an mp3 player to appear on the page. But no matter how I specify the file path it refuses to play the tune - occasionally telling me my code is not allowed to access local files.
For security reasons, Javascript does not have the privilege to modify files, or even open files on the client machine.
If that is absolutely what you want to accomplish, try to use a JAVA Applet.
Thanks Lyes Ben. Over the last few days thinking about your comments has helped me understand that what I was attempting was not the right approach - and why. After some research I now believe that using the DropBox api I can code a simple 'drop-in-saver' function that would not only automatically save the files locally that my user would generate through the app, but would at the same time, provide another feature that was on my list - it would give the user offline access to those files. As a bonus the files would be synced on all the user's devices, with no additional code or complexity in the app.
Sometimes I get so focused on solving a particular technical problem that I fail to step back and ask if it is the right problem to solve in the first place.
It's not done yet but I'm now working on that DropBox interface to my app. I'll update this answer when (if) I get there as I suspect this could be a solution in some cases for others facing a similar problem.

CORS header not set - can I request an image url and then serve it back to myself?

I am attempting to populate a WebGL Earth with meshes that are compiled from images. These images are cross-domain, and hosted on a server where setting the appropriate headers isn't an option. Can I XMLHttpRequest the image urls, and then serve them back to myself via PHP to bypass CORS errors?
Or, more specifically, can I use my own webserver as a proxy to serve img urls back to myself (to get around CORS) in a WebGL context?
EDIT: The real question here is if I can use my own webserver as a proxy to pass the urls, or if I'll have to actually download each image to the server to then use it.
I had a similar issue once using an API. First I tried to do everything in JS probably getting the same error message as you do.
My solution was to switch to PHP and do it server side since modern Browsers block what you want to do.
So yes, it is possible.
Get the pictures on the backend and then provide them to the frontend.
Simply retrieve the pictures first and then send them as Output to the Browser. You can do that synchronously by doing something like:
$ch = curl_init ...
...
$pic = curl_exec ... // get the picture
// and then echo it
This I have done once but don't remember correctly. Or you can do it async, what is usually done when using img-tags. I'm not sure how it works with WebGL but should be similar:
Download the pic to your filesystem
then provide the URL to the browser.
It then depends on how big the images are, how long you need them, and the API whether you want to go this direction.
Answer to first comment:
Tricky. I don't have experience using WebGL Earth and whether it is possible to load data async via Ajax (look here) or if you use AngularJS (look here) into it. You would need to try that one out. I'd especially look into the loading times.
There is a API-call like http://example.com/api/get_image/65446 which downloads the picture, resizes it and then sends it to the browser.
What you would do in this case is:
Send the 'normal' Page to the user
Then there you look for the events for which you want to show pictures
When the event happened use the API-call I just mentioned and add it to your page with the success handler. Again, how that can work with WebGL Earth is another question I can't answer.
And if you want to use that for mobile devices you need to think about the picture size. Since the screens are relatively small you should make the pics smaller first. But then, how long does it take to get the picture I guess this is the biggest challenge. Somebody who wants scrolls the globe would like to see the pictures immediately, not after 5 seconds (since I scrolled more probably)
Think about whether you can prepare the download and resize first. If you want to show only certain pictures, like 10.000 in total then I would do that. Then you don't need to think about loading times as much and when you delete which pictures. You should open another question for that topic and try first whether Ajax is possible.

storing images locally in HTML5

So we have this web image gallery we are working on. We are planning an architecture that is similar to this:
1 - Download all images from the server and store it in the local storage (HTML5)
2 - Display in gallery as if it were rendered from local drive
3 - Store any edits done in the gallery in local drive
4 - Upon clicking Completed button, upload all the change information into remote server
The images will have a higher count, like maybe in the thousands. I wanted to check if the above is do-able.
The team working on this project says that HTML5 local storage is of no use in context. They state that downloaded images are always going to reside in the cache and it will cause performance degradation in any case, and it cannot be helped.
Is that true? Is there anything that can be done using new HTML5 options to optimize this work flow?
Theoretically you could base64 encode the images and store the resulting string in local storage. The only reason to do something like this, though, is to persist the edited image in an "offline" mode whereby they can close and reopen their browser without losing any of the changes they made. Otherwise these edits could be stored in memory and, once a user was finished, could then be persisted back to the server.
As for the original images themselves, your team members are correct, once the file has been downloaded, the browser won't attempt to fetch it again unless the expiration date in the header has lapsed.
EDIT
Found a link to another stackoverflow post describing the process:
How to save an image to localStorage and display it on the next page?

How to make fixed (static) HTML elements on every page of site

How to make static fixed HTML element on every page of site?
I mean - for example, it is music player on site. It's displaying in corner of page, and while navigating on site - it doesn't reload.
Also, If you open many pages of site (different tabs) than state of this element is the same on all pages. (If I change something in this element on one page - it's changed on every page).
For real example I can provide a link (I think, it's allowed to do this on this site):
http://www.jamendo.com/en/album/40689
If you click "Play" - music player is opened. If you open other artist in other window - two players will be the same. If you have changed volume in one window - volume is changed in other too.
What techniques are used here? Can you give some references to read about such technologies?
Hopefully the site is working the same as it was when you posted the link...
This site is using Flash which seems to be using LocalConnection and ExternalInterface. The Flash object in the popup is the one actually playing the music. The controls on the page are calling a Flash object on the page which just sends commands to the popup.
Well I can give you a general idea of how I would do it.
You would need to persist the data of the feature you wan't to be the same across all pages.
For example: if you wanted something to be in the same position across all pages, you could store the current position of that variable in a session variable, cookie, or database for that particular user/ip address. Then you would make GET requests to the server "asking" for the most recent position of whatever you're tracking. And if it's different update the position accordingly.
You would need to make use of Javascript, A programming language, and some kind of data persistence.
If you want to read about the newest stuff, you could easily do this with node.JS. There is a library out there that makes it very easy to reflect server side changes on the client w/o making GET requests (making it a good for chat applications).
You can use local storage to store the current settings and poll them from each open instance. You won't need to use AJAX or the server if you only care about the settings being synchronized across one machine.

Categories