Skip to content

February 1, 2015

Converting HTML document with IMG src link to IMG embedded data in PHP

by Joe Kuan

In my previous blog, I need to convert a HTML document with IMG src link to IMG with embedded base64 image content. Here is a PHP script that scans the HTML document and replace the IMG tags with embedded content, i.e. changing from this

<img src='./4/data.png'/>

to that

<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhE....

Here is my prototype PHP code:

$srcfilepath = $argv[1];
$dstfilepath = $argv[2];

$srcDir = dirname($srcfilepath);
$srcName = basename($srcfilepath);

// Read the whole template file into memory
if (($template_content = file_get_contents($srcfilepath)) === false) {
   fprintf($stderr, "Unable to read html file: {$srcfilepath}\n");
   return false;

// Match the IMG tag one at a time
$offset = 0;
$done = 0;

while (preg_match("/<img src='\.\/([0-9]*\/data\.png)'\/>/", $template_content, $match, PREG_OFFSET_CAPTURE, $offset) >= 1) {

    $matchTag = $match[0][0];
    $matchOffset = $match[0][1];
    $subDirImgFile = $match[1][0];

    $chart_pngfile = "{$srcDir}/{$subDirImgFile}";

    if (!file_exists($chart_pngfile)) {
       echo "Unable to find png file {$chart_pngfile}\n";

    $img_tag = "<img src='data:image/png;base64," . base64_encode(file_get_contents($chart_pngfile)) . "'/>";

    // Replace the IMG src link tag with IMG embed content
    $template_content = substr_replace($template_content, $img_tag, $matchOffset, strlen($matchTag));

    // offset for next loop
   $offset = $matchOffset + strlen($img_tag);


file_put_contents($dstfilepath, $template_content);

This above script assumes the main HTML file is in the same relative path with the image files. So that the script is called with the whole file path of the HTML document($srcfilepath) and the destination output file path. For your own specific need, you probably need to modify above regular expression or change the IMG tag for different image formats. Enjoy

Read more from PHP, Programming, Web

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: