如何使用 jquery 在 Django 中提供图像
Posted
技术标签:
【中文标题】如何使用 jquery 在 Django 中提供图像【英文标题】:How to serve an image in Django using jquery 【发布时间】:2015-07-04 12:28:23 【问题描述】:我正在尝试使用从 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
导入的。
我在客户端 javascript 中呈现图像时遇到问题。当我将response
分配给<img>
标记的src
属性时,我会在浏览器上看到原始图像数据而不是图像(如此处所述-How to update a div with an image in Django?)。我不确定我哪里出错了。
我也尝试过对响应进行base64编码如下(但不确定我是否正确实现)-
success: function (response)
$('#imagediv').html('<img src="data:image/png;base64,' + response + '" />');
我已经参考了以下链接来了解这一点 -Django: How to render image with a templateServe a dynamically generated image with Django
我对网络编程和 Django 还是很陌生。有关该问题的任何见解都将非常有帮助。提前致谢。
【问题讨论】:
当你返回为base64时,你是不是这样修改了img标签? ***.com/q/1207190/870769 是的。虽然我没有提到你提到的同一篇文章,但我尝试的与他们在那里讨论的相似。我将使用我尝试 Base64 编码的代码编辑我的问题。 如果你在服务器上使用 base64 会改变内容类型$("#imagediv").html("<img src=" + URL.createObjectURL(response) + "/>");
?
刚才试过了,没用。早些时候我的complete
方法也被执行(我有一个警告框,提示我的代码到达那里);但有了这个我的代码没有到达那里。
【参考方案1】:
如果您想通过任何 HTML 标签的内容设置图像,您必须在图像内容之前应用 data:type;encode-format
并在 CSS 中设置 background
url,如下所示:
html-element
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAEklEQVQImWNgIAD+QzFuAeIAAPVzA/0vfQ+9AAAAAElFTkSuQmCC) repeat;
或者通过img
标签的src
属性设置:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAEklEQVQImWNgIAD+QzFuAeIAAPVzA/0vfQ+9AAAAAElFTkSuQmCC">
例如,如果您在www.patternify.com 站点中生成新模式,您可以从Base64 代码 字段中复制和使用base64 内容。
【讨论】:
【参考方案2】:在发送之前尝试使用 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 + '" />');
【讨论】:
以上是关于如何使用 jquery 在 Django 中提供图像的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Django admin 中向第三方外部 jQuery 插件提供 $
Django 和 jQuery.formset,如何操作删除按钮位置
Django:如何从单独的多个服务器提供用户提交的图像和缩略图?
在 django 中:使用多个插件加载 jquery 时出现问题 - 或者:如何仅加载 jQuery 一次?