canvas访问nginx上的pgm图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图像编辑器示例</title>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<button id="loadButton">加载PGM图像</button>
<button id="switchButton">switchButton</button>
<script>
// 创建舞台和画布
var stage = new createjs.Stage("canvas");
var canvas = stage.canvas;
// 设置画布大小为窗口大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 添加加载PGM图像功能
$("#loadButton").click(function() {
// 获取静态PGM图像
var url = "http://127.0.0.1:9001/map/map_1.pgm";
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function() {
if (xhr.status === 200) {
var image = parsePGM(xhr.response);
// 显示图像
var bitmap = new createjs.Bitmap(image);
stage.addChild(bitmap);
stage.update();
}
};
xhr.send(null);
});
// 解析PGM格式的图像文件
function parsePGM(arrayBuffer) {
var view = new DataView(arrayBuffer);
var i = 0;
console.log("view: ",view)
// 解析头部信息
var type = "";
if(view.getUint8(i++)!=80||view.getUint8(i++)!=53){
console.log("---非pgm--")
return;
}
i++;
var c=view.getUint8(i++);
if(c==35){
do{
c=view.getUint8(i++);
}while(c!=10&&c!=13)
c=view.getUint8(i++);
}
if(c<48||c>57){
console.log("---读取宽错误--:"+c)
return ;
}
var k=0;
do{
k=k*10+c-48;
c=view.getUint8(i++);
}while(c>=48&&c<=57);
var width=k;
c=view.getUint8(i++);
if(c<48||c>57){
console.log("---读取高错误--:"+c)
return ;
}
k=0;
do{
k=k*10+c-48;
c=view.getUint8(i++);
}while(c>=48&&c<=57);
var height=k;
c=view.getUint8(i++);
if(c<48||c>57){
console.log("---读取灰度错误--:"+c)
return ;
}
k=0;
do{
k=k*10+c-48;
c=view.getUint8(i++);
}while(c>=48&&c<=57);
var maxValue=k;
console.log("width: ",width)
console.log("height: ",height)
// 解析像素数据
var imageData = new ImageData(width, height);
console.log("imageData width: ",imageData.width)
console.log("imageData height: ",imageData.height)
for (var y = 0; y < height; y++) {
for (var x = 0; x < width; x++) {
var gray = view.getUint8(i);
imageData.data[(y * imageData.width + x) * 4] = gray;
imageData.data[(y * imageData.width + x) * 4 + 1] = gray;
imageData.data[(y * imageData.width + x) * 4 + 2] = gray;
imageData.data[(y * imageData.width + x) * 4 + 3] = 255;
i++;
}
}
// 创建画布并绘制图像
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.putImageData(imageData, 0, 0);
var image = new Image();
image.src = canvas.toDataURL();
return image;
}
// 添加切换PGM图像功能
$("#switchButton").click(function() {
// 获取静态PGM图像
var url = "http://127.0.0.1:9001/map/indoor_1.pgm";
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function() {
if (xhr.status === 200) {
var image = parsePGM(xhr.response);
// 显示图像
var bitmap = new createjs.Bitmap(image);
stage.addChild(bitmap);
stage.update();
}
};
xhr.send(null);
});
</script>
</body>
</html>
![nodejs微信开发---授权登录+获取用户信息微信网页授权[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)