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

 


相关文章
|
20天前
|
存储 监控 数据库
Django 后端架构开发:高效日志规范与实践
Django 后端架构开发:高效日志规范与实践
34 1
|
20天前
|
存储 缓存 前端开发
Django 后端架构开发:存储层调优策略解析
Django 后端架构开发:存储层调优策略解析
36 2
|
20天前
|
存储 安全 数据安全/隐私保护
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
57 0
|
1天前
|
前端开发 JavaScript
html图像属性的高级用法
在HTML中,通过结合CSS、JavaScript及其他HTML元素,可以实现图像属性的高级用法,例如响应式图像、懒加载、图像映射、CSS滤镜、SVG图像、图像作为背景以及使用JavaScript动态更改图像。
|
1天前
|
前端开发
html图像属性详解
在 HTML 中,使用 `&lt;img&gt;` 标签插入图像。主要属性包括:`src` 指定图像路径,`alt` 提供替代文本,`width` 和 `height` 设置尺寸,`title` 显示额外信息,`loading` 控制加载方式(如 `lazy` 延迟加载),`class` 和 `style` 用于样式化,`usemap` 定义图像映射,`ismap` 表示服务器端映射。这些属性可组合使用以实现复杂效果。
|
7天前
|
编解码 前端开发
HTML 图像的高阶写法
在 HTML 中,通过使用多种属性和技术可以增强图像的功能、可访问性和性能
|
12天前
|
前端开发 JavaScript
改变 HTML 图像
【9月更文挑战第03天】
27 3
|
18天前
|
安全 数据库 数据安全/隐私保护
|
20天前
|
负载均衡 应用服务中间件 网络安全
Django后端架构开发:Nginx服务优化实践
Django后端架构开发:Nginx服务优化实践
33 2
|
20天前
|
JSON 前端开发 API
Django 后端架构开发:通用表单视图、组件对接、验证机制和组件开发
Django 后端架构开发:通用表单视图、组件对接、验证机制和组件开发
40 2