Accessing browser's local assets (like an image) via URL? - javascript

There is an API I'd like to interact with. It takes URL of an image and does it's thing. The problem is that I can't specify URL of an image saved in my clipboard for example.
Is there a way to make the browser behave like a file server in the sense that the outside Internet can access browser's assets via URL without creating your own backend. What would be the easiest and painless solution?

Related

Save dataURL image to cache without a round trip to the server

In my web app, users drag images from their desktop onto the browser window. I then use FileReader's readAsDataURL to display the image in the browser, as I described here. I can then upload the image to the server. The JavaScript in the browser can know in advance what the new URL for the image is to be.
Is there a way to tell the browser: "Here is the data that you would download from this URL, but there's no need to download it because it's already available right here. Just use this."? My aim is to get the image into the browser's cache so that using the real URL (rather than the dataURL) will display the image. This means that the browser can take responsibility for unloading such images from memory when they are (temporarily) no longer displayed.
Do you have any suggestions on how to cut out unnecessary bandwidth usage?
Correct me if I'm wrong, but I understand that you want the browser to display the image using the data from the desktop, instead of from the server on which it was uploaded.
As far as I know, browser caching relies heavily on the URLs, so I don't see how you could tell the browser to use local data instead of remote data.
However, you could:
load image directly from disk (you have the local path). However, you you have the local path in the code
use local storage (see Saving and loading an image from localStorage) to save the image locally and get it

Loading a local image with JavaScript/jQuery where I know the location, but not the file name

The new version of Linux Mint allows HTML 5 login window themes -- I'm trying to write one that will grab each user's wallpaper. These wallpapers are located in the folder /home/#USER#/.cache/wallpaper/, however the file name is not consistent and I need a programmatic way of determining it. Once I know the filename, the login screen will display the image correctly using the file:///.. format.
I don't have any tools other than client-side HTML/CSS/JavaScript[/jQuery/etc] available to me. Is there any way I can grab the file names in that directory, so that I can grab the wallpaper image?
EDIT: Figured it out! The browsers won't allow access to the file:/// resources at all, the mdm-theme-emulator will.
It looks like these files are located on the client machine, in which case you would not be able to access them using jQuery. Javascript does not have access to the local file system.
If you are sending the request through a server, you'd be able to use the server-side code (ASP.NET, PHP, etc.) to loop through the filenames

HTML5 Filesystems API - Letting Users Save Files to Their Actual Filesystem

I am aware that the HTML5 Filesystem API gives you access to a sandboxed file system. Let's say I write a file to the filesystem. Is it possible to let the user save that file to their actual file system? I would like to be able to tell the user where the file is written so that they may access it but that does not seem to be possible.
My only idea is to read the file as a data url and make a hyperlink that the user can save, but that has scalability issues in terms of file size.
You can use the URL obtained from the toURL method as the value for a link's href attribute, which link in addition has a download attribute. Clicking on the link will then prompt the user to save the contents on her filesystem.
Quoting MDN - Basic Concepts About the Filesystem API:
You can, however, export a file from a web app to a desktop app. For example, you can use the File API, create a blob, redirect an iframe to the blob, and invoke the download manager.
Also, the very page I linked to before discusses FileEntry's toURL() method which returns a url in the form of filesystem:.
Here is another article on how to make the browser download a file from a url.

Programmatically call a firefox extension from javascript

I have seen this excellent firefox extension, Screengrab!. It takes a "picture" of the web page and copies it to the clipboard or saves it to a png file. I need to do so, but with a new web page, from an url I have in javascript. I can open the web page in a new window, but then I have to call the extension -not to press the control- and saves the page once the page is fully loaded.
Is it possible?
I am pretty certain that it is not possible to access any Firefox add-on through web page content. This could create privacy and/or security issues within the Firefox browser (as the user has never given you permission to access such content on their machine). For this reason, I believe Firefox add-ons run in an entirely different JavaScript context, thereby making this entirely impossible.
However, as Dmitriy's answer states, there are server-side workarounds that can be performed.
Does not look like ScreenGrab has any javascript API.
There is a PHP solution for Saving Web Page as Image.
If you need to do it from JavaScript (from client side) - you can:
Step 1: Create a PHP server app that does the trick (see the link), and that accepts JSONP call.
Step 2: Create a client side page (JavaScript) that will send a JSONP request to that PHP script. See my answer here, that will help you to create such request.

Is there any way to execute a js function from actionscript with local content?

I'm trying to execute a function like window.alert for example, from actionscript, when both the html file and the swf file are using the file: protocol.
Does anyone know of someway to do this?
without changing global flash security settings
It looks like it's not possible after reading Controlling access to scripts in a host web page.
For SWF files running locally, calls to these APIs are successful only if the SWF file and the containing web page (if there is one) are in the local-trusted security sandbox. Calls to these methods fail if the content is in the local-with-networking or local-with-filesystem sandbox.
Then this page on local sandboxes basically says that won't work unless the swf is in a "local-trusted sandbox" which a user or installer would need to put it in.
This blog post about the "local-with-filesystem sandbox" says:
First, I think the documentation here is a bit too generous. SWFs loaded from the local file system do face some restrictions. The most relevant restrictions are probably:
The SWF cannot make a call to JavaScript (or vbscript), either through URL or ExternalInterface
The SWF cannot call a HTTP or HTTPS request.
Querystring parameters (ex. Blah.php?querystring=qs-value) are stripped and will not be passed (even for requests to local files)
There is a document "Controlling access to scripts in a host web page" that describes the various ways and restrictions on allowing Flash content to interact with Javascript.
According to the doc, as long as your embed tag contains AllowScriptAccess set to "always" you should be fine regardless of where the page is loaded from.
You need to update the Flash Player settings so that your file path is listed as a "trusted location." You will then be able to use External Interface and other JS communication methods.
Also, you can't pass default JS functions from AS using External Interface (like alert). You need to write custom functions...
ActionScript:
import flash.external.ExternalInterface;
ExternalInterface.call("alertFromFlash", 'hello');
JavaScript:
function alertFromFlash(str) {
alert(str);
}
Alternatively, if you're distributing this to a customer. It can be difficult to explain how to change Flash Player settings, so you can instead run a server from a CD, which bypassing the need for security settings. I've had good luck with the Flying Ant server in the past.

Categories

Resources