<html><head><title>Base64 img convert</title></head><body> <form action="./index.php" method="post" enctype="multipart/form-data"> <input type="file" name="f"> <input type="submit"> </form> The CSS code: <textarea style="width:800px;height:100px;font-size:10px;"><?php echo $css; ?></textarea> The HTML code: <textarea style="width:800px;height:100px;font-size:10px;"><?php echo $tag; ?></textarea> <?php echo $tag; ?></body></html>Just browse your image and click "Submit Query".P.S.base64 doesn't work in IE " /> <html><head><title>Base64 img convert</title></head><body> <form action="./index.php" method="post" enctype="multipart/form-data"> <input type="file" name="f"> <input type="submit"> </form> The CSS code: <textarea style="width:800px;height:100px;font-size:10px;"><?php echo $css; ?></textarea> The HTML code: <textarea style="width:800px;height:100px;font-size:10px;"><?php echo $tag; ?></textarea> <?php echo $tag; ?></body></html>Just browse your image and click "Submit Query".P.S.base64 doesn't work in IE "> <html><head><title>Base64 img convert</title></head><body> <form action="./index.php" method="post" enctype="multipart/form-data"> <input type="file" name="f"> <input type="submit"> </form> The CSS code: <textarea style="width:800px;height:100px;font-size:10px;"><?php echo $css; ?></textarea> The HTML code: <textarea style="width:800px;height:100px;font-size:10px;"><?php echo $tag; ?></textarea> <?php echo $tag; ?></body></html>Just browse your image and click "Submit Query".P.S.base64 doesn't work in IE "> <html><head><title>Base64 img convert</title></head><body> <form action="./index.php" method="post" enctype="multipart/form-data"> <input type="file" name="f"> <input type="submit"> </form> The CSS code: <textarea style="width:800px;height:100px;font-size:10px;"><?php echo $css; ?></textarea> The HTML code: <textarea style="width:800px;height:100px;font-size:10px;"><?php echo $tag; ?></textarea> <?php echo $tag; ?></body></html>Just browse your image and click "Submit Query".P.S.base64 doesn't work in IE "> <html><head><title>Base64 img convert</title></head><body> <form action="./index.php" method="post" enctype="multipart/form-data"> <input type="file" name="f"> <input type="submit"> </form> The CSS code: <textarea style="width:800px;height:100px;font-size:10px;"><?php echo $css; ?></textarea> The HTML code: <textarea style="width:800px;height:100px;font-size:10px;"><?php echo $tag; ?></textarea> <?php echo $tag; ?></body></html>Just browse your image and click "Submit Query".P.S.base64 doesn't work in IE "/> How to import images directly into the html code (base64)
author: Krasimir Tsonev

Krasimir is a blogger, who writes and speaks.
He loves open source and codes awesome stuff.

How to import images directly into the html code (base64)

A couple of months ago I received an interesting task - to create a small html application for iPhone. To be honest, for me that meant creating a small site with a specific size. Of course I was wrong. Together with couple of small bugs I had to deal with one other requirement - everything had to be in one html file. It was clear how to add the javascript and the css, but what about the images.The solution was to use base64 encoding. I wrote a small php script that accepts an image and shows me the equivalent in base64 string.

<?php      $base64 = "";    $css = "";    $tag = "";      if(isset($_FILES['f']['name'])){        $file = rand(0, 10000000).$_FILES['f']['name'];        if (move_uploaded_file($_FILES['f']['tmp_name'], $file)) {            if($fp = fopen($file,"rb", 0))            {               $picture = fread($fp,filesize($file));               fclose($fp);               // base64 encode the binary data, then break it               // into chunks according to RFC 2045 semantics               $base64 = base64_encode($picture);               $tag = '';               $css = 'url(data:image/jpg;base64,'.str_replace("\\n", "", $base64).'); ';            }        }    }      ?><html><head><title>Base64 img convert</title></head><body>    <form action="./index.php" method="post" enctype="multipart/form-data">        <input type="file" name="f">        <input type="submit">    </form>      The CSS code:      <textarea style="width:800px;height:100px;font-size:10px;"><?php echo $css; ?></textarea>        The HTML code:      <textarea style="width:800px;height:100px;font-size:10px;"><?php echo $tag; ?></textarea>        <?php echo $tag; ?></body></html>
Just browse your image and click "Submit Query".P.S.base64 doesn't work in IE

A couple of months ago I received an interesting task - to create a small html application for iPhone. To be honest, for me that meant creating a small site with a specific size. Of course I was wrong. Together with couple of small bugs I had to deal with one other requirement - everything had to be in one html file. It was clear how to add the javascript and the css, but what about the images.The solution was to use base64 encoding. I wrote a small php script that accepts an image and shows me the equivalent in base64 string.
<?php      $base64 = "";    $css = "";    $tag = "";      if(isset($_FILES['f']['name'])){        $file = rand(0, 10000000).$_FILES['f']['name'];        if (move_uploaded_file($_FILES['f']['tmp_name'], $file)) {            if($fp = fopen($file,"rb", 0))            {               $picture = fread($fp,filesize($file));               fclose($fp);               // base64 encode the binary data, then break it               // into chunks according to RFC 2045 semantics               $base64 = base64_encode($picture);               $tag = '';               $css = 'url(data:image/jpg;base64,'.str_replace("\\n", "", $base64).'); ';            }        }    }      ?><html><head><title>Base64 img convert</title></head><body>    <form action="./index.php" method="post" enctype="multipart/form-data">        <input type="file" name="f">        <input type="submit">    </form>      The CSS code:      <textarea style="width:800px;height:100px;font-size:10px;"><?php echo $css; ?></textarea>        The HTML code:      <textarea style="width:800px;height:100px;font-size:10px;"><?php echo $tag; ?></textarea>        <?php echo $tag; ?></body></html>
Just browse your image and click "Submit Query".P.S.base64 doesn't work in IE

blog comments powered by Disqus