I am trying to grab a URL on a page via a Chrome Extension. I then need to read this file as binary data before posting it to an external API. I'm wondering how to accomplish this, and if it is even possible. The file type would be PDF, Word Doc or text file typically. We are working with Resumes'.
I have starting reading about File objects and the FileReader, but my initial tests have returned no luck. Anyone have any examples that I could use as a starting off point?
If you could point me in the right direction I would appreciate it.
You definitely can do this. A FileReader should have the method readAsArrayBuffer, which will give you an ArrayBuffer, which you can then inspect by creating a Uint8Array or a DataView on which you can call methods like getUint32, etc.
you might want to take a look at jBinary
Related
I am working on a web-based project that is fully in Javascript. In it, I want users to be able to format their text exactly as they want. Naturally, I would like them to have the ability to upload their own fonts. However I'm not sure how to read the file they upload. I can take in the file, but I can't utilize their .ttf/.woff/woff2 etc. as an actual font file. I've used the FileReader API and have read in a ttf as a DataUrl, which puts it into base64. However I'm not sure how to turn it back into a file.
I've found this code from another post made on here, but it doesn't exactly do what I need it to do:
//read the file
const reader = new FileReader();
reader.addEventListener('load', (event) => {
<usersSelectedFile>.src = event.target.result;
});
var fontFile = reader.readAsDataURL(file);
With this, I get the file in base64. I know how to use font-face, but I've tried passing this fontFile in a font face style sheet but I got nothing from it.
My ultimate question is: How can I read a file in base64 as if it were a normal file? How should I reference it in font-face?
ALSO: I want to mention that I am trying to have this be stored in localStorage, as I wouldn't want any user-made changes to be global.
This is an interesting problem that I would like to know the definitive solution to. The best I could find by searching around was this solution, that utilizes and API for this specific problem. I have not tested it as of this moment, but it seems reliable.
As for the localStorage issue, have you tried converting the file to a JSON string using JSON.stringify(), and then using localStorage.setItem('name',DATAHERE)? I am not sure if this works with files, but this is what I use for arrays and non-string information when saving to localStorage.
Sorry for not having anything concrete for you. I'm looking forward to working this out further if none of my recommendations helped you.
I have already a working audio-tag with a src in form of a link.
Now, for analyzing the music and visualize this, i need a File-object.
File-objects are basicly from the users disk, there's a possibility to load a blob via ajax/xhr.
The solution with a blob would mean, i download every track 2x from the server, what's nonsense. So i thinked, it's maybe possible to extract the file-object from the audio-tag that is downloading anyway.
I've searched in api's and via google, but found only the opposite (load files to a audio-tag), but that's done already..
edit: found the buffered-value here, but how to convert this to a file-object?
no clue..https://www.w3schools.com/tags/av_prop_buffered.asp :editEnd
Would be genious if there's a solution. Thanks in advance!
edit2: found a solution that works for me here: https://www.cssscript.com/audio-visualizer-with-html5-audio-element/
found a solution that works for me here: https://www.cssscript.com/audio-visualizer-with-html5-audio-element/
here it converts the audio-src not to a file, but to the same object i need for audio-analysing.
I am a newbie using webgl implementation as a dependent module for my project. I am trying to use .toDataURL() function using node-webgl wrapper at server side. But I get an error station .toDataURL() is undefined. For more detail, please have a look at this link: canvas.toDataURL() is not a function - error node-webGL wrapper
Well the current post is definitely not a duplicate. In the post(earlier link shared) I am trying to find an alternative way to access the data of canvas. The goal of this current post is to implement the .toDataURL() function. I am novice in these webgl. Could you please share some links or procedure on how to implement this small function. or Could I access the same function of browser implementation(copy it here), where can I get that?
Any suggestions will definitely be helpful.
Thank You.
A data URI consists of:
data:[<media type>][;base64],<data>
All you need to do is concatenate:
a string "data:"
a media type - e.g. "image/jpeg"
a string ";base64,"
Base64 representation of your data
For more info see:
https://en.wikipedia.org/wiki/Data_URI_scheme
https://en.wikipedia.org/wiki/Base64
There are several modules on npm that can help you generate Base64:
https://www.npmjs.com/search?q=base64
This is basically everything that you need to know to implement toDataURL() function.
I have a REST service that returns a base64 representation of a file, could be any variety (assuming for now its application/pdf), and am wondering if there's a simple way to trigger the browser to save that base64 string into a file download that can be processed within JavaScript. I've looked at download.js but it doesn't seem to do what I intend it to do, unless its tied to a click event (something I really can't do here). Are there any other suggestions to implement this?
I'm work on a project recently, which need to pass a binary-stream from npapi plugin to javascript, I've tried following ways:
use NPN_InvokeDefault, i created a string variant which store the binary-stream, and invoke it to javascript, it failed. (i've tried to pass binary-stream read from XXX.txt file, it works!)
i tried to use NPN_NewStream, the example listed in http://www.terraluna.org/dgp/cvsweb/PluginSDK/Documentation/pi3.htm#npnnewstream workes, but the pic is loaded in a new browser tab, i don't know how to recieve it in javascript.
Is there any one have ever met similar problem before? or maybe npapi can't support such kind of data transfering?
looking forward to your suggestiongs, thanks a lot.
Unfortunately, NPAPI was never designed with this purpose in mind. There are a couple of ways you can do it, and none of them are really ideal:
You can create a javascript array and pass the data in small 1-4 byte chunks (this is really very inefficient)
You could create a webserver embedded in the plugin and request the data from there (I have done this and it can work quite well, but keep in mind that if you use this from an SSL website you'll get security warnings when the embedded webserver isn't SSL)
You can base64 encode the binary data and send it as a string.
Those are the ways I have seen it done. The reason you can't send the actual binary data directly as a string is that NPAPI requires string data to be UTF8, but if you base64 encode it then it works fine.
Sorry I can't give you a "happier" solution :-/