Question

I must save html source code in a sql database (for an android app). The content must stored local. So images must also saved. I think it would be appropriate to proceed following:

• on the server (php): replace all img src with img src=”data:image…” strings (regex and load image?)
• then I could store the html code local in my appliction

But how could I realize this? Or should I save the images with html5? I hope you could help me!

UPDATE:

$search = '(<img.*?src=")([^"]*?(\/[^/]*\.[^"]+))';
$replace = "<img src=\"".data_uri('$2')."\">";
$content = preg_replace($search, $replace, $content);

Could someone correct this code? Thanks!

2nd UPDATE:

Examples:

<img class="alignnone" src="https://lh4.googleuserco (...)
<img src="https://lh4.googleuserco (...)
<img width="400" height="100" src='...' (...)

Answer 1

Replace your <img src="image.png" alt="An image"> with <img src="<?php echo data_uri('image.png'); ?>" alt="An image"> and define the following function where appropriate:

function data_uri($filename) {
    $mime = mime_content_type($filename);
    $data = base64_encode(file_get_contents($filename));

    return "data:$mime;base64,$data";
}

You’ll probably end up with huge html files, so perhaps storing the files outside of the database is better? I’m not familiar with Android, but on iOS you can set the base path of the webview displaying your html files, something like this.

UPDATE:

I created a (content.php) containing a couple of img elements an then ran the following on it:

$content = file_get_contents('content.php');
$search = '/(<img\s+src=["\'])([^"\']+)(["\']\s+[^>]+>)/';
$content = preg_replace_callback($search, create_function(
        '$matches',
        'return $matches[1] . data_uri($matches[2]) . $matches[3];'
    ), $content);

In the code you posted in your question your pattern was missing slashes, and you also would have ended up just literally running data_uri('$2') (that is, $2 being the actual string used as parameter). preg_replace_callback allows you to access the actual value found by preg_replace.

Anyway, the code above will replace all images with the value returned by data_uri, and thus build up img elements with data URI’s. You might want to improve the pattern a bit, as it currently assumes attributes are enclosed by double-quotes and nothing else, and also that the src attribute is the first attribute of the element, which is why XML parsing is generally advised I think. The severity of this depends on you input data off course.

UPDATE 2:

A more generic solution would be to split it into two regexes as per my latest comment. That is first modify your search pattern into $search = ‘(]+>)’; and then do preg_replace_callback($search, 'img_handler', $content); having defined your img_handler function as something like this:

function img_handler($matches) { 
    $image_element = $matches[1]; 

    $pattern = '/(src=["\'])([^"\']+)(["\'])/'; 
    $image_element; = preg_replace_callback($pattern, create_function( 
            $matches, 
            $matches[1] . data_uri($matches[2]) . $matches[3]), 
        $image_element); 

    return $image_element; 
}

The way this works is that the first regex identifies all ing elements () and sends them to the callback function img_handler, which in turn replaces only the src attribute.
XML is a bit more complex (but way more generic). I don’t have time to put together an example, but it’s quite well documented. Check out DOMDocument or SimpleXML which basically does the same thing.

IN CLOSING:

You have now modified your question twice, and will this is surely needed for clarification at times, I feel that we are drifting further and further away from the initial question. I would suggest keeping your questions concise and focused on a single subject. If the answers or comments raises further questions that aren’t answered in themselves it is probably better to start a new thread on that matter (e.g. replacing the src attribute of an img element) or look for any similar already asked questions.