您如何将图像标签的源设置为二进制图像数据，我所看到的没有啥对我有用[重复]

Posted 2023-03-05

【中文标题】您如何将图像标签的源设置为二进制图像数据，我所看到的没有啥对我有用[重复]

【英文标题】：How can you set the source of a image tag to binary image data, Nothing I've seen is working for me [duplicate]您如何将图像标签的源设置为二进制图像数据，我所看到的没有什么对我有用[重复]

【发布时间】：2021-06-25 21:46:18

【问题描述】：

我有 php 从 memcached 获取的二进制图像数据，它将其发送到 javascript，然后 Javascript 创建一个新图像并将源设置为数据，数据已经在 base64_encoding 中， 由于它来自用户将图像文件上传到站点时的计算机，因此我使用 javascript FIle_Reader 获取二进制数据，将其发送到 php，并将其存储在 File_Server 和 memcached 中以供以后使用。 但是，当检索数据并尝试使用它来输出可视图像时，我得到了错误，我已经搜索了网络，但没有人真正为我的具体问题提供解决方案。

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

【问题讨论】：

注意，我意识到我在javascript函数中使用的是$data而不是javascirpt-data，但是即使我进行了切换，它也会导致错误

这能回答你的问题吗？ How to display Base64 images in HTML?

是的，它解释了如何准确显示数据 URL，但由于我仍然遇到错误，我认为数据本身是错误的，我不知道从哪里开始修复它。

如果我将图像数据放在 localStorage 中，通过使用 javascript 函数 JSON.stringify 然后使用 JSON.parse 检索它，一切正常，但为什么呢？如果我在从 php 传输的 javascript 变量中有相同的数据，为什么它不起作用？

也许对于初学者来说，停止在 PHP 和 JavaScript 中使用相同的函数和参数名称，因为您似乎已经对此感到困惑。有一个 JavaScript 函数 Create_Img_From_Binary 在被调用时传递一个参数，而当你对其中传递的参数值不做任何事情时，有什么意义呢？相反，您将图像源设置为 $data 那里，这是您的 PHP 变量。

【参考方案1】：

这样使用标签：

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

上面的 xxxx 是图像 base64 图像代码。

或

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

这里的 $data 是你的二进制图像

它只是解决您的问题。看看它是否有效。

【讨论】：

这行得通，但我的具体问题有点不同，我不能使用双引号，因为 javascript 已经在 php echo 函数中用双引号括起来，而单引号似乎没有工作中

这对于希望了解如何使用数据 url 在 html 中设置图像源的任何人都有好处，我意识到我所做的只是行不通，所以我稍微更改了我的代码，谢谢@Rich Php

为你高兴。很高兴为您提供帮助。