我正在尝试更新 div
我的 html 页面中的元素带有从 Django 服务器返回的 png 图像。
在我的客户端脚本中,我在单击按钮时发送 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
导入.
我在客户端 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 都比较陌生。关于这个问题的任何见解都会非常有帮助。提前致谢。
最佳答案
在发送之前尝试使用 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 + '" />');
关于javascript - 如何使用 jquery 在 Django 中提供图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29872254/