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.
Related
I want to get the screenshots from PageSpeed Insights. Using the API, I used a code that i founded here : https://embed.plnkr.co/plunk/c7fAFx, but doesn't work.
please help me! I am learning to code.
Why doesn't the linked code work?
Well because it is ancient and attempting to use the version 1 Page Speed Insights API.
It is currently on version 5 so that is why it does not work, v1 no longer exists as a public API.
How to recreate the functionality of this App?
As you are learning to code I will lay out the steps for you and then you can research how to do each step and use that to learn.
I will warn you as a beginner there is a lot to learn here. However on the flip side if you manage to work out how to do the below you will have a good first project that has covered multiple areas of JS development.
As you have marked this "JavaScript" I have assumed you want to do this in the browser.
This is fine up until the point where you want to save the images as you will have to work out how to ZIP them which is probably the most difficult part.
I have highlighted the steps you need to learn / implement in bold
1. First call the API:
The current URL for Page Speed Insights API is:
https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://yoursite.com
Just change url=https://yoursite.com to any site you want to gather the images from.
For a small amount of requests a day you do not need to worry about an API key.
However if you do already have an API key just add &key=yourAPIKey to the end of the URL (replacing the yourAPIKey part obviously :-P).
You want to make an AJAX call to the API URL first.
2. Parse the response
Then when you get a response you are going to get a large JSON response.
You need to parse the JSON response and turn it into a JavaScript Object or Array you can work with.
3. Find the relevant parts
So once you have a JavaScript Object you can work with you are looking for "final-screenshot" and "screenshot-thumbnails".
These are located under "audits".
So for example if you parsed to an array called lighthouseResults you would be looking for lighthouseResults['audits']['final-screenshot'] or lighthouseResults['audits']['screenshot-thumbnails']
"final-screenshot" contains how the site looked after it was loaded, so if you just want that you want this element.
This contains an image that is base64 encoded (lighthouseResults['audits']['final-screenshot']['details']['data']).
"screenshot-thumbnails" is the part you want if you want the "filmstrip" of how the site loads over time. This contains a list of the thumbnails base64 encoded.
To access each of these you need to loop over each of the items located at lighthouseResults['audits']['screenshot-thumbnails']['details']['items'] and return the ['data'] part for each ['item']
Find the parts that you want and store them to a variable
4a. Decode the image(s)
Once you have the image(s) in a variable, you will have them as a base64 encoded string at the moment. You need to convert these into usable jpg images.
To do this you need to base64 decode each image.
For now I would just display them in the browser once they are decoded.
learn how to decode a base64 encoded image
4b. Alternative to decoding the image
As the images are base64 encoded they can be displayed directly in a browser without decoding first.
You can just add an image where the src your base64 image string you gathered in step 3.
If you just want to display the images this is much easier.
Add images to the screen and set the src to the base64 image string you have from step 3
Saving the images
Now you said in a comment you want to save the images. Although this can be done via JavaScript it is probably a little advanced for starting out.
If you want to save the images you really want to be doing that server side.
However if you do want to download the images (filmstrip) in the browser then you want to look into a zip utility such as jszip.js.
The beauty of this is they normally want you to convert the images to base64 first before zipping them, so it may not actually be that difficult!
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 working on a solution that allows to paste screenshots directly into a textarea in Rails, which will be parsed as Markdown lateron.
I found the neat Paste.js library which captures the clipboard, detects whether a string or an image is pasted, and then reacts upon images by converting them into a Base64 string which then can be used as an image.
Being as it is, Paste.js offers everything needed to simply paste a simple image tag into the textarea like this:
But this will clutter up the whole textarea, Base64 strings can become very, very long. So I'd like only to be inserted a placeholder like so:
And then, in a hidden input field, I'd like to send the Base64 data:
<input type="hidden" name="post[content][screenshots][3857c1cf-1a68-4549-bc0d-aa18af25bb82]" value="data:image/png;base64,iVBORw0KGgoAA...SUVORK5CYII=" />
My question is now: how would you implement this on the server side in Rails? I simply want to save them as regular files under uploads, where I also store uploads from Carrierwave.
I don't want them to be uploaded automatically when pasted, as users can cancel when creating or editing a post, and I don't want the upload space to be cluttered up with images that are not in use.
Also, I don't want the images (once saved) to be removed from the server again, e.g. when removing the reference from the blog post, as the blog posts are versioned (using PaperTrail) and references will always exist in the old versions, so I think it's sensible to also keep the old images.
Do you think this makes sense? Or do I miss something? Are there limitations I don't see (e.g. upload limit of long Base64 strings)?
Maybe are there other libraries doing the same? I know GitHub Issues support this feature, but I couldn't find out how they did it, and they don't allow pasting screenshots in Firefox, either (which is supported by Paste.js).
I had this exact requirement for my blog. Thank for the tip for paste.js; I implemented it and wrote a write up.
I used the following approach to implement it.
User pastes an image into the textarea
Paste.js captures the base64/png data
Ajax this payload to the server
Server convert to jpeg
Save it on the server
Return a markdown link to the front end
Append the markdown link to the textarea's content
I want to change that last point so it can remember the location of the user's cursor and insert it there, as opposed to appending it to the end.
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
Can I load something using AS3/SWF and then create a DOM element using javascript to display the loaded data, without having the browser to load the same data twice?
Yes, but it's not easy. You would have to convert the image to (for example a base64) string using a custom function looping through all the pixels of the bitmapdata, then send it to the webpage using an external interface, and then convert it back, either using the base64 to set the image url, or using Canvas to build the image manually from the pixels.
Perhaps I've missed something in what you've said but wouldn't it be quite easy to use the FileReference upload() method to send the file to a php script which then moves the file to the desired location on the server. If you wanted to have the image display in html without a new page load you could (I'm not too familiar with JS but I assume this is possible -> ) periodically check to see if your desired file is in the desired location. You could call a js function through ExternalInterface to tell the html page to expect this file and to check for it.
I've not tested this method so I can guarantee there are no flaws in it but it's the way I would attempt first. I'm assuming you're sending an image but it would work fine for any other file.