Sunday, May 12, 2024
9
rated 0 times [  10] [ 1]  / answers: 1 / hits: 109077  / 15 Years ago, thu, january 28, 2010, 12:00:00

I'm currently creating an extension for google chrome which can save all images or links to images on the harddrive.



The problem is I don't know how to save file on disk with JS or with Google Chrome Extension API.



Have you got an idea ?


More From » google-chrome

 Answers
32

You can use HTML5 FileSystem features to write to disk using the Download API. That is the only way to download files to disk and it is limited.



You could take a look at NPAPI plugin. Another way to do what you need is simply send a request to an external website via XHR POST and then another GET request to retrieve the file back which will appear as a save file dialog.



For example, for my browser extension My Hangouts I created a utility to download a photo from HTML5 Canvas directly to disk. You can take a look at the code here capture_gallery_downloader.js the code that does that is:



var url = window.webkitURL || window.URL || window.mozURL || window.msURL;
var a = document.createElement('a');
a.download = 'MyHangouts-MomentCapture.jpg';
a.href = url.createObjectURL(dataURIToBlob(data.active, 'jpg'));
a.textContent = 'Click here to download!';
a.dataset.downloadurl = ['jpg', a.download, a.href].join(':');


If you would like the implementation of converting a URI to a Blob in HTML5 here is how I did it:



/**
* Converts the Data Image URI to a Blob.
*
* @param {string} dataURI base64 data image URI.
* @param {string} mimetype the image mimetype.
*/
var dataURIToBlob = function(dataURI, mimetype) {
var BASE64_MARKER = ';base64,';
var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var base64 = dataURI.substring(base64Index);
var raw = window.atob(base64);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);

for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}

var bb = new this.BlobBuilder();
bb.append(uInt8Array.buffer);
return bb.getBlob(mimetype);
};


Then after the user clicks on the download button, it will use the download HTML5 File API to download the blob URI into a file.


[#97733] Sunday, January 24, 2010, 15 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
dahlias

Total Points: 730
Total Questions: 104
Total Answers: 101

Location: Denmark
Member since Tue, Jul 19, 2022
2 Years ago
dahlias questions
Tue, Nov 17, 20, 00:00, 4 Years ago
Tue, Oct 27, 20, 00:00, 4 Years ago
Fri, Jul 17, 20, 00:00, 4 Years ago
Fri, Jan 17, 20, 00:00, 4 Years ago
Wed, Jun 5, 19, 00:00, 5 Years ago
;