图像前后端的数据交互及图像格式的转换（python、opencv）_前端获取paython后端的数据,格式需要转换吗-CSDN博客

本文链接：https://blog.csdn.net/zsycode/article/details/91320053

图像前后端的数据交互及图像格式的转换（python、opencv）

前言
前端页面
后台处理
总结

前言

最近毕业答辩需要做个演示系统（图像去雨），要求将选择图片的去雨图片展示出来与原图进行对比，我决定用网页的形式做个演示系统。原先想着用java调用python脚本运行，但模型的输入和输出都是图片矩阵数据，不好操作，后来就直接用python的flask框架简单的实现了前后端交互。

前端页面

<p>图片预览：</p>
                <div id="test-image-preview"></div>
            　　<input type="file" id="test-image-file" name="test" accept="image/gif, image/jpeg, image/png, image/jpg">

前端页面用file类型的input选择文件，通过js代码将图片背景方式显示在div内，实现预览。
在 reader.onload中获取的data即为图像的base64编码，其编码本体为‘data:image/jpeg;base64,’后的字符，

onload=function () {
            var
                fileInput = document.getElementById('test-image-file'),

                preview = document.getElementById('test-image-preview');
            // 监听change事件: