Embedding Images in HTML

Orig: 28 Jun 2008, last update Σάββατο, 28/06/2008

1. Introduction
2. Table-based multi-block embedding
3. PHP code

1. Introduction

It has already been shown elsewhere, for example here, here and here among other places, that according to RFC2557 a data URL: scheme can be used to embed any MIME data inside a HTML page.

The links above show a technique to use this scheme to embed images inside an HTML document. The method proposed is suitable for small images, but leads to erratic behaviour when larger images are used.

Here another technique is presented that allows for embedding of images of arbitrary size into an HTML.

2. Table-based multi-block embedding

When using the data URL scheme specified in the RFC2557 it seems that browsers impose an arbitrary limit on the size of the base64 data that can be contained in the URL resulting in erratic behaviour (non-display, crashes, incosistencies, etc).

To overcome this limitation, the following technique is used:

Decide on an arbitrary size for the URL that does not cause adverse effects. Here the chosen size corresponds to a 100x100 pixels image
Read the image
Break the image into blocks of 100x100 size
Process the blocks independetly
Assemple the blocks into the original image using a <TABLE> for displaying the original image to the browser

Various examples of images displayed using the above technique, are presented here

3. PHP code

The following PHP code was used for constructing the example page

<?php
 
function base64image($file,$type) {
  if($fp = fopen($file,"rb", 0)) {
    $picture = fread($fp,filesize($file));
    fclose($fp);
    $base64 = base64_encode($picture);
    $tag = '<img src="data:'.$type.';base64,' . $base64 .'"/>';
    return $tag;
  }
}
 
$file = 'path-to-file';
 
   $limit = 100;
 
   echo "\n\n\n\n"; var_dump(gd_info());
   echo "\n\n\n\n"; var_dump(getimagesize($file));
   $tmpar = getimagesize($file);
   //
   // TYPE VALUES:
   //   1 = GIF
   //   2 = JPG
   //   3 = PNG
   //
   list($width, $height, $type, $attr) = $tmpar;
   $readImage = array();
   $writeImage = array();
   $readImage[1] = 'imagecreatefromgif';  $writeImage[1] = 'imagegif';
   $readImage[2] = 'imagecreatefromjpeg'; $writeImage[2] = 'imagejpeg';
   $readImage[3] = 'imagecreatefrompng';  $writeImage[3] = 'imagepng'; 
   $mime = $tmpar['mime'];
   $width_parts  = 0;
   $height_parts = 0;
   if ($width > $limit)  $width_parts  = floor($width / $limit);
   if ($height > $limit) $height_parts = floor($height / $limit);
   if ($width > $limit)  $width_parts  = $width / $limit;
   if ($height > $limit) $height_parts = $height / $limit;
   echo "\n";
   echo "We will need width $width_parts and height $height_parts parts";
 
   $table = '<table cellspacing=0 cellpadding=0>';
   $srcImage = $readImage[$type]($file);
   $limitx = $limit;
   $limity = $limit;
   for ($y=0; $y<$height_parts; $y++) {
     $srcy = $y * $limit;
     $limitx = $limit;
     if (($srcy+$limit)>$height) $limity = $height - $srcy;
     $table .= '<tr>';
     for ($x=0; $x<$width_parts; $x++) {
       $srcx = $x * $limit;
       if (($srcx+$limit)>$width) $limitx = $width - $srcx;
       echo "\n";
       echo "Starting at $srcx x $srcy for (${limit}x${limit}) rect";
       $partImage = imagecreatetruecolor($limitx,$limity);
       imagecopy($partImage,$srcImage,0,0,$srcx,$srcy,$limitx,$limity);
       $outfile = 'f-'.$srcx.'x'.$srcy.'.img';
       $writeImage[$type]($partImage,$outfile);
       $table .= '<td>'.base64image($outfile,$mime).'</td>';
       unlink($outfile);
     }
     $table .= '</tr>';
   }
   $table .= '</table>';
   echo "\n";
   echo $table;
?>

This document was generated using AFT v5.095