将 Base64/BLOB 图像数据从 PHP 发送到 Javascript答案

【问题标题】：Send a Base64/BLOB image data from PHP to Javascript将 Base64/BLOB 图像数据从 PHP 发送到 Javascript
【发布时间】：2020-07-20 11:25:33
【问题描述】：

TL;DR

有没有办法将直接可用的 base64/BLOB 图像数据发送到 javascript？

我正在尝试从 Laravel 的控制器返回的 page.blade.php 向我的 Vue 组件发送一个数组（包含字符串和 img）。

更多详情

我知道数据编码是我的问题，json_encode($my_string_data) 仅适用于 UTF-8，但不适用于 IMG 数据。 json_encode($my_image_data) 会抛出错误malformed utf-8 characters possibly incorrectly encoded image。

我在控制器中发出 1 个请求，然后发出 2 个 DB 查询，并结合两个响应（字符串和 MEDIUMBLOB/img 数据），然后将其作为数组返回到我的刀片文件中的 blade.php是将 img 数据作为 props 的 vue 组件。

我想知道的可能解决方案：

如何让这个 img 数据直接被 javascript 使用？
如果 #1 不可行，我该如何转换这个 javascript 可直接读取的 img 数据？
如果 #2 不可能，我如何将此 img 数据转换为 JSON-able json_encode($my_image_data) ?

我只是假设数据库从 BLOB 列返回的 IMG 数据是 Base64，mb_detect_encoding()-ing 包含 IMG 数据的变量总是返回 false，所以我一开始不知道它是什么。我所知道的是必须将此数据转换为 UTF-8 或任何 JSON 格式供 JS 使用。

ATM，我仍在尝试解决 #3。

【问题讨论】：

几天前我遇到了同样的问题。我使用了base64encode和decode。
所以你在输出时解码了 IMG DATA 以显示对吗？
按照你的方式。使用 PHP，您可以对 blob 文本进行 base64encode。然后使用 json_encode 就可以了。然后使用javascript，您可以使用atob 解码base64encoded 字符串并再次获取博客文本。 scotch.io/tutorials/…

标签： javascript php laravel vue.js

【解决方案1】：

 $image = 'yourimage'; 

// Read image path, convert to base64 encoding  
$imageData=base64_encode(file_get_contents($image)); 

// Format the image SRC: data:{mime};base64,{data}; 
$src = 'data: '.mime_content_type($image).';base64,'.$imageData;

现在src是urldata，可以转换成js了。

【讨论】：

我能够将 'data:image/png;base64,'.$base64_img_data 作为道具和字符串传递给在一个 Vue 模板中。当我尝试使用 console.log 读取道具时，它是 undefined 但我可以在 Chrome Vue 扩展调试器中看到该字符串。我实际上可以看到 "data:image/png;base64,the_garbled_base64_encoded_image..."
我现在可以看到 base64 图像数据，甚至可以将 console.log 作为字符串，但后来我使用字符串 ('data:image/png;base64,218j9c8wh1...) 在
function getDataURI($image, $mime = '') { return 'data: '.(function_exists('mime_content_type') ? mime_content_type($image) : $mime).';base64,' .base64_encode(file_get_contents($image)); }
davidwalsh.name/data-uri-php这个链接是参考，你可以更好地理解如何制作它。
我终于明白了。谢谢！