本地上传形式
<!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>