How to save an image with JavaScript? - javascript

I'm working on a Chrome Extension: when you drag an image, it will be saved to your computer.
I learned that in HTML5 there is FileWriter API, but really can't find any example of it, and does Chrome support it?

No, there isn't a FileWriter API in HTML5. What you probably mean is the File API that allows you to read files. And in Chrome even extensions aren't allowed to write files, for reasons of security. So unless you want to bundle an NPAPI plugin with your extension (which would trigger a huge warning upon installation) all you can do is trigger a download message that the user might choose to accept - or not. See Cross-browser Save As .txt for a possible approach (Flash objects like Downloadify being the other).
Edit: I was wrong, there is a FileWriter API proposal. It is very far from being done however.

I found this. http://www.html5rocks.com/en/tutorials/file/filesystem/
You can find some examples.
Edit This is screenshot from the article. I'm using chrome 12.0
FileWriter API browser support message http://s3.amazonaws.com/twitpic/photos/full/329503613.png?AWSAccessKeyId=AKIAJF3XCCKACR3QDMOA&Expires=1308932374&Signature=DXBdFSjbNqaeJPr%2F0fSAqPWyh2E%3D

I don't think the FileWriter API will be ready and usable for some time yet.
You could get the image data in hex, then use a DataURI to 'export' it from the browser. Although this leads to a file saved with a filename such as "download(1)". Each browser seems to have different size limitations for DataURIs, and they're not big, although ahould be fine for a reasonably sized image.
http://en.wikipedia.org/wiki/Data_URI_scheme
Alternatively you could use a Downloadify to save it with a proper filename (Requires flash and may be tricky to embed into the chrome extension).
http://davidwalsh.name/downloadify

Related

Creating an offline version of pdf.js by combiing pdf.js and pdf.worker.js

I am attempting to create a javascript pdf reader that can work offline in the browser (it uses the browser but not the internet), and am using Mozilla's pdf.js to do it. Pdf.js has a main file of the same name, which uses the internet to inject script from a pdf.worker.js file. One obstacle to creating an offline version of pdf.js is to stop it from using the internet to do this, by either pasting the pdf.worker.js code into the parts of pdf.js code that ask for it, or to convert the pdf.worker.js into a Data URI and use that as the url that pdf.js asks for. Doing the former has not yielded any success, and doing the latter has only worked on Firefox. We want this to work any way we can make it work, so I have pretty much two questions pertaining to making pdf.js offline.
1) If I am going with the method of physically pasting pdf.worker.js code into the spots where pdf.js uses the internet to inject pdf.worker code in, how would I make it work? I tried doing it, and I couldn't get it to work. Are there any things I must pay attention to?
2) I have had more success with converting pdf.worker.js into a Data URI and having pdf.js use that instead of the url it was using to access worker.js. However, this process only works on Firefox. Any idea why? And, do you know of a way I can make this process work with the other browsers?
Any input is welcome. Thanks in advance!
Go to https://github.com/mozilla/pdf.js/
Follow the instructions in "Getting the Code" and "Building PDF.js"
Then run node make singlefile
Combined file will be in build\singlefile\build\pdf.combined.js
Worked for me on Windows. Should work on other platforms too.

Local filesystem & web browser

Please, does anyone know what are the possibilities for accessing local filesystem from a browser? The use case I'm looking for is whether it is even possible to create a really simple text editor which could save text files locally? If so, what technologies does it take to implement such thing?
I know, historically, that it was certainly not possible to this. But now that we have Ajax and co. it is sometimes possible to open local files. There is even some form of local database (ok, not a file), maybe the extensions for a certain browser are allowed to write a file into a certain (predefined) location and then there is the local web server which could as a kind of proxy. And I even saw [1], though I'm not sure how well is it supported. What else?
In other words, suppose you open Notepad, type same text. Now you click "Save", it asks for the path and saves it [2]. Next time you save the file it remembers the path and saves the new content immediately. Is this possible with browser?
[1] http://dev.w3.org/2009/dap/file-system/pub/FileSystem/
[2] see e.g. http://www.nihilogic.dk/labs/canvas2image/ ("Save PNG")
The are some new html5 javascript methods, called file api and filereader api. I only have experiences with the file api. Tried it some time ago and found it not consistent between FF and Chrome yet.
You can find further information on MDN:
https://developer.mozilla.org/en/DOM/FileReader
https://developer.mozilla.org/en/Using_files_from_web_applications
Back in 2020, you are probably after Electron JS, which offers an independant-OS platform to develop desktop programs with the use of JS, Html and CSS. It uses Chromium and NodeJs. Known apps are the GithubDesktop (Github is one of the founders of ElectronJS), WhatsApp and VSCode.

Making a Chrome extension to download (not view) the link and with custom filename

