Jump to content
Larry Ullman's Book Forums
Sign in to follow this  

Filereader Api'S Readasdataurl Method For External Urls

Recommended Posts

I've been playing with the FileReader API recently, and the most interesting method to me is the readAsDataURL method, which allows you to turn a File object into a Base64 string for directly placing image data, etc. into your HTML.


This is all well and good for files that I have saved locally, but I'm wondering if there's any way to use this method on external URLs. For example, if I know the URL of an image on the Internet, I'd like to somehow feed that URL to the readAsDataURL method and get back a Base64 string. Is there any way to do this that you all know of?


Related to the above, I'm thinking that maybe there's a way to do something similar using PHP, but I don't know off the top of my head. The main thing is that I want to be able to turn images with external URLs into Base64 strings.


Thank you.

Share this post

Link to post
Share on other sites

Well, after a little more research, I was able to answer my own question.

As it turns out, PHP has all the tools you need to Base64-encode an external image that you have the URL for, and then directly embed that image data into your HTML.

In the event that you want to Base64-encode a local image on your computer though, you're better off using the new HTML5 File and FileReader APIs.


Anyway, the following is a sample script I wrote for Base64-encoding any image available via an external URL, and then directly placing that image data in an HTML page:


<!DOCTYPE html>

<html lang="en">


   <meta charset="UTF-8">

   <title>Directly embedding Base64 images</title>




     $url = 'http://upload.wikimedia.org/wikipedia/en/thumb/8/83/Dark_knight_rises_poster.jpg/220px-Dark_knight_rises_poster.jpg'; // URL to some random Dark Knight Rises movie poster

     $ch = curl_init($url); // I used cURL to get the binary image data. You can also use fopen/fread or file_get_contents, but some sites may block such requests. cURL is better at getting around all this.

     curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

     $img_data = curl_exec($ch); // The binary image data is now in the $img_data variable.


     $size = getimagesize($url); // In order to display an image using Base64 encoding, you also need the MIME type of the image, which you can get from the getimagesize function.

     echo '<img src="data:' . $size['mime'] . ';base64,' . base64_encode($img_data) . '">'; // This actually displays the image. The 'mime' index contains the MIME type needed. The base64_encode function must be run on the binary image data to make the long Base64 string required to directly embed an image. There is a set format you must use for displaying an image using Base64 encoding. You can get the details on the following page: http://en.wikipedia.org/wiki/Data_URI_scheme





I hope that helps in the event that anyone else is interested.


  • Upvote 1

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Create New...