From within my firefox extension I want to save a picture which is already loaded and shown in a browser tab. I only found ways to download a file or picture directly from the server with a binary input stream passing the url of the picture. But this is not what I want to do here.
So, how can I save a picture which is already loaded by firefox to a local file?
You can create a file in your add-on and convert binary image data into base64 and dump that encoded data into that file.
Related
I have a Javascript widget that creates .wav files. After running it, a Base64 representation of the file is generated, so that the user can play it in the browser. To download it, I then put the Base64 as the href of an element with the download attribute and programatically click it.
This all works fine and relatively quick for small files. However, if my Base64 exceeds about 2^21 characters in length (only 16 seconds of audio!), I get no download window to open.
Is there any other way I can get the download to work with files this large, without having to first upload the files elsewhere?
Edit: I'm using the latest version of Chrome. Firefox doesn't seem to have this issue.
From UI using HTML input file, I want to upload images. In JavaScript, I want to store these uploaded images in a specific folder by creating a unique URL to the image. Later, I post the rest of the web-service and I send this image URL to store it along with some other data, and I want to display the images in the UI.
Can anyone please suggest a way to do this?
Your question is confusing, it is not clear whether you are talking about storing the file in browser or on the server. If you want to create a file/folder on your local browser filesystem and store the file in browser (before sending to server or cache a copy) you should read these two articals:
Create a file in browser filesystem:
https://www.html5rocks.com/en/tutorials/file/filesystem/
Create a data URL for image file:
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
After copying and pasting a JPG image file into Chrome, analysing the data from the Event.originalEvent.clipboardData, the image type is image/png. Why?
OS : windows 7
I think it's not possible that the image is converted when it copied to clipboard. I tried to paste it on other App, and the image can be saved as JPG.
I downloaded it from web page.
That said, it's obviously a goal to have as rich interaction as possible between native apps and websites. But the browser needs to do some "filtering" to expose only the data it knows a MIME type description for - MIME types is how we describe content on the web, it's cross-platform and hence more usable than com.apple.iWork.* strings. Also, the application might expose structured data for example in some XML format as one of the alternate parts on the clipboard.
This should pass through the clipboard api and show up as text/plain or image/jpeg+xml that we can interpret. paste works since it creates a blob object that has the correct svg extension, but clipboard paste never receives the data and only receives an alternate image/png item.
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
I've to upload image by checking its dimensions, only if that image fits into limits it'll be uploaded to the server else we should alert the user to change the image.
The question is how to check uploaded image dimension in javascript? Thanks.
This is impossible.
What you are asking is the dimensions of a file that you've requested the user to upload.
You are talking about a file upload, ie a file that is uploaded trough the tag.
This file will only be read and uploaded to the server the moment the form is submitted. So until you actually upload the file to the server, you have no access to the contents of the file.
The browser security model prevents access to this file...
You should verify this at the server side, and display an error message if they uploaded the wrong size of file. This does mean that the file will need to be transferred and then rejected.
The only workarounds would mean to use plugins such as activeX objects or maybe flash, but then you are no longer using javascript...
I think there's no way to do this except with an URL. See this example how to do with an URL: link