HTML通过Ajax上传图像至Django后端并转换为Mat图像

简介: HTML通过Ajax上传图像至Django后端并转换为Mat图像

1、index.html


<script src="js/jquery-1.12.4.min.js"></script>
    <script>
        function fucTest() {
            let form_data = new FormData();
            let file_info = $("#img")[0].files[0];
            form_data.append('img', file_info);
            $.ajax({
                url: "http://127.0.0.1:8000/test/", // ocr服务url
                type: 'POST',
                data: form_data,
                processData: false,
                contentType: false,
                beforeSend: function(xhr, settings) {
                    xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}")
                },
                success: function (ret) {
                    $("#result").text(ret)
                }
            })
        }
</script>
......
<input type="file" name="img" id="img">
<button onclick="fucTest()">ocr test</button>
<p id="result"></p>


2、views.py


class Index(View):
    def get(self, request):
        return render(request, 'index.html')
class OCRView(View):
    def post(self, request):
        img = request.FILES.get('img')
        parser = ImageFile.Parser()
        for chunk in img.chunks():
            parser.feed(chunk)
        img = parser.close()
        img = cv2.cvtColor(np.asarray(img), cv2.COLOR_RGB2BGR)
        result = "图像的尺寸:" + img.shape[1] + "_" + img.shape[0]
        return HttpResponse(result)


3、 urls.py


urlpatterns = [
    path('', Index.as_view(), name='index'),
    path('test/', OCRView.as_view(), name='test'),
]

 


相关文章
|
5月前
|
存储 监控 数据库
Django 后端架构开发:高效日志规范与实践
Django 后端架构开发:高效日志规范与实践
104 1
|
4月前
|
前端开发 API UED
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
135 2
|
5月前
|
存储 缓存 前端开发
Django 后端架构开发:存储层调优策略解析
Django 后端架构开发:存储层调优策略解析
79 2
|
5月前
|
存储 安全 数据安全/隐私保护
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
214 0
|
2月前
|
JavaScript API 开发工具
<大厂实战场景> ~ Flutter&鸿蒙next 解析后端返回的 HTML 数据详解
本文介绍了如何在 Flutter 中解析后端返回的 HTML 数据。首先解释了 HTML 解析的概念,然后详细介绍了使用 `http` 和 `html` 库的步骤,包括添加依赖、获取 HTML 数据、解析 HTML 内容和在 Flutter UI 中显示解析结果。通过具体的代码示例,展示了如何从 URL 获取 HTML 并提取特定信息,如链接列表。希望本文能帮助你在 Flutter 应用中更好地处理 HTML 数据。
146 1
|
3月前
|
JavaScript 前端开发 API
vue获取图片的blob传给django后端
vue获取图片的blob传给django后端
86 4
|
3月前
|
前端开发 API 开发者
深度剖析:AJAX、Fetch API如何成为Python后端开发者的最佳拍档!
深度剖析:AJAX、Fetch API如何成为Python后端开发者的最佳拍档!
51 4
|
3月前
|
前端开发 API 数据格式
颠覆传统!AJAX、Fetch API与Python后端,开启Web开发新篇章!
在Web开发领域,技术的快速迭代推动着应用不断进化。传统前后端交互方式已无法满足现代Web应用对高效、实时性和用户体验的需求。AJAX作为异步通信的先驱,使页面无需刷新即可更新部分内容,显著提升用户体验;尽管XML曾是其主要数据格式,但如今JSON已成为主流。Fetch API则以其简洁、灵活的特点成为AJAX的现代替代品,基于Promises的异步请求让开发更加高效。与此同时,Python后端凭借高效稳定和丰富的库支持,成为众多开发者的首选,无论是轻量级的Flask还是全功能的Django,都能为Web应用提供强大的支撑。
48 0
|
3月前
|
XML 前端开发 API
惊艳全场的秘诀!AJAX、Fetch API与Python后端,打造令人惊叹的Web应用!
惊艳全场的秘诀!AJAX、Fetch API与Python后端,打造令人惊叹的Web应用!
43 0
|
5月前
|
安全 数据库 数据安全/隐私保护

热门文章

最新文章