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

 


相关文章
|
2月前
|
前端开发 API UED
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
97 2
|
1月前
|
前端开发 API 开发者
深度剖析:AJAX、Fetch API如何成为Python后端开发者的最佳拍档!
深度剖析:AJAX、Fetch API如何成为Python后端开发者的最佳拍档!
39 4
|
26天前
|
存储
HTML 图像1
在HTML中,图像通过`&lt;img&gt;`标签定义,此标签仅含属性而无闭合标签。要显示图像,需指定源属性`src`,其值为图像的URL地址。此外,推荐使用`alt`属性提供替代文本,以增强页面的可访问性。图像的高度和宽度可通过`height`和`width`属性设置,以确保页面加载时布局稳定。使用图像时应注意数量和路径,避免影响页面加载速度和显示效果。
|
2月前
|
前端开发 JavaScript
html图像属性的高级用法
在HTML中,通过结合CSS、JavaScript及其他HTML元素,可以实现图像属性的高级用法,例如响应式图像、懒加载、图像映射、CSS滤镜、SVG图像、图像作为背景以及使用JavaScript动态更改图像。
|
2月前
|
前端开发
html图像属性详解
在 HTML 中,使用 `&lt;img&gt;` 标签插入图像。主要属性包括:`src` 指定图像路径,`alt` 提供替代文本,`width` 和 `height` 设置尺寸,`title` 显示额外信息,`loading` 控制加载方式(如 `lazy` 延迟加载),`class` 和 `style` 用于样式化,`usemap` 定义图像映射,`ismap` 表示服务器端映射。这些属性可组合使用以实现复杂效果。
|
1月前
|
前端开发 API 数据格式
颠覆传统!AJAX、Fetch API与Python后端,开启Web开发新篇章!
在Web开发领域,技术的快速迭代推动着应用不断进化。传统前后端交互方式已无法满足现代Web应用对高效、实时性和用户体验的需求。AJAX作为异步通信的先驱,使页面无需刷新即可更新部分内容,显著提升用户体验;尽管XML曾是其主要数据格式,但如今JSON已成为主流。Fetch API则以其简洁、灵活的特点成为AJAX的现代替代品,基于Promises的异步请求让开发更加高效。与此同时,Python后端凭借高效稳定和丰富的库支持,成为众多开发者的首选,无论是轻量级的Flask还是全功能的Django,都能为Web应用提供强大的支撑。
38 0
|
1月前
|
XML 前端开发 API
惊艳全场的秘诀!AJAX、Fetch API与Python后端,打造令人惊叹的Web应用!
惊艳全场的秘诀!AJAX、Fetch API与Python后端,打造令人惊叹的Web应用!
26 0
|
2月前
|
编解码 前端开发
HTML 图像的高阶写法
在 HTML 中,通过使用多种属性和技术可以增强图像的功能、可访问性和性能
|
3月前
|
XML 存储 前端开发
后端程序员的前后端交互核心-Ajax
后端程序员的前后端交互核心-Ajax
54 6
后端程序员的前后端交互核心-Ajax
|
2月前
|
前端开发 JavaScript
改变 HTML 图像
【9月更文挑战第03天】
42 3
下一篇
无影云桌面