跳至主要內容

Python人脸美白毕业设计

AI悦创原创Python毕业设计辅导Python毕业设计1v1辅导Python毕业设计辅导Python毕业设计1v1辅导大约 13 分钟...约 3849 字

show.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="/static/js/jquery.min.js"></script>
</head>
<style>
    /* .file-upload {
       display: none; // 设置上传文件的input隐藏
    } */
</style>
<body>
<div style="width: 400px;height: 300px;margin-left: 500px">
    <div class="col-md-5">
        <!-- 显示上传的图片 -->
        {#            下面的默认图片有问题,需要修改,修改如下:#}
        <img id="img-avatar" style="width: 400px;height: 500px" src="/static/images/user.jpg" class="img-responsive"
             alt="无法显示默认头像"/>
    </div>
    <div class="col-md-offset-2 col-md-4">
        <!-- 文件上传 input,接受图像文件 -->
        <input id="chooseImage" type="file" name="file" accept="image/*">
    </div>
    <div class="col-md-offset-2 col-md-4">
        <!-- 图像处理功能按钮 -->
        <button id="mopi">磨皮</button>
        <button id="meibai">美白</button>
        <button id="quban">祛斑</button>
        <button id="bao">纯红</button>
    </div>

</div>
<script>
    // 当选择图像文件时的事件处理
    $("#chooseImage").on('change', function () {
        // 获取上传的文件
        const files = document.querySelector('input[type=file]')
        let filePath = $(this).val(); //获取到input的value,里面是文件的路径  // 获取文件路径
        let fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(); //获取文件后缀
        let src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式// // 转换为本地预览格式
        var reader = new FileReader();
        // 检查是否是图片
        if (!fileFormat.match(/.jpg/)) {
            //error_prompt_alert
            alert('上传错误,文件格式必须为:png/jpg/jpeg/bmp/gif');
            return;
        }
        // 更新 img 标签的 src 属性为上传的图像地址
        $('#img-avatar').attr('src', src); //将图片地址放置在img的src中。
        reader.readAsDataURL(files.files[0]);
        reader.onloadend = function () {
            var base64 = reader.result;
            console.log(base64);
            // 发送POST请求,将图像数据发送到服务器
            $.ajax({
                url: '/predict',
                method: 'post',
                data: {'data': base64},
                success: function (res) {
                    alert(res['action'])

                }
            })

        }
    });

    // 为图像处理功能按钮绑定点击事件
    $('#mopi').click(function () {
        $.ajax({
            url: '/mopi',
            method: 'get',
            success: function (res) {
                document.getElementById('img-avatar').src = res['path']
            }
        })


    })
    // 为美白功能按钮绑定点击事件
    $('#meibai').click(function () {
        // 发送GET请求到/meibai接口
        $.ajax({
            url: '/meibai',
            method: 'get',
            success: function (res) {
                // 更新img标签的src属性为处理后的图像地址
                document.getElementById('img-avatar').src = res['path']
            }
        })


    })
    // 为祛斑功能按钮绑定点击事件
    $('#quban').click(function () {
        // 发送GET请求到/quban接口
        $.ajax({
            url: '/quban',
            method: 'get',
            success: function (res) {
                // 更新img标签的src属性为处理后的图像地址
                document.getElementById('img-avatar').src = res['path']
            }
        })


    })
    // 为纯红功能按钮绑定点击事件
    $('#bao').click(function () {
        $.ajax({
            url: '/bao',
            method: 'get',
            success: function (res) {
                // 更新img标签的src属性为处理后的图像地址
                document.getElementById('img-avatar').src = res['path']
            }
        })


    })
</script>
</body>
</html>

欢迎关注我公众号:AI悦创,有更多更好玩的等你发现!

公众号:AI悦创【二维码】

AI悦创·编程一对一

AI悦创·推出辅导班啦,包括「Python 语言辅导班、C++ 辅导班、java 辅导班、算法/数据结构辅导班、少儿编程、pygame 游戏开发、Linux、Web全栈」,全部都是一对一教学:一对一辅导 + 一对一答疑 + 布置作业 + 项目实践等。当然,还有线下线上摄影课程、Photoshop、Premiere 一对一教学、QQ、微信在线,随时响应!微信:Jiabcdefh

C++ 信息奥赛题解,长期更新!长期招收一对一中小学信息奥赛集训,莆田、厦门地区有机会线下上门,其他地区线上。微信:Jiabcdefh

方法一:QQopen in new window

方法二:微信:Jiabcdefh

上次编辑于:
贡献者: AndersonHJB
你认为这篇文章怎么样?
  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
评论
  • 按正序
  • 按倒序
  • 按热度