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'),
]

 


相关文章
|
前端开发 API UED
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
420 2
|
XML 存储 前端开发
后端程序员的前后端交互核心-Ajax
后端程序员的前后端交互核心-Ajax
273 6
后端程序员的前后端交互核心-Ajax
|
JavaScript API 开发工具
<大厂实战场景> ~ Flutter&鸿蒙next 解析后端返回的 HTML 数据详解
本文介绍了如何在 Flutter 中解析后端返回的 HTML 数据。首先解释了 HTML 解析的概念,然后详细介绍了使用 `http` 和 `html` 库的步骤,包括添加依赖、获取 HTML 数据、解析 HTML 内容和在 Flutter UI 中显示解析结果。通过具体的代码示例,展示了如何从 URL 获取 HTML 并提取特定信息,如链接列表。希望本文能帮助你在 Flutter 应用中更好地处理 HTML 数据。
602 1
|
前端开发 API 开发者
深度剖析:AJAX、Fetch API如何成为Python后端开发者的最佳拍档!
深度剖析:AJAX、Fetch API如何成为Python后端开发者的最佳拍档!
272 4
|
前端开发 JavaScript
html图像属性的高级用法
在HTML中,通过结合CSS、JavaScript及其他HTML元素,可以实现图像属性的高级用法,例如响应式图像、懒加载、图像映射、CSS滤镜、SVG图像、图像作为背景以及使用JavaScript动态更改图像。
|
前端开发
html图像属性详解
在 HTML 中,使用 `&lt;img&gt;` 标签插入图像。主要属性包括:`src` 指定图像路径,`alt` 提供替代文本,`width` 和 `height` 设置尺寸,`title` 显示额外信息,`loading` 控制加载方式(如 `lazy` 延迟加载),`class` 和 `style` 用于样式化,`usemap` 定义图像映射,`ismap` 表示服务器端映射。这些属性可组合使用以实现复杂效果。
|
存储 缓存 移动开发
不来看一看HTML请求后端性能优化的实战总结吗?
本文主要总结了在ICBU的核心沟通场景下服务端在此次性能优化过程中做的工作,供大家参考讨论。
|
前端开发 JavaScript
改变 HTML 图像
【9月更文挑战第03天】
308 4
|
编解码 前端开发
HTML 图像的高阶写法
在 HTML 中,通过使用多种属性和技术可以增强图像的功能、可访问性和性能
|
移动开发 前端开发 程序员
后端程序员的前端基础-前端三剑客之HTML
后端程序员的前端基础-前端三剑客之HTML
326 9

热门文章

最新文章