Question

希望有人帮我解决这个烂摊子。我正在构建一个移动应用程序，它将一系列画布对象转换为dataUrl，然后使用btoa（）方法对数据进行编码：

var canvas  = document.getElementById("imagen_envio");
var dataUrl = canvas.toDataURL('image/jpeg', .7);
var file = btoa(dataUrl);

之后，它将文件发送到服务器上的php文件，使用AJAX将其存储在MySQL的Medium BLOB中。它到目前为止一切正常，但之后一个php文件必须显示图像，但它不起作用：

link：http://a.gob.mx/PHP_tratayretrata/img.php

//img.php
$connect = mysqli_connect($host, $user ,$password) or die("No se pudo conectar.");
mysqli_select_db($connect,$DB) or die("No se encuentra la base.");

$sql = "SELECT img FROM fotos WHERE usuario = 1 AND tema = 1 AND ejercicio = 1";
$result=mysqli_query($connect, $sql);

$row=mysqli_fetch_array($result);

header("Content-type: image/jpeg; charset=UTF-8");

$img = base64_decode($row["img"]);

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

我制作了另一个将数据打印到文本的php文件：http://a.gob.mx/PHP_tratayretrata/print-data.php 我在一个简单的html文件中使用了这些数据，以确保数据没有损坏：http://a.gob.mx/PHP_tratayretrata/test-data.html并且它有效！

所以我不知道我做错了什么。有任何想法吗？提前谢谢！

Answer 1

你是base-64编码一个已经编码为base-64的字符串，因为toDataURL()返回一个data-uri，它在实际的base-64数据之前包含一个data-uri头。

无法将其解码为原始图像数据。

您需要从数据uri中删除标头，将其按原样发送到服务器（base-64字符串）。您可以将其存储在数据库中并稍后解码。

/// this result is already a base-64 encoded string with a header
var dataUrl = canvas.toDataURL('image/jpeg', .7);

/// this will only base-64 encode again (incl. the header)
//var file = btoa(dataUrl);

data-uri看起来像这样：

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

所以在这里你需要砍掉标题并包括最后一个逗号。剩下的数据将是base-64编码图像。

Answer 2

你需要删除标题，如果要将base64编码文件保存到数据库，那么你不需要解码它，你的回声应该是这样的：

echo '<img src="data:img/jpeg;base64,'.$row['img']).'">';

Mysql BLOB中存储的图像，尝试显示时出错

2 个答案: