Question

我过去曾搜索过这个答案，但从来没有遇到过这个问题的答案。我希望SO社区能够最终解决这个问题。 我需要知道如何在JavaScript / JQuery中嵌入通过POST请求检索源字节的图像。需要POST，因为为了生成图像，需要向服务器发送base64编码的字符串来自客户的指示。有时这些指令太长，无法通过GET发送。此外，我正在使用一些遗留代码，所以我试图避免更改服务器代码的主要功能。它仍然是可能的，但不是首选的，因为编辑服务器代码在将来的情况下并不总是一个选项。

我知道你可以在img标签中嵌入base64。我知道你也可以通过在画布上渲染数据来实现。但是这两种方法都要求你有一个编码的base64字符串 ...

<img src='data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0.....AwXEQA7'>

标准网址

<img src="www.examplesite.com/theimage.png">

或使用GET参数的网址。

<img src="www.examplesite.com/getImage.php?id=9001">

使用POST参数的网址怎么样？

<script>
var url = 'www.examplesite.com/getImage.php';
var postData = {'id': 9001};
var outDiv = document.getElementById("outputDiv");
$.post(url,postData,function(data){

    // What do we do here to display the returned image?
    // The image will have the Content-Type: 'image/png'.

});
</script>

Answer 1

从发布数据中，在服务器上创建图像，然后将代码返回给客户端以访问图像，例如imagabd1。然后有一个getImage.php脚本，它通过带有唯一标识符的get返回一个图像到创建的图像。将图像元素添加到DOM并将get请求添加为src。例如：

1）Post发送base64数据。

2）服务器在服务器上创建图像和存储

3）服务器返回一个代码，例如imagabd1

4）在客户端上创建一个图像元素，并添加http://server/getImage?id=imagabd1作为源。服务器应该知道在给出此请求时要返回的图像。

Answer 2

确保脚本返回Base64，应该简单如下：

outDiv.html('<img src="' + data '">');

或更改图像的SRC attr：

element.attr('src', data)

嵌入通过将发布数据发送到URL而检索的PNG文件

2 个答案: