Django通过HttpResponse返回jpg图像数据，并显示在网页上

Django通过HttpResponse返回jpg图像数据，并显示在网页上

最近几天在做一个期末项目的时候，有一个需求是服务器通过HttpResponse返回一张处理后图片。
网上的代码大多数都是同一种方法，而且用到了用到了url获取服务器上的图片，而且都有点复杂，对于我这种入门都算不上的小白一点都不友好。
然后我打印服务器和网页上的数据，一点点的尝试最后还是弄好了。
首先，感谢一下以下博客的博主，给我提供了一些灵感，
https://blog.csdn.net/baidu_39416074/article/details/80926818
https://www.jb51.net/article/140611.htm
这些博客在后端处理的代码里面都写到了

return HttpResponse(result, content_type='image/jpeg')

里面是都写了content_type=‘image/jpeg’，我以为在网页success函数里面的值可以直接将返回的数据赋值给<img>

$.post({
                url:my_url,
                data:{
                    message:img
                },
                // async: false, // 同步请求
                success:function (callback) {
                    if(callback=='no'){
                        // 出现错误
                    } else {
                        // 返回的结果
                        var obj = document.getElementById("detectImg");
                        obj.src = callback;
                    }
                },
            })

这时在chrome终端工具栏里面Network可以预览到返回的图像，这说明处理好的图像在前端是正确收到了，但是怎么在网页解析就是一个问题了。这个问题困扰了我很久。我在服务器和网页将数据打印出来，看着都是乱码，我感觉可能是二进制数据流，需要用什么方法编码一下。想到网页上传是用base64对图片数据进行了编码，服务器也做了解码，我想着是不是在服务器返回图片也要进行编码，我就试了一下，果然，这下在服务器和网页打印出来的数据都是和上传图片差不多的格式。然后在网上查找之后知道可以直接将图片base64的数据赋值给<img>的src

var obj = document.getElementById("detectImg");
obj.src = "data:image/jpeg;base64," + callback;

到这里就完成了服务器返回图片的显示。
以下是完整代码：

网页通过post上传需要处理的图片

$.post({
	url:'/getImage',
	data:{
		message:img
	},
	// async: false, // 同步请求
	success:function (callback) {
		var obj = document.getElementById("detectImg");
		obj.src = "data:image/jpeg;base64," + callback;
	},
})

服务器处理图片

import os
import base64

if (os.path.isfile('detect/output/' + time + '.jpg')):
	file = open(u'detect/output/' + time + '.jpg', 'rb')
	result = file.read()

result = base64.b64encode(result)
return HttpResponse(result, content_type='image/jpeg')