0

I have binary image data that php gets from the memcached, it sends it to javascript, Javascript then creates a new image and set the source to the data, the data is already in base64_encoding, as it comes from the users machine when they upload a image file to the site, I use javascript FIle_Reader to get the binary data, send it to php ,and store it in a File_Server and memcached for later use. However when retreiving the data and trying to use it to output a viewable image, I get error, I have scoured the web, but no one really has a solution for my specific problem.

function Create_Img_From_Binary($data){
    $Data=json_encode($data);
    echo "
    <script>
    function Create_Img_From_Binary(data){
      let img= document.createElement('img');
      img.src=$data;
      document.body.appendChild(img); 
        
    }
    Create_Img_From_Binary($Data);
    </script>
    ";
   
}
$fd= fopen("img.html",'r');
$data= fread($fd,filesize("img.html"));
Create_Img_From_Binary($data);




  The img.html file just contains the raw image data
TheVastNetwork
  • 15
  • 1
  • 4
  • Note , I realized that I'm using $data instead of javascirpt-data in the javascript function, but even if I make the switch, it result in a error – TheVastNetwork Mar 29 '21 at 20:48
  • 1
    Does this answer your question? [How to display Base64 images in HTML?](https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html) <- You need to base64 encode the binary data. – M. Eriksson Mar 29 '21 at 20:50
  • Yes, It explained how to accurately display Data Urls, but since I am still getting a error, I assume the Data itself is wrong and Im not sure where to start on fixing that. – TheVastNetwork Mar 29 '21 at 21:47
  • If I put the image data in localStorage, by using javascript function JSON.stringify then retrieve it using JSON.parse everything works, but why? and why doesn't it work if I have the same data in a javascript variable transmitted from php? – TheVastNetwork Mar 29 '21 at 22:30
  • Maybe for starters, stop using the same function and parameter names in PHP and JavaScript, because you appear to be confusing yourself with that already. What is the point of having a _JavaScript_ function `Create_Img_From_Binary` that gets passed a parameter when it gets called, when you then don’t do anything with that passed parameter value inside of it? Instead, you are setting the image source as `$data` there, which is your _PHP_ variable. – CBroe Mar 30 '21 at 07:07
  • yes, I became aware of that and changed it, and I realize there is no point in having a javascript function, a mistake which will not happen again – TheVastNetwork Mar 30 '21 at 14:09

1 Answers1

0

Use the tag this way:

<img src="data:image/gif;base64,xxxxxxxxxxxxx...">

where xxxx above is image base64 image code.

OR

<img src="data:image/jpeg;base64, <?=base64_encode($Data)?>">

here $data is your binary image

it just solution for your question. see if its work or not.

Vicky
  • 83
  • 11
  • This works , but my specific problem was a bit different, I couldn't use double quotes because the javascript was already wrapped in double quotes in the php echo function, and single quotes don't seem to be working – TheVastNetwork Mar 30 '21 at 15:40
  • This is good for anyone looking to see how to use data urls to set image sources in html, I realize that what I was doing just couldn't work so I changed my code a bit, thank you @Rich Php – TheVastNetwork Mar 30 '21 at 15:42
  • glad for you. it is my pleasure to help you. – Vicky Mar 31 '21 at 04:05