mikezila/imagetool.js

## imagetool.js
let canvas = document.getElementById('raster');
let pgmText = document.getElementById('image-data');

function renderImage() {
    // Get text image data
    let pattern = /[\s\n]/g;

    // Also split on whitespace and throw away any
    // blank entires leftover.
    let pgmData = pgmText.value.split(pattern).filter(i => {
        return i != "";
    });
    let pgmWidth = parseInt(pgmData[1]);
    let pgmHeight = parseInt(pgmData[2]);
    let pgmBrightnessScale = parseInt(pgmData[3]);
    let pixelStep = 255.0 / pgmBrightnessScale;

    // Canvas setup
    let ctx = canvas.getContext('2d');
    let imageData = ctx.getImageData(0, 0, pgmWidth, pgmHeight);
    let data = imageData.data;

    // "reindex" the data array to make looping easier
    pgmData = pgmData.slice(4)

    // Set pixels
    let pixel = 0;
    for (let i = 0; i < pgmData.length * 4; i += 4) {
        data[i] = pgmData[pixel] * pixelStep;
        data[i + 1] = pgmData[pixel] * pixelStep;
        data[i + 2] = pgmData[pixel] * pixelStep;
        data[i + 3] = 255;
        pixel++;
    }

    // All done.  Shazam.
    ctx.putImageData(imageData, 0, 0)
}

## index.html
<html>

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h3>.pgm Viewer</h3>
    <canvas id="raster" width="800" height="600"></canvas>
    <textarea id="image-data"></textarea>
    <br>
    <button onclick="renderImage()">Render</button>
    <script src="imagetool.js"></script>
</body>

</html>

## style.css
canvas {
    border: solid;
    border-width: 1px;
}

button {
    height: 50px;
    width: 200px;
}

textarea {
    width: 200px;
    height: 600px;
    resize: none;
    font-size: 12pt;
    font-family: monospace;
}
	let canvas = document.getElementById('raster');
	let pgmText = document.getElementById('image-data');

	function renderImage() {
	// Get text image data
	let pattern = /[\s\n]/g;

	// Also split on whitespace and throw away any
	// blank entires leftover.
	let pgmData = pgmText.value.split(pattern).filter(i => {
	return i != "";
	});
	let pgmWidth = parseInt(pgmData[1]);
	let pgmHeight = parseInt(pgmData[2]);
	let pgmBrightnessScale = parseInt(pgmData[3]);
	let pixelStep = 255.0 / pgmBrightnessScale;

	// Canvas setup
	let ctx = canvas.getContext('2d');
	let imageData = ctx.getImageData(0, 0, pgmWidth, pgmHeight);
	let data = imageData.data;

	// "reindex" the data array to make looping easier
	pgmData = pgmData.slice(4)

	// Set pixels
	let pixel = 0;
	for (let i = 0; i < pgmData.length * 4; i += 4) {
	data[i] = pgmData[pixel] * pixelStep;
	data[i + 1] = pgmData[pixel] * pixelStep;
	data[i + 2] = pgmData[pixel] * pixelStep;
	data[i + 3] = 255;
	pixel++;
	}

	// All done. Shazam.
	ctx.putImageData(imageData, 0, 0)
	}
	<html>

	<head>
	<link rel="stylesheet" href="style.css">
	</head>

	<body>
	<h3>.pgm Viewer</h3>
	<canvas id="raster" width="800" height="600"></canvas>
	<textarea id="image-data"></textarea>
	<br>
	<button onclick="renderImage()">Render</button>
	<script src="imagetool.js"></script>
	</body>

	</html>
	canvas {
	border: solid;
	border-width: 1px;
	}

	button {
	height: 50px;
	width: 200px;
	}

	textarea {
	width: 200px;
	height: 600px;
	resize: none;
	font-size: 12pt;
	font-family: monospace;
	}