Question

我正在尝试使用从Django服务器返回的png图像更新html页面中的div元素。

在我的客户端脚本中，我点击按钮发送ajax POST请求，我有 -

    $('#mybtn').click(function (event) {
        event.preventDefault();
        $.ajax({
            url: "/analysis",
            type: "POST",
            data: { 'data': $("#analysis_list").val(), csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value },
            success: function (response) {
                $('#imagediv').html('<img src=' + response + ' />');
            },
        });
    });

在我的views.py中，我有 -

def analysis(request):
    dataFromClient = dict(request.POST)['data'][0]
    pathToImg = testAnalytics(dataFromClient)
    img = Image.open(pathToImg)
    response = HttpResponse(content_type="image/png")
    img.save(response, "PNG")
    return response

其中testAnalytics方法根据客户端发送的数据生成要显示的图像，并返回其路径。 Image是从PIL导入的。{/ p>

我在客户端javascript渲染图像时遇到问题。当我为response标记分配src到<img>属性时，我会在浏览器上看到原始图像数据而不是图像（如此处所述 - How to update a div with an image in Django?）。我不知道我哪里出错了。

我还在响应上尝试了base64编码，如下所示（但不确定我是否已正确实现） -

success: function (response) {
                $('#imagediv').html('<img alt="Embedded Image" src="data:image/png;base64,' + response + '" />');
            }

我已提到以下链接以达到这一点 -
Django: How to render image with a template
Serve a dynamically generated image with Django

我对网络编程和Django都很陌生。任何关于这个问题的见解都会非常有用。提前谢谢。

Answer 1

在发送之前尝试使用base64对图像进行编码。

import base64
#rest of your code 
with open("pathToImage.png", "rb") as image_file:
    encoded_string = base64.b64encode(image_file.read())

然后

success: function(response){
            $('#imagediv').html('<img src="data:image/png;base64,' + response + '" />');

Answer 2

如果您希望按照任何HTML代码的内容设置图片，则必须在图片内容之前应用data:{type};{encode-format}并在CSS中设置background网址，类似如下：

html-element{
   background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAEklEQVQImWNgIAD+QzFuAeIAAPVzA/0vfQ+9AAAAAElFTkSuQmCC) repeat;
}

或者通过src标记的img属性设置此项：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAEklEQVQImWNgIAD+QzFuAeIAAPVzA/0vfQ+9AAAAAElFTkSuQmCC">

例如，如果您在www.patternify.com网站中生成新模式，则可以从 Base64代码字段中复制和使用base64内容。

如何使用jquery

2 个答案: