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