I'm currently developing a simple javascript extension for Chrome. The problem is simple but probably unfixable, but still here's the issue:
on particular pages, i embed links to some files (i don't have access to server, so i can't change the way they are outputted) - a simple <a>nchor tag.
then, what i'm trying to achieve is:
set a filename of downloaded file (right now it's like 87sfhkjhsf and without extension)
make the browser download (not view) the file in any case (right now, if it's a pdf, it gets viewed.. or if it's an mp3 it gets played with native Chrome player)
i would even accept a .dll solution IF it will really work (i even tried using Flash with FileReference.download method, but it doesn't allow to download files from other domains)
seeking help from you guys :)
In or to programmatically download a file using javascript in chrome you (currently) need either a server to bounce the download off, to be satisfied with garbled filenames (using blobbuilder; this sounds like what you are doing), or a NPAPI plugin (such as a custom .dll or Flash).
If you look at the screenshot extensions, the most popular ones use NPAPI.
I plan on using NPAPI myself, but haven't gotten around to coding for all 3 OSes yet. (I am the developer of Smooth Gestures, and have gotten many requests for a image download gesture)
All this said, there is constant development on filesystem access for javascript and a native API may become available. But I wouldn't hold my breath.

javascript jquery file opener

i was wondering if anyone knew a quick solution to my problem. I want to be able to open a folder on users screen pretty much the same as but just opening up the my computer folder so a user can drag a file onto the browser screen. anyone know how?
You can't. They even gave this bug a name: "security".
The closest you can get without using Flash, proprietary browser stuff or Java is something like this.
You have to use a java applet.
Javascript has no access to the file system for security reason.
Every page would be able to see the files on your local machine and might display: "According to the files on your disk you might be interested in some of our special movies ;)"
Incidentally, there are custom extensions in IE and Firefox that let you load and save files; it's the reason TiddlyWiki can work as it does. It does degrade a Java applet for other browsers.
A new jQuery plugin has been extracted out of TiddlyWiki to give Javascript authors the ability to load and save, and it's portable across all browsers:
twFile - http://jquery.tiddlywiki.org/twFile.html
It's quite possibly not what you're after as it will only work off a file:/// URL.

HTML5 Local Storage of audio element source - is it possible?

I've been experimenting with the audio and local storage features of html5 of late and have run into something that has me stumped.
I'd like to be able to cache or store the source of the audio element locally to enable speedier and offline playback. The problem is I can't see how this is possible with the current implementation.
I have tried the following using WebKit:
Creating a manifest file to set up local caching but the audio file appears not to be a cacheable item maybe due to the way it is stream or something
I have also attempted to use javascript to put an audio object into local storage but the size of the mp3 makes this impossible due to memory issues (i think).
I have tried to use the data uri and base64 to use the html as a audio transport that can be cached but again the filesize makes this prohibitive. Also the audio element does not seem to like this in WebKit (works fine in mozilla)
I have tried several methods of putting the data into the local database store. Again suffering the same issues as the other cases.
I'd love to hear any other ideas anyone may have as to how I could achieve my goal of offline playback using caching/local storage in WebKit.
I've been trying to do this myself, on the iOS (for iPhone / iPad) but it refuses to cache audio files in offline, even if in Cache Manifest.
It does not error, but instead simply pretends to have played the audio element if invoked via JavaScript without a control. If it's embedded with a control, it displays an alternate control that says "Cannot play audio file.". It works fine if the application is able to go online.
It seems not to cache the audio, playing another sound resource seems to cause it to clear the previous resource from memory - this is pretty worthless functionality even when online.
I have experimented with base64 encoding the audio as data URI's. This works in Safari on the desktop (at least for fairly short samples of around 20-30k that I've been using) but seems not to be supported at all on iOS - it silently does nothing, which is highly annoying.
I don't know about other vendors - Google Chrome used to not support data URI's for audio but perhaps they fixed it... - it seems like it's not possible for now though.
Update: Minor discrepancy with iPhone OS 3.x (tested with 3.1.2): If an audio element is specified in an offline web app but it doesn't have a control, it displays a non-interactive control with a non-animated spinner on it (which it definitely shouldn't do). I assume this is fixed in iOS 4.x (which should be out next week).
So it's been a while since I asked this question and I thought i'd give some info about how we solved it. Basically we encoded the data into PNG's using a similar technique to this:
http://audioscene.org/scene-files/yury/pngencoding/sample.html
Then cached the image on the mobile device using html5 local storage and accessed it as needed. The PNG's were pretty big but this worked for us.
I spent a while trying to do this for a game I'm making, and since as far as I could tell browsers (Firefox and Chrome) still don't support caching of audio elements I thought I'd post the solution I found.
There is a workaround described here: http://dougx.net/plunder/index.php#code
I can confirm it works pretty well, but is probably better suited to smaller files. As he describes here (http://dougx.net/plunder/GameSounds.txt), you encode the audio as base64 strings, and give them a data:audio/ogg;base64 (or any compatible audio format) header, which HTML5 audio can then read in. Because this is just a string, the browser will cache it.
I guess it would be preferable to get the manifest approach working, since this feels like the most relevant mechanism for locally caching the file.
What happens if you alter the audio file's HTTP headers, e.g. Content-Type and Expires? Does the browser do something different if the file extension is changed?
I see you've had no luck so far.
You might want to take a look at JAI (JavaScript Audio Interface) ("the world's first javascript interface for web <audio>"). Or get in touch with Alastair MacDonald, who wrote it.
Failing that, the HTML5 Doctor may be able to assist.
Adding video and audio files to local storage works with iOS 4.3.
I just added a video and an audio file to manifest and they both got downloaded to offline storage on iPad.

Categories