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?
Related
I am new to XML. I have an XML document that I am inserting data manually. I wanted to know if it is possible to include an image in an XML file and not by using the file path. I have found something about encoding but I do not understand how this work and the option is not even available in the XML editor. After storing the images in the XML file, I will access it using javascript. Please provide further information on this matter.
An image is binary data, and the usual way to store binary data in an XML document is by encoding it in base64 (which turns it into ASCII characters). Libraries to convert from binary to base64, and back, are widely available, but the details depend very much on your programming environment. There are also online services where you can upload an image and get back its base64 representation: an example is here https://www.base64encode.net/base64-image-encoder
I'm creating image uploader for my website. I figured out how to upload image from computer and wrote the whole processing script; Now I need to add an option to upload an image from web. My script works fine after the image is converted into 64 bit format:
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAMCAgIC
Looks like it is impossible to do anything helpful with image before it is on my server, so I have this script which creates a temporary copy of the image on my host:
$content = file_get_contents("http://cs6045.vk.me/v6045344/43ce/D7BD4GsCmG4.jpg");
file_put_contents("image.png",$content);
So, what I need to do is to take a link "image.png" in JavaScript and transform it to 64 bit format to apply further actions in JavaScript. I can't find a solution anywhere, can someone help?
Please take a look at this thread, where a complete solution to convert an image to base64 is provided. This requires HTML5 tho, so your client needs a relatively up-to-date browser.
There seems tho to be some issues between the browsers, since they process image data differentely. If you want 100% the same Base64 encoding as your PHP-script, I suggest you simply make an AJAX-call to the script, which processes the image. Then it returns the Base64 string.
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 :-/
I am making a game using only HTML5 and Javascript. I want to take an MP3 file the user selects, and split into few second long chunks. Is it possible to do this in Javascript, and if so, how?
If you need a client side solution, but are not bound to Javascript, you may want to give Flash a try. There is many excellent solutions for editing in Flex/Actionscript. Here is one tutorial I came across after a quick google: http://scriptplayground.com/tutorials/as/Play-Sound-Samples-From-One-File-Using-ActionScript-3/
However, if you are dead set on using Javascript, try following these steps:
Check out this fiddle: http://jsfiddle.net/andrewodri/PKPD6/. It is using the HTML5 audio element to play a sound, but the interesting thing is that this data is encoded as a data URI. Whatever encoded data we throw at the source, it will be able to play.
Read up on the W3C File API specification, and especially the FileReader interface. The is support for this in Chrome and Firefox at least, although I am not too sure how comprehensive it is. You will notice that you are able to read the binary data into a data URI, which you can 1) manipulate as a string, and 2) send to the src attribute of the audio element.
This is going to be the hardest part... You can start by getting familiar with the structure of an MP3 file; ie. understanding how big the ID3 tag is and how to identify it, how big frames are and where you can chop them off, and how the file is closed. The will help you extract relevant information, but also figure out where you can start chopping. I put some references at the bottom. A lot of similar code has been created for this in Actionscript which may be a good reference.
If you have enough patience, you can do the following:
Retrieve the binary data of the uploaded file, and convert that into a data URI
Determine how big the ID3 tag is when encoded in base64 (base64 represents 6 bits with 1 character), and save that code to variable
Determine how big each audio frame is, and build an array of all the audio frames
Determine how the file is closed, and save that code into a variable
Stitch it all together however you like, with the ID3 at the front, your selected frames in the middle, and file closure code
Send it to the src attribute of the audio element
I would conclude by saying that it would be far, far easier to do this in Flash, or even to send it to the server as mentioned in other comments. But if you have the justification for doing it all in Javascript, this is definitely possible in most modern browsers.
Additional References:
http://www.html5rocks.com/en/tutorials/file/dndfiles/
http://www.mpgedit.org/mpgedit/mpeg_format/MP3Format.html
http://www.mpgedit.org/mpgedit/mpeg_format/mpeghdr.htm
http://www.aardwulf.com/tutor/base64/base64.pdf
http://en.wikibooks.org/wiki/Algorithm_Implementation/Miscellaneous/Base64
I heard a lot about Baase64 Encoding for Images in Webdesign.
And i saw a lot of developers they use it for thier headlines with: data:image/png;base64,iVBORw0...
Is there any automatism (with javascript) behind?
Or have they all converted & inserted ? (could not belive)
Example: http://obox-inkdrop.tumblr.com/ (- Headlines)
First of all, the encoding has to be done on the server-side, be it :
automated with a script, that reads the original image file, and returns the base64 encoded string to inject it into the HTML that's being generated
or by hand, and directly placed into the HTML.
The base64 encoding cannot be done on the client-side, as the goal is to avoid sending the image file from the server to the browser (to minimize the number of HTTP requests).
Depending of the language that's used on the server-side, you'll probably find some function to do base64 encoding.
In PHP, you might be interested by base64_encode()