data URI

A couple of years ago I was working on the data URL problem in Internet Explorer , I achieved certain results, but it was impossible to use what happened. The Data URL (sometimes called the “data: protocol”) is the ability to insert resources (graphics, CSS, JavaScript, and so on) into HTML code.


More information about the data URL can be found in the latest article on “Habré” “ Pictures in the body of the page using data: URL ”. I just wanted to supplement it with two comments: IE8b1 supports data URL no longer than 32 Kb , in modern versions of other browsers it was not possible to see restrictions, Safari / Opera / FF showed images about 700 Kb in size.


Now the ambula.
')

Yesterday night I had an idea how to try to correctly combine the data URL and the inclusion of images via the mhtml protocol. The fact that I did not succeed two years ago has turned out now.


The result is a ready PHP code of two functions. The first function (“bolk_data_uri_header”) must be called at the very beginning before outputting any of your code, the second (“bolk_data_uri”) itself to include the image in the code.


I hope with examples everything is clear:

 bolk_data_uri_header ();
 bolk_data_uri ('myjpeg.jpg');
 bolk_data_uri ('ourpng.png', 'border: 2px dotted red');

The library code itself:

 function bolk_data_uri_header () 
 { 
     echo "<! - \ n" 
         . "Content-Type: multipart / related; boundary = \" = _ NextPart_01C6A9B1.539AB070 \ "\ n \ n" 
         . "- = _ NextPart_01C6A9B1.539AB070 \ n" 
         . "Content-Transfer-Encoding: base64 \ n" 
         . "Content-Type: text / html \ n" 
         . "-> \ n \ n"; 

 } 

 function bolk_data_uri ($ file, $ style = '') 
 { 
     if (! (file_exists ($ file) && ($ data = @getimagesize ($ file)))) return false; 

     $ name = uniqid ('', true); 

     if ($ style <> '') $ style = 'style = "'. htmlspecialchars ($ style). '"'; 
     $ mime = strpos ($ _ SERVER ['HTTP_USER_AGENT'], 'Gecko')?  "type = '{$ data [' mime ']}":' ';

     echo "<! - \ n" 
         . "- = _ NextPart_01C6A9B1.539AB070 \ n" 
         . "Content-Location: {$ name} \ n" 
         . "Content-Transfer-Encoding: base64 \ n" 
         . "Content-Type: {$ data ['mime']}; -> \ n" 
         . "<object data = 'data: {$ data [' mime ']}; base64, \ n \ n"; 

     echo base64_encode (file_get_contents ($ file)); 

     echo "'{$ data [3]} {$ style} {$ mime}'> <img" 
         . "src = 'mhtml: http: // {$ _SERVER [' HTTP_HOST ']}"
         . "{$ _ SERVER ['REQUEST_URI']}! {$ Name} '{$ data [3]} {$ style} /> </ object> \ n \ n" 
         . "<! - \ n" 
         . "- = _ NextPart_01C6A9B1.539AB070 ->"; 

     return true; 
 }

The secret is in combining data, so that IE, by accessing the page using the mhtml protocol, finds the correct plot “hidden” inside the tag, and the rest of the browsers would see the image via the data URL.


The code was tested under Opera 9.50b, FF 2.0.0.13, Safari 3.1 and IE6. Suggestions and test results - please in the comments.


The original post is posted on my blog.