从 jquery 通过 AJAX 发送图像数据答案

【问题标题】：Sending image data over AJAX from jquery从 jquery 通过 AJAX 发送图像数据
【发布时间】：2013-10-08 01:48:25
【问题描述】：

我需要使用 AJAX 从客户端将图像数据 (data:image/png;base64) 发送到我的 PHP 服务器。我的 AJAX 调用如下所示：（form_data 包含图像）

$.ajax({
    url: global_siteurl+'/save_image',
    data: form_data,
    dataType: 'json',
    type: 'post',
    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
    success: function (retval) {   
        process_save_image(retval);
    }
});

然后我将编码的图像数据作为 blob 存储在数据库中（是的 - 背后的故事很长！）。当我检索图像数据时，它似乎已损坏并且无法正确显示。几乎就像在图像数据中引入了换行符和空格一样。我的 ajax 调用中是否缺少任何参数？关于可能出了什么问题的任何想法？我可以发送的图像数据是否有大小限制？

追逐这个已经漫长的 4 天了。

嗯嗯

【问题讨论】：

There is a size limit, yes, but it's browser-dependent.

标签： javascript php jquery ajax image

【解决方案1】：

问题与这篇文章中描述（并解决）的问题相同：

Blob data replace '+' with space

事实证明，当我 GET/POST 时，我需要使 blob 数据对 URL 安全。在 PHP 服务器端，我使用了上述帖子中描述的函数。在 Javascript 方面，我使用了以下函数：

http://notepad2.blogspot.com/2012/08/javascript-make-base64-encoded-string.html

花了很多时间盯着编码的图像数据，发现 +/= 被替换了。

【讨论】：

【解决方案2】：

显示图片时试试这个。

echo '<img src="data:image/png;base64,' . base64_encode($blob_data) . '"/>

【讨论】：

这就是我目前拥有的方式。我想知道问题是否在于我使用 JSON 来发送图像数据。