Skip to content

Instantly share code, notes, and snippets.

@mikezila

mikezila/imagetool.js

Created May 4, 2017 05:35
Show Gist options
  • Save mikezila/796dcd7a6ab86513a439a8bc1386580a to your computer and use it in GitHub Desktop.
Save mikezila/796dcd7a6ab86513a439a8bc1386580a to your computer and use it in GitHub Desktop.
Download ZIP
Simple pgm viewer. Doesn't support comments in the image data.
Raw
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)
}
Raw
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>
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment