红外图、深度图、彩色图转为原图

最新推荐文章于 2024-01-30 17:19:08 发布

月弦笙音

最新推荐文章于 2024-01-30 17:19:08 发布

阅读量424

点赞数

分类专栏：吃透原生js 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_38161537/article/details/126978780

版权

吃透原生js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本地上传方式

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>客户端模拟</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

    <style>
    .bg-light {
        background-color: #f8f9fa!important;
    }
    
    .pt-3 {
        padding-top: 3rem!important;
    }

    .pb-3 {
        padding-bottom: 3rem!important;
    }

    a {
        text-decoration: none;
    }

    #canvas-dep {
        margin-left: -15px;
    }

    #canvas-inf {
        margin-left: -15px;
    }
    </style>
</head>

<body class="bg-light">

    <canvas id="canvas-col" width="640" height="480"></canvas>
    <canvas id="canvas-dep" width="640" height="480"></canvas>
    <canvas id="canvas-inf" width="640" height="480"></canvas>

    <div class="container">
        <div class="pt-3 pb-3 text-center">
            <h2>图片查看工具</h2>
            <p class="lead">查看彩色、红外及深度原图</p>
        </div>

        <div class="row">
                <div class="col-md-12 order-md-1">
                  <h4 class="mb-3">请求参数</h4>
                  <form class="needs-validation" novalidate="">
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label for="colfile">彩色</label>
                            <input type="file" class="form-control" id="colfile" >
                            <div class="invalid-feedback">
                            Valid appKey is required.
                            </div>
                        </div>                         
                        <div class="col-md-4 mb-3">
                            <label for="depfile">深度图</label>
                            <input type="file" class="form-control" id="depfile" >
                            <div class="invalid-feedback">
                            Valid appKey is required.
                            </div>
                        </div>                        
                        <div class="col-md-4 mb-3">
                            <label for="inffile">红外图</label>
                            <input type="file" class="form-control" id="inffile" >
                            <div class="invalid-feedback">
                            Valid appKey is required.
                            </div>
                        </div> 
                    </div>                      
                    <hr class="mb-4">
                    <button class="btn btn-primary btn-lg btn-block" type="button"  onclick="test();">测试</button>
                  </form>
                </div>
              </div>

    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script> -->
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>


    <script type="text/javascript">
        const w = 640;
        const h = 480;

        const depThresholdValue = 4000;
        const infThresholdValue = 1000;

        function test() {
            let colfile = $("#colfile");
            if (colfile && colfile[0].files && colfile[0].files[0]) {
                console.log(colfile[0].files)
                let fileReader = new FileReader();
                fileReader.onload = (event) => {
                    var buffer = new Uint8Array(event.target.result);
                    console.log(buffer)
                    var ctx = document.getElementById("canvas-col").getContext('2d');
                    var data = ctx.createImageData(w, h);
                    for(var index = 0; index < w * h; index ++) {
                        let i = index * 4;

                        let bi = index * 3;

                        data.data[i] = buffer[bi];
                        data.data[i + 1] = buffer[bi + 1];
                        data.data[i + 2] = buffer[bi + 2];
                        data.data[i + 3] = 255;
                    }
                    ctx.putImageData(data, 0, 0);

                    console.log('bye color');
                }
                fileReader.readAsArrayBuffer(colfile[0].files[0]);              
            }



            // 

            let depfiles = $("#depfile");
            if (depfiles && depfiles[0].files && depfiles[0].files[0]) {
                let fileReader = new FileReader();
                fileReader.onload = (event) => {
                    var buffer = new Uint8Array(event.target.result);

                    var ctx = document.getElementById("canvas-dep").getContext('2d');
                    var data = ctx.createImageData(w, h);
                    for(var index = 0; index < w * h; index ++) {
                        let i = index * 4;

                        let pixel = Math.ceil((buffer[index*2 + 1] * 256 + buffer[index*2]) * 255 / depThresholdValue);
                        if (pixel > 255) pixel = 255;

                        data.data[i] = pixel;
                        data.data[i + 1] = pixel;
                        data.data[i + 2] = pixel;
                        data.data[i + 3] = 255;
                    }
                    ctx.putImageData(data, 0, 0);

                    console.log('bye dep');
                }
                fileReader.readAsArrayBuffer(depfiles[0].files[0]);                
            }

            let inffiles = $("#inffile");
            if (inffiles && inffiles[0].files && inffiles[0].files[0]) {
                let fileReader = new FileReader();
                fileReader.onload = (event) => {
                    var buffer = new Uint8Array(event.target.result);

                    var ctx = document.getElementById("canvas-inf").getContext('2d');
                    var data = ctx.createImageData(w, h);
                    for(var index = 0; index < w * h; index ++) {
                        let i = index * 4;

                        let pixel = Math.ceil((buffer[index*2 + 1] * 256 + buffer[index*2]) * 255 / infThresholdValue);
                        if (pixel > 255) pixel = 255;

                        data.data[i] = pixel;
                        data.data[i + 1] = pixel;
                        data.data[i + 2] = pixel;
                        data.data[i + 3] = 255;
                    }
                    ctx.putImageData(data, 0, 0);  

                    console.log('bye inf');              
                }
                fileReader.readAsArrayBuffer(inffiles[0].files[0]);
            }
            
        }
    </script>
</body>

</html>

ajax方式：

 <canvas id="canvas-col" width="640" height="480"></canvas>
    <script>
        const w = 640;
        const h = 480;

        const depThresholdValue = 4000;
        const infThresholdValue = 1000;
        var oReq = new XMLHttpRequest();
        oReq.open("GET", "./3.raw", true);
        oReq.responseType = "arraybuffer";
        oReq.onload = function (oEvent) {
        var arrayBuffer = oReq.response; // Note: not oReq.responseText
        if (arrayBuffer) {
        var buffer = new Uint8Array(arrayBuffer)[0];
                    var ctx = document.getElementById("canvas-col").getContext('2d');
                    var data = ctx.createImageData(w, h);
                    for(var index = 0; index < w * h; index ++) {
                        let i = index * 4;

                        let bi = index * 3;

                        data.data[i] = buffer[bi];
                        data.data[i + 1] = buffer[bi + 1];
                        data.data[i + 2] = buffer[bi + 2];
                        data.data[i + 3] = 255;
                    }
                    ctx.putImageData(data, 0, 0);
        // for (var i = 0; i < byteArray.byteLength; i++) {
        // }
        }
        };
        oReq.send(null);
        </script>