PHP: Recreate and Display an Image from Binary Data

php: recreate and display an image from binary data

You can do this using a data URI in the image src attribute.

The format is: data:[<MIME-type>][;charset="<encoding>"][;base64],<data>

This example is straight from the Wikipedia page on data URIs:

<?php
function data_uri($file, $mime) 
{  
  $contents = file_get_contents($file);
  $base64   = base64_encode($contents); 
  return ('data:' . $mime . ';base64,' . $base64);
}
?>

<img src="<?php echo data_uri('elephant.png','image/png'); ?>" alt="An elephant" />

PHP Image from URL

If you simply want to view an image from a URL, just put that url in the src attribute of an img element like this :

echo '<img src="' . $url . '"/>';

otherwise, if you have to view it from the fetched data of that url, then your question have been answered here:

php: recreate and display an image from binary data (specifically @Krab's answer)

PHP display png image from binary file

Your PNG image is corrupt, it has a \n character instead of \r\n, (byte position 5) typically a problem arising from FTP transfering a binary image in text mode from Windows to Unix.

Before messing with PHP, you should check simply that the image is OK, eg adding the .png extension, placing it in a visible folder (in the web server) and browsing it.

How to display binary data as image - extjs 4

Need to convert it in base64.

JS have btoa() function for it.

For example:

var img = document.createElement('img');
img.src = 'data:image/jpeg;base64,' + btoa('your-binary-data');
document.body.appendChild(img);

But i think what your binary data in pastebin is invalid - the jpeg data must be ended on 'ffd9'.

Update:

Need to write simple hex to base64 converter:

function hexToBase64(str) {
    return btoa(String.fromCharCode.apply(null, str.replace(/\r|\n/g, "").replace(/([\da-fA-F]{2}) ?/g, "0x$1 ").replace(/ +$/, "").split(" ")));
}

And use it:

img.src = 'data:image/jpeg;base64,' + hexToBase64('your-binary-data');

See working example with your hex data on jsfiddle

mysql blob image displaying with php/html

Ok i found out the solution, using data URI. If you are in trouble, go here for more info: php: recreate and display an image from binary data.

How can I display binary image data as an Image in PHRETS

According to the PHRETS documentation for GetObject, the last argument in GetObject, $location, can either be a "0" or "1". "1" returns the image's URL string and "0" returns the binary image data.

#1 Encoding the image data and outputting to browser without saving to a file. From this SO question

$photos = $rets->GetObject("Property", "Photo", $sysid, "*", 0);
foreach ($photos as $photo) 
{

    if ($photo['Success'] == true) 
    {
        $contentType = $photo['Content-Type'];
        $base64 = base64_encode($photo['Data']); 
        echo "<img src='data:{$contentType};base64," . $base64 . "' />";
    }
    else 
    {
        echo "({$photo['Content-ID']}-{$photo['Object-ID']}): {$photo['ReplyCode']} = {$photo['ReplyText']}<br />";
    }

}

#2 Saving the image to a file and then displaying it. From PHRETS

$photos = $rets->GetObject("Property", "Photo", $sysid, "*", 0);
foreach ($photos as $photo) 
{

    if ($photo['Success'] == true) 
    {
        file_put_contents("image-{$listing}-{$number}.jpg", $photo['Data']);
        echo "<img src='image-{$listing}-{$number}.jpg' />";
    }
    else 
    {
        echo "({$photo['Content-ID']}-{$photo['Object-ID']}): {$photo['ReplyCode']} = {$photo['ReplyText']}<br />";
    }

}

How to display binary images from Database to edit form using MVC 4

To display image in your view

View

<form  method="post" enctype="multipart/form-data">
@{
    if (Model.Picture1 != null)
      {
         string imageBase64 = Convert.ToBase64String(Model.Picture1);
         string imageSrc = string.Format("data:image/gif;base64,{0}", imageBase64);
         <img src="@imageSrc" width="100" height="100" />
      }
  }
    <input type="file" name="photo" id="files" accept="image/*;capture=camera">
    <button type="button">Submit</button>
  </form>

Controller

[HttpPost]
public ActionResult Edit(Accommodation accommodation)
{

  if (Request.Files["files"] != null)
    {
            byte[] Image;
            using (var binaryReader = new BinaryReader(Request.Files["files"].InputStream))
            {
                Image = binaryReader.ReadBytes(Request.Files["files"].ContentLength);
            }
    }
    accommodation.Picture1=Image;
  //your code to save data
}

---

Related Topics