场景：硬件采集地图信息生成并上传到后端的是一张PBM格式的图像。前端请求到该文件的静态资源后需要将其解析，然后在页面的画布中展示出来。
Show me the code
写一个工具方法用来解析图像数据，并根据像素的字节信息将图像渲染出来。
可移植像素图格式（PPM），可移植灰度图格式（PGM）和可移植位图格式（PBM）都支持解析
const MapImage = function (data) {
let exp = /^(\S+)\s+(\#.*?\n)*\s*(\d+)\s+(\d+)\s+(\d+)?\s*/;
let match = data.match(exp);
if (match) {
let width = this.width = parseInt(match[3], 10);
let height = this.height = parseInt(match[4], 10);
let maxVal = parseInt(match[5], 10);
let bytes = (maxVal < 256) ? 1 : 2;
let imgData = data.substr(match[0].length);
switch (match[1]) {
case 'P1':
this._parser = new ASCIIParser(maxVal + ' ' + imgData, bytes);
this._formatter = new PBMFormatter(width, height);
break;
case 'P2':
this._parser = new ASCIIParser(imgData, bytes);
this._formatter = new PGMFormatter(width, height, maxVal);
break;
case 'P3':
this._parser = new ASCIIParser(imgData, bytes);
this._formatter = new PPMFormatter(width, height, maxVal);
break;
case 'P4':
this._parser = new BinaryParser(imgData, bytes);
this._formatter = new PBMFormatter(width, height);
break;
case 'P5':
this._parser = new BinaryParser(imgData, bytes);
this._formatter = new PGMFormatter(width, height, maxVal);
break;
case 'P6':
this._parser = new BinaryParser(data, bytes);
this._formatter = new PPMFormatter(width, height, maxVal);
break;
default:
throw new TypeError('Sorry, your file format is not supported. [' + match[1] + ']');
return false;
}
} else {
throw new TypeError('Sorry, file does not appear to be a Netpbm file.');
return false;
}
};
MapImage.prototype.getInitMap = function (type = 'image') {
let canvas = this._formatter.getPainting(this._parser, type);
return canvas;
};
const BinaryParser = function (data, bytes) {
this._data = data;
this._bytes = bytes;
this._pointer = 0;
};
BinaryParser.prototype.getNextSample = function () {
if (this._pointer >= this._data.length) return false;
let val = 0;
for (let i = 0; i < this._bytes; i++) {
val = val * 255 + this._data.charCodeAt(this._pointer++);
}
return val;
};
const ASCIIParser = function (data, bytes) {
this._data = data.split(/\s+/);
this._bytes = bytes;
this._pointer = 0;
};
ASCIIParser.prototype.getNextSample = function () {
if (this._pointer >= this._data.length) return false;
let val = 0;
for (let i = 0; i < this._bytes; i++) {
val = val * 255 + parseInt(this._data[this._pointer++], 10);
}
return val;
};
const PPMFormatter = function (width, height, maxVal) {
this._width = width;
this._height = height;
this._maxVal = maxVal;
};
PPMFormatter.prototype.getPainting = function (parser, type) {
let paintData = null;
let canvas = null;
let ctx = null;
let img = null;
if (type === 'canvas') {
canvas = document.createElement('canvas');
ctx = canvas.getContext('2d');
canvas.width = ctx.width = this._width;
canvas.height = ctx.height = this._height;
paintData = ctx.getImageData(0, 0, this._width, this._height);
} else {
paintData = new Uint8ClampedArray(this._width * this._height * 4)
}
let dataArr = type === 'canvas' ? paintData.data : paintData;
for (let row = 0; row < this._height; row++) {
for (let col = 0; col < this._width; col++) {
let factor = 255 / this._maxVal;
let r = factor * parser.getNextSample();
let g = factor * parser.getNextSample();
let b = factor * parser.getNextSample();
let pos = (row * this._width + col) * 4;
dataArr[pos] = r;
dataArr[pos + 1] = g;
dataArr[pos + 2] = b;
dataArr[pos + 3] = 255;
}
}
if (type === 'canvas') {
ctx.putImageData(paintData, 0, 0);
return canvas;
} else {
img = new ImageData(paintData, this._width, this._height)
return img;
}
};
const PGMFormatter = function (width, height, maxVal) {
this._width = width;
this._height = height;
this._maxVal = maxVal;
};
PGMFormatter.prototype.getPainting = function (parser, type) {
let paintData = null;
let canvas = null;
let ctx = null;
let img = null;
if (type === 'canvas') {
canvas = document.createElement('canvas');
ctx = canvas.getContext('2d');
canvas.width = ctx.width = this._width;
canvas.height = ctx.height = this._height;
paintData = ctx.getImageData(0, 0, this._width, this._height);
} else {
paintData = new Uint8ClampedArray(this._width * this._height * 4)
}
let dataArr = type === 'canvas' ? paintData.data : paintData;
for (let row = 0; row < this._height; row++) {
for (let col = 0; col < this._width; col++) {
let d = parser.getNextSample() * (255 / this._maxVal);
let pos = (row * this._width + col) * 4;
dataArr[pos] = d;
dataArr[pos + 1] = d;
dataArr[pos + 2] = d;
dataArr[pos + 3] = 255;
}
}
if (type === 'canvas') {
ctx.putImageData(paintData, 0, 0);
return canvas;
} else {
img = new ImageData(paintData, this._width, this._height)
return img;
}
};
const PBMFormatter = function (width, height) {
this._width = width;
this._height = height;
};
PBMFormatter.prototype.getPainting = function (parser, type) {
let paintData = null;
let canvas = null;
let ctx = null;
let img = null;
if (type === 'canvas') {
canvas = document.createElement("canvas");
ctx = canvas.getContext('2d');
canvas.width = ctx.width = this._width;
canvas.height = ctx.height = this._height;
paintData = ctx.getImageData(0, 0, this._width, this._height);
}
if (parser instanceof BinaryParser) {
let data = '';
let byte = null;
let bytesPerLine = Math.ceil(this._width / 8);
for (let i = 0; i < this._height; i++) {
let line = parser._data.substr(i * bytesPerLine, bytesPerLine);
let lineData = '';
for (let j = 0; j < line.length; j++) lineData += ('0000000' + line.charCodeAt(j).toString(2)).substr(-8);
data += lineData.substr(0, this._width);
}
while ((byte = (parser.getNextSample())) !== false) {
data += ('0000000' + byte.toString(2)).substr(-8);
}
parser = new ASCIIParser(data.split('').join(' '), 1);
}
let dataArr = type === 'canvas' ? paintData.data : paintData;
for (let row = 0; row < this._height; row++) {
for (let col = 0; col < this._width; col++) {
let d = (1 - parser.getNextSample()) * 255;
let pos = (row * this._width + col) * 4;
dataArr[pos] = d;
dataArr[pos + 1] = d;
dataArr[pos + 2] = d;
dataArr[pos + 3] = 255;
}
}
if (type === 'canvas') {
ctx.putImageData(paintData, 0, 0);
return canvas;
} else {
img = new ImageData(paintData, this._width, this._height)
return img;
}
};
export { MapImage };
使用
mapApi.loadMapFile(resp.fileUrl).then((blob) => {
const reader = new FileReader()
reader.readAsBinaryString(blob)
reader.onload = function (e) {
// 将二进制数据传递给 MapImage 方法解析
let image = new MapImage(e.target.result)
// 通过 getInitMap 方法获取到图片的 ImageData
let bgImg = image.getInitMap('image')
// ...
};
});
- getInitMap()方法默认返回图像的 ImageData 信息，也可以通过使用 canvas 参数使其直接生成一个带着图像信息的 canvas。
