javascript - 将 Base64/BLOB 图像数据从 PHP 发送到 Javascript

Question

TL;DR

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

我正在尝试从 Laravel 中的 Controller 返回的 page.blade.php 中将数组(包含字符串和 img)发送到我的 Vue 组件。

更多详细信息

我知道数据编码是我的问题，并且 json_encode($my_string_data) 仅适用于 UTF-8，但不适用于 IMG 数据。 json_encode($my_image_data) 将抛出错误格式错误的 utf-8 字符可能错误编码图像。

我在 Controller 中发出 1 个请求，然后进行 2 个数据库查询，并组合两个响应(字符串和 MEDIUMBLOB/img 数据)，然后将其作为数组返回到我的 Blade 文件中的 blade.php是接受 img 数据作为 props 的 vue 组件。

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

1. 如何让 JavaScript 直接使用此 img 数据？
2. 如果#1不可能，我该如何转换这个img数据直接由javascript读取？
3. 如果#2不可能，我如何将此img数据转换为JSON格式json_encode($my_image_data)？

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

ATM，我仍在尝试制定解决方案#3。

Answer 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。