Initial commit
This commit is contained in:
Peter Stockings
108
CTAccordion .js
Normal file
108
CTAccordion .js
Normal file
@@ -0,0 +1,108 @@
|
||||
export const steps = [
|
||||
{
|
||||
title: "1. Upload / Input Image",
|
||||
content: `You upload or use a default grayscale image. This is treated like a 2D slice of a physical object.
|
||||
|
||||
The input image is a 2D function:
|
||||
$ f(x, y) $
|
||||
This represents how much X-rays are absorbed at each point.`,
|
||||
},
|
||||
{
|
||||
title: "2. Radon Transform (Generating the Sinogram)",
|
||||
content: `We rotate a virtual X-ray beam around the image and compute line integrals at each angle — simulating how X-rays pass through.
|
||||
|
||||
\\[
|
||||
R(\\theta, s) = \\int_{-\\infty}^{\\infty} f(s \\cos\\theta - t \\sin\\theta,\\ s \\sin\\theta + t \\cos\\theta)\\ dt
|
||||
\\]
|
||||
|
||||
Where: <br>
|
||||
- $\\theta$ = projection angle <br>
|
||||
- $s$ = offset from center
|
||||
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: "3. Sinogram",
|
||||
content: `You now have a 2D image where:
|
||||
- X-axis = detector position
|
||||
- Y-axis = angle
|
||||
Each row is a projection.
|
||||
|
||||
Math:
|
||||
$\text{Sinogram} = \{ R(\theta_1, s), R(\theta_2, s), \dots, R(\theta_n, s) \}$
|
||||
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: "4. Optional: Apply Ramp Filter (FBP)",
|
||||
content: `If enabled, we sharpen each projection before back-projecting by amplifying high-frequency content.
|
||||
|
||||
Math:
|
||||
\\[
|
||||
P(\\omega) = \\mathcal{F}[R(\\theta, s)] \\\\
|
||||
P'(\\omega) = |\\omega| \\cdot P(\\omega) \\\\
|
||||
\\text{Filtered Projection} = \\mathcal{F}^{-1}[P'(\\omega)]
|
||||
\\]
|
||||
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: "5. Back Projection",
|
||||
content: `Each (filtered) projection is \"smeared\" back into the image space along its angle.
|
||||
|
||||
\\[
|
||||
f'(x, y) = \\int_0^{\\pi} R'(\\theta,\\ x \\cos\\theta + y \\sin\\theta)\\ d\\theta
|
||||
\\]`,
|
||||
},
|
||||
{
|
||||
title: "6. Final Reconstruction",
|
||||
content: `After all angles are added up, you get a reconstructed image resembling the original.
|
||||
|
||||
\[
|
||||
f'(x, y) \approx f(x, y)
|
||||
\]`,
|
||||
},
|
||||
];
|
||||
|
||||
export const StepAccordion = {
|
||||
view(vnode) {
|
||||
const index = vnode.attrs.index;
|
||||
const step = steps[index];
|
||||
const expanded = vnode.state.expanded ?? false;
|
||||
|
||||
return m("div", { class: "border-b border-gray-300 py-1 my-2" }, [
|
||||
m(
|
||||
"button",
|
||||
{
|
||||
class:
|
||||
"w-full text-left font-bold text-lg text-gray-800 focus:outline-none",
|
||||
onclick: () => {
|
||||
vnode.state.expanded = !vnode.state.expanded;
|
||||
},
|
||||
},
|
||||
step.title
|
||||
),
|
||||
vnode.state.expanded &&
|
||||
m(
|
||||
"div",
|
||||
{
|
||||
class: "mt-2 text-gray-700 whitespace-pre-wrap text-sm",
|
||||
onupdate: () => {
|
||||
if (window.MathJax) window.MathJax.typesetPromise();
|
||||
},
|
||||
},
|
||||
m.trust(markdownToHTML(step.content))
|
||||
),
|
||||
]);
|
||||
},
|
||||
};
|
||||
|
||||
// You must provide a markdownToHTML() function or use a library like marked.js
|
||||
function markdownToHTML(text) {
|
||||
return text
|
||||
.replace(/\n/g, "<br>")
|
||||
.replace(
|
||||
/!\[(.*?)\]\((.*?)\)/g,
|
||||
'<img alt="$1" src="$2" class="my-2 rounded shadow max-w-full">'
|
||||
);
|
||||
}
|
||||
326
UploadImageComponent.js
Normal file
326
UploadImageComponent.js
Normal file
@@ -0,0 +1,326 @@
|
||||
import {
|
||||
generateSinogram,
|
||||
reconstructImageFromSinogram,
|
||||
convertToGrayscale,
|
||||
} from "./sinogram.js";
|
||||
|
||||
import { StepAccordion } from "./CTAccordion .js";
|
||||
|
||||
export const UploadImageComponent = {
|
||||
hasLoadedInitialImage: false,
|
||||
angleCount: 180,
|
||||
imageUrl:
|
||||
"https://upload.wikimedia.org/wikipedia/commons/e/e5/Shepp_logan.png",
|
||||
sinogramUrl: null,
|
||||
reconstructedUrl: null,
|
||||
defaultImageUrl:
|
||||
"https://upload.wikimedia.org/wikipedia/commons/e/e5/Shepp_logan.png",
|
||||
reconstructionFrames: [],
|
||||
currentFrameIndex: 0,
|
||||
renderMode: "grayscale", // or "heatmap"
|
||||
useFBP: true,
|
||||
|
||||
drawAngleOverlay(theta) {
|
||||
const canvas = this.overlayCanvas;
|
||||
if (!canvas || !this.imageElement) return;
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
const w = canvas.width;
|
||||
const h = canvas.height;
|
||||
const cx = w / 2;
|
||||
const cy = h / 2;
|
||||
const len = Math.max(w, h);
|
||||
|
||||
ctx.clearRect(0, 0, w, h);
|
||||
|
||||
const dx = len * Math.cos(theta);
|
||||
const dy = len * Math.sin(theta);
|
||||
|
||||
ctx.strokeStyle = "rgba(255,0,0,0.8)";
|
||||
ctx.lineWidth = 2;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(cx - dx, cy - dy);
|
||||
ctx.lineTo(cx + dx, cy + dy);
|
||||
ctx.stroke();
|
||||
},
|
||||
|
||||
isOverlayReady() {
|
||||
return (
|
||||
this.overlayCanvas &&
|
||||
this.imageElement &&
|
||||
this.imageElement.complete &&
|
||||
this.imageElement.naturalWidth > 0
|
||||
);
|
||||
},
|
||||
|
||||
async loadAndProcess(url, isUploaded = false) {
|
||||
this.imageUrl = url;
|
||||
this.sinogramUrl = "loading";
|
||||
this.reconstructedUrl = null;
|
||||
m.redraw();
|
||||
|
||||
this.imageUrl = url;
|
||||
let finalUrl = url;
|
||||
|
||||
if (isUploaded) {
|
||||
finalUrl = await convertToGrayscale(url);
|
||||
this.imageUrl = finalUrl;
|
||||
}
|
||||
|
||||
this.sinogramUrl = await generateSinogram(
|
||||
finalUrl,
|
||||
this.angleCount,
|
||||
this.drawAngleOverlay.bind(this)
|
||||
);
|
||||
m.redraw();
|
||||
|
||||
this.reconstructionFrames = [];
|
||||
this.currentFrameIndex = 0;
|
||||
|
||||
this.reconstructedUrl = await reconstructImageFromSinogram(
|
||||
this.sinogramUrl,
|
||||
undefined,
|
||||
(angle, frameUrl) => {
|
||||
this.reconstructionFrames.push(frameUrl);
|
||||
this.currentFrameIndex = this.reconstructionFrames.length - 1;
|
||||
this.reconstructedUrl = frameUrl;
|
||||
m.redraw();
|
||||
},
|
||||
this.renderMode,
|
||||
this.useFBP
|
||||
);
|
||||
},
|
||||
|
||||
oninit() {
|
||||
this.loadAndProcessDebounced = debounce((url) => {
|
||||
this.loadAndProcess(url);
|
||||
}, 300);
|
||||
},
|
||||
|
||||
view() {
|
||||
return m(
|
||||
"div",
|
||||
{
|
||||
class: "flex flex-col items-center min-h-screen bg-gray-100 py-10 px-4",
|
||||
},
|
||||
[
|
||||
// Header
|
||||
m("header", { class: "mb-10 text-center" }, [
|
||||
m(
|
||||
"h1",
|
||||
{ class: "text-4xl font-bold text-gray-800 mb-2" },
|
||||
"Sinogram Generator"
|
||||
),
|
||||
m(
|
||||
"p",
|
||||
{ class: "text-gray-600 text-lg" },
|
||||
"Upload a grayscale image to simulate CT scan projections"
|
||||
),
|
||||
]),
|
||||
|
||||
m(StepAccordion, { index: 0 }),
|
||||
|
||||
// Upload Box
|
||||
m(
|
||||
"div",
|
||||
{
|
||||
class:
|
||||
"w-full max-w-lg border-4 border-dashed border-gray-400 bg-white rounded-xl p-6 text-center hover:bg-gray-50 cursor-pointer transition",
|
||||
ondragover: (e) => e.preventDefault(),
|
||||
ondrop: (e) => {
|
||||
e.preventDefault();
|
||||
const file = e.dataTransfer.files[0];
|
||||
if (file && file.type.startsWith("image/")) {
|
||||
const url = URL.createObjectURL(file);
|
||||
this.loadAndProcess(url, true);
|
||||
}
|
||||
},
|
||||
onclick: () => document.getElementById("fileInput").click(),
|
||||
},
|
||||
[
|
||||
m(
|
||||
"p",
|
||||
{ class: "text-gray-500" },
|
||||
"Click or drag a grayscale image here"
|
||||
),
|
||||
m("input", {
|
||||
id: "fileInput",
|
||||
type: "file",
|
||||
class: "hidden",
|
||||
accept: "image/*",
|
||||
onchange: (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (file && file.type.startsWith("image/")) {
|
||||
const url = URL.createObjectURL(file);
|
||||
this.loadAndProcess(url);
|
||||
}
|
||||
},
|
||||
}),
|
||||
]
|
||||
),
|
||||
|
||||
m(StepAccordion, { index: 1 }),
|
||||
|
||||
// Image Preview
|
||||
m("div", { class: "relative mt-6 w-full max-w-md" }, [
|
||||
m("img", {
|
||||
src: this.imageUrl,
|
||||
class: "rounded shadow max-w-full h-auto mx-auto",
|
||||
onload: (e) => {
|
||||
this.imageElement = e.target;
|
||||
|
||||
// Only start once both image and canvas are ready
|
||||
if (this.isOverlayReady() && !this.hasLoadedInitialImage) {
|
||||
this.hasLoadedInitialImage = true;
|
||||
this.loadAndProcess(this.imageUrl);
|
||||
}
|
||||
},
|
||||
}),
|
||||
m("canvas", {
|
||||
width: this.imageElement?.width || 0,
|
||||
height: this.imageElement?.height || 0,
|
||||
style: "position:absolute; top:0; left:0; pointer-events:none;",
|
||||
oncreate: ({ dom }) => {
|
||||
this.overlayCanvas = dom;
|
||||
|
||||
// Trigger load if image was already ready
|
||||
if (this.isOverlayReady() && !this.hasLoadedInitialImage) {
|
||||
this.hasLoadedInitialImage = true;
|
||||
this.loadAndProcess(this.imageUrl);
|
||||
}
|
||||
},
|
||||
}),
|
||||
]),
|
||||
|
||||
// Angle Slider
|
||||
m("div", { class: "mt-6 w-full max-w-md" }, [
|
||||
m(
|
||||
"label",
|
||||
{ class: "block text-sm font-medium text-gray-700 mb-1" },
|
||||
`Number of angles: ${this.angleCount}`
|
||||
),
|
||||
m("input", {
|
||||
type: "range",
|
||||
min: 5,
|
||||
max: 360,
|
||||
value: this.angleCount,
|
||||
step: 1,
|
||||
class: "w-full",
|
||||
oninput: (e) => {
|
||||
this.angleCount = parseInt(e.target.value, 10);
|
||||
this.loadAndProcessDebounced(this.imageUrl); // reprocess with new angle count
|
||||
},
|
||||
}),
|
||||
]),
|
||||
|
||||
m(StepAccordion, { index: 2 }),
|
||||
|
||||
// Sinogram
|
||||
this.sinogramUrl &&
|
||||
m("div", { class: "mt-10 w-full max-w-md text-center" }, [
|
||||
m(
|
||||
"h2",
|
||||
{ class: "text-xl font-semibold text-gray-700 mb-4" },
|
||||
"Generated Sinogram"
|
||||
),
|
||||
this.sinogramUrl === "loading"
|
||||
? m("p", "Processing...")
|
||||
: m("img", {
|
||||
src: this.sinogramUrl,
|
||||
alt: "Sinogram",
|
||||
class: "rounded shadow max-w-full h-auto mx-auto",
|
||||
}),
|
||||
]),
|
||||
|
||||
m(StepAccordion, { index: 3 }),
|
||||
|
||||
// Reconstructed
|
||||
this.reconstructedUrl &&
|
||||
m("div", { class: "mt-10 w-full max-w-md text-center" }, [
|
||||
m(
|
||||
"h2",
|
||||
{ class: "text-xl font-semibold text-gray-700 mb-4" },
|
||||
"Reconstructed Image (Back Projection)"
|
||||
),
|
||||
m("img", {
|
||||
src: this.reconstructionFrames[this.currentFrameIndex],
|
||||
alt: "Reconstructed",
|
||||
class: "rounded shadow max-w-full h-auto mx-auto",
|
||||
}),
|
||||
m("div", { class: "mt-6 w-full max-w-md text-center" }, [
|
||||
m(
|
||||
"label",
|
||||
{ class: "text-sm text-gray-600 mr-2" },
|
||||
"Render style:"
|
||||
),
|
||||
m(
|
||||
"select",
|
||||
{
|
||||
value: this.renderMode,
|
||||
onchange: (e) => {
|
||||
this.renderMode = e.target.value;
|
||||
this.loadAndProcess(this.imageUrl); // re-render using selected mode
|
||||
},
|
||||
},
|
||||
[
|
||||
m("option", { value: "heatmap" }, "Heatmap"),
|
||||
m("option", { value: "grayscale" }, "Grayscale"),
|
||||
]
|
||||
),
|
||||
]),
|
||||
|
||||
m("div", { class: "mt-4 w-full max-w-md text-left" }, [
|
||||
m("label", [
|
||||
m("input", {
|
||||
type: "checkbox",
|
||||
checked: this.useFBP,
|
||||
onchange: (e) => {
|
||||
this.useFBP = e.target.checked;
|
||||
this.loadAndProcess(this.imageUrl); // regenerate with or without FBP
|
||||
},
|
||||
}),
|
||||
m(
|
||||
"span",
|
||||
{ class: "ml-2 text-gray-700" },
|
||||
"Use Filtered Back Projection (Ramp)"
|
||||
),
|
||||
]),
|
||||
]),
|
||||
|
||||
this.reconstructionFrames.length > 1 &&
|
||||
m("div", { class: "mt-4" }, [
|
||||
m("input", {
|
||||
type: "range",
|
||||
min: 0,
|
||||
max: this.reconstructionFrames.length - 1,
|
||||
value: this.currentFrameIndex,
|
||||
step: 1,
|
||||
oninput: (e) => {
|
||||
this.currentFrameIndex = +e.target.value;
|
||||
this.reconstructedUrl =
|
||||
this.reconstructionFrames[this.currentFrameIndex];
|
||||
},
|
||||
}),
|
||||
m(
|
||||
"p",
|
||||
{ class: "text-sm text-gray-500 mt-1" },
|
||||
`Angle ${this.currentFrameIndex + 1} / ${
|
||||
this.reconstructionFrames.length
|
||||
}`
|
||||
),
|
||||
]),
|
||||
m(StepAccordion, { index: 4 }),
|
||||
]),
|
||||
]
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
function debounce(fn, delay) {
|
||||
let timeout;
|
||||
return (...args) => {
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => fn(...args), delay);
|
||||
};
|
||||
}
|
||||
3
app.js
Normal file
3
app.js
Normal file
@@ -0,0 +1,3 @@
|
||||
import { UploadImageComponent } from "./UploadImageComponent.js";
|
||||
|
||||
m.mount(document.body, UploadImageComponent);
|
||||
92
fbp.js
Normal file
92
fbp.js
Normal file
@@ -0,0 +1,92 @@
|
||||
// Helper: Next power of 2
|
||||
function nextPow2(n) {
|
||||
return 1 << (32 - Math.clz32(n - 1));
|
||||
}
|
||||
|
||||
// Basic Cooley-Tukey FFT (real/imag arrays)
|
||||
function fft1D(re, im) {
|
||||
const N = re.length;
|
||||
if (N <= 1) return;
|
||||
|
||||
// Bit-reversal permutation
|
||||
const rev = new Uint32Array(N);
|
||||
let logN = Math.log2(N);
|
||||
for (let i = 0; i < N; i++) {
|
||||
let x = i,
|
||||
y = 0;
|
||||
for (let j = 0; j < logN; j++) {
|
||||
y <<= 1;
|
||||
y |= x & 1;
|
||||
x >>= 1;
|
||||
}
|
||||
rev[i] = y;
|
||||
}
|
||||
for (let i = 0; i < N; i++) {
|
||||
if (i < rev[i]) {
|
||||
[re[i], re[rev[i]]] = [re[rev[i]], re[i]];
|
||||
[im[i], im[rev[i]]] = [im[rev[i]], im[i]];
|
||||
}
|
||||
}
|
||||
|
||||
// FFT
|
||||
for (let s = 1; s <= logN; s++) {
|
||||
const m = 1 << s;
|
||||
const m2 = m >> 1;
|
||||
const wAngle = (-2 * Math.PI) / m;
|
||||
const cosW = Math.cos(wAngle);
|
||||
const sinW = Math.sin(wAngle);
|
||||
for (let k = 0; k < N; k += m) {
|
||||
let wr = 1,
|
||||
wi = 0;
|
||||
for (let j = 0; j < m2; j++) {
|
||||
const tRe = wr * re[k + j + m2] - wi * im[k + j + m2];
|
||||
const tIm = wr * im[k + j + m2] + wi * re[k + j + m2];
|
||||
const uRe = re[k + j];
|
||||
const uIm = im[k + j];
|
||||
re[k + j] = uRe + tRe;
|
||||
im[k + j] = uIm + tIm;
|
||||
re[k + j + m2] = uRe - tRe;
|
||||
im[k + j + m2] = uIm - tIm;
|
||||
const tempWr = wr;
|
||||
wr = wr * cosW - wi * sinW;
|
||||
wi = tempWr * sinW + wi * cosW;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Inverse FFT
|
||||
function ifft1D(re, im) {
|
||||
// Conjugate
|
||||
for (let i = 0; i < re.length; i++) im[i] = -im[i];
|
||||
fft1D(re, im);
|
||||
// Normalize and re-conjugate
|
||||
const N = re.length;
|
||||
for (let i = 0; i < N; i++) {
|
||||
re[i] /= N;
|
||||
im[i] = -im[i] / N;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply ramp filter in frequency domain
|
||||
export function applyRampFilter(projection) {
|
||||
const N = nextPow2(projection.length);
|
||||
const re = new Float32Array(N);
|
||||
const im = new Float32Array(N);
|
||||
for (let i = 0; i < projection.length; i++) {
|
||||
re[i] = projection[i];
|
||||
}
|
||||
|
||||
fft1D(re, im);
|
||||
|
||||
for (let i = 0; i < N / 2; i++) {
|
||||
const freq = i / N;
|
||||
re[i] *= freq;
|
||||
im[i] *= freq;
|
||||
re[N - i - 1] *= freq;
|
||||
im[N - i - 1] *= freq;
|
||||
}
|
||||
|
||||
ifft1D(re, im);
|
||||
return Array.from(re.slice(0, projection.length));
|
||||
}
|
||||
27
index.html
Normal file
27
index.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Sinogram App</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/mithril/mithril.js"></script>
|
||||
<script>
|
||||
window.MathJax = {
|
||||
tex: {
|
||||
inlineMath: [['$', '$'], ['\\(', '\\)']],
|
||||
displayMath: [['\\[', '\\]']],
|
||||
},
|
||||
svg: { fontCache: 'global' }
|
||||
};
|
||||
</script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body class="bg-gray-100">
|
||||
<script type="module" src="./app.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
209
sinogram.js
Normal file
209
sinogram.js
Normal file
@@ -0,0 +1,209 @@
|
||||
import { applyRampFilter } from "./fbp.js";
|
||||
|
||||
export async function generateSinogram(
|
||||
imageUrl,
|
||||
angles = 180,
|
||||
drawAngleCallback = null
|
||||
) {
|
||||
const image = await loadImage(imageUrl);
|
||||
const size = Math.max(image.width, image.height);
|
||||
const projections = [];
|
||||
|
||||
const canvas = Object.assign(document.createElement("canvas"), {
|
||||
width: size,
|
||||
height: size,
|
||||
});
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
for (let angle = 0; angle < angles; angle++) {
|
||||
const theta = (angle * Math.PI) / angles;
|
||||
|
||||
// 🔁 Call visual overlay for this angle
|
||||
if (drawAngleCallback) drawAngleCallback(theta);
|
||||
|
||||
// (Optional: add delay for animation)
|
||||
await new Promise((r) => setTimeout(r, 0.01));
|
||||
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, size, size);
|
||||
|
||||
// Transform and draw rotated image
|
||||
ctx.save();
|
||||
ctx.translate(size / 2, size / 2);
|
||||
ctx.rotate(theta);
|
||||
ctx.drawImage(image, -image.width / 2, -image.height / 2);
|
||||
ctx.restore();
|
||||
|
||||
// Read pixel data
|
||||
const { data } = ctx.getImageData(0, 0, size, size);
|
||||
|
||||
// Sum brightness vertically (simulate X-ray projection)
|
||||
const projection = [];
|
||||
for (let x = 0; x < size; x++) {
|
||||
let sum = 0;
|
||||
for (let y = 0; y < size; y++) {
|
||||
const i = (y * size + x) * 4;
|
||||
const gray = data[i]; // red channel (since grayscale)
|
||||
sum += gray;
|
||||
}
|
||||
projection.push(sum / size); // normalize
|
||||
}
|
||||
projections.push(projection);
|
||||
}
|
||||
|
||||
// Create sinogram canvas
|
||||
const sinogramCanvas = Object.assign(document.createElement("canvas"), {
|
||||
width: size,
|
||||
height: angles,
|
||||
});
|
||||
const sinCtx = sinogramCanvas.getContext("2d");
|
||||
const imgData = sinCtx.createImageData(size, angles);
|
||||
|
||||
for (let y = 0; y < angles; y++) {
|
||||
for (let x = 0; x < size; x++) {
|
||||
const val = projections[y][x];
|
||||
const i = (y * size + x) * 4;
|
||||
imgData.data[i + 0] = val;
|
||||
imgData.data[i + 1] = val;
|
||||
imgData.data[i + 2] = val;
|
||||
imgData.data[i + 3] = 255;
|
||||
}
|
||||
}
|
||||
|
||||
sinCtx.putImageData(imgData, 0, 0);
|
||||
return sinogramCanvas.toDataURL();
|
||||
}
|
||||
|
||||
export async function reconstructImageFromSinogram(
|
||||
sinogramUrl,
|
||||
size = 256,
|
||||
onFrame = null,
|
||||
renderMode = "heatmap",
|
||||
useFBP = true
|
||||
) {
|
||||
const sinogramImage = await loadImage(sinogramUrl);
|
||||
const canvas = Object.assign(document.createElement("canvas"), {
|
||||
width: sinogramImage.width,
|
||||
height: sinogramImage.height,
|
||||
});
|
||||
const ctx = canvas.getContext("2d");
|
||||
ctx.drawImage(sinogramImage, 0, 0);
|
||||
const sinogramData = ctx.getImageData(
|
||||
0,
|
||||
0,
|
||||
sinogramImage.width,
|
||||
sinogramImage.height
|
||||
).data;
|
||||
|
||||
size = sinogramImage.width; // match size to sinogram resolution
|
||||
const outputCanvas = Object.assign(document.createElement("canvas"), {
|
||||
width: size,
|
||||
height: size,
|
||||
});
|
||||
const outputCtx = outputCanvas.getContext("2d");
|
||||
const accum = new Float32Array(size * size);
|
||||
const center = size / 2;
|
||||
|
||||
const angles = sinogramImage.height;
|
||||
const width = sinogramImage.width;
|
||||
|
||||
for (let angle = 0; angle < angles; angle++) {
|
||||
const theta = (angle * Math.PI) / angles;
|
||||
|
||||
let projection = [];
|
||||
for (let x = 0; x < width; x++) {
|
||||
const i = (angle * width + x) * 4;
|
||||
projection.push(sinogramData[i]);
|
||||
}
|
||||
if (useFBP) {
|
||||
projection = applyRampFilter(projection);
|
||||
}
|
||||
|
||||
for (let y = 0; y < size; y++) {
|
||||
for (let x = 0; x < size; x++) {
|
||||
const x0 = x - center;
|
||||
const y0 = center - y; // flip y
|
||||
const s = Math.round(
|
||||
x0 * Math.cos(theta) + y0 * Math.sin(theta) + width / 2
|
||||
);
|
||||
if (s >= 0 && s < width) {
|
||||
accum[y * size + x] += projection[s];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (onFrame) {
|
||||
// normalize and draw current frame
|
||||
let maxVal = 0;
|
||||
for (let i = 0; i < accum.length; i++) {
|
||||
if (accum[i] > maxVal) maxVal = accum[i];
|
||||
}
|
||||
const imageData = outputCtx.createImageData(size, size);
|
||||
for (let i = 0; i < accum.length; i++) {
|
||||
let val = accum[i] / maxVal;
|
||||
val = Math.min(1, Math.max(0, val));
|
||||
let r, g, b;
|
||||
if (renderMode === "grayscale") {
|
||||
const gray = Math.round(val * 255);
|
||||
r = g = b = gray;
|
||||
} else {
|
||||
[r, g, b] = getHeatmapColor(val);
|
||||
}
|
||||
imageData.data[i * 4 + 0] = r;
|
||||
imageData.data[i * 4 + 1] = g;
|
||||
imageData.data[i * 4 + 2] = b;
|
||||
imageData.data[i * 4 + 3] = 255;
|
||||
}
|
||||
outputCtx.putImageData(imageData, 0, 0);
|
||||
await new Promise((r) => setTimeout(r, 1));
|
||||
onFrame(angle, outputCanvas.toDataURL());
|
||||
}
|
||||
}
|
||||
|
||||
return outputCanvas.toDataURL();
|
||||
}
|
||||
|
||||
// Heatmap mapping: blue → green → yellow → red
|
||||
function getHeatmapColor(value) {
|
||||
const r = Math.min(255, Math.max(0, 255 * Math.min(1, 4 * (value - 0.75))));
|
||||
const g = Math.min(255, Math.max(0, 255 * (4 * Math.abs(value - 0.5) - 1)));
|
||||
const b = Math.min(255, Math.max(0, 255 * (1 - 4 * value)));
|
||||
return [r, g, b];
|
||||
}
|
||||
|
||||
function loadImage(src) {
|
||||
return new Promise((resolve) => {
|
||||
const img = new Image();
|
||||
img.crossOrigin = "anonymous";
|
||||
img.onload = () => resolve(img);
|
||||
img.src = src;
|
||||
});
|
||||
}
|
||||
|
||||
export async function convertToGrayscale(imageUrl) {
|
||||
const image = await loadImage(imageUrl);
|
||||
const canvas = Object.assign(document.createElement("canvas"), {
|
||||
width: image.width,
|
||||
height: image.height,
|
||||
});
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
// Draw original image
|
||||
ctx.drawImage(image, 0, 0);
|
||||
|
||||
// Get pixel data
|
||||
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||||
const data = imageData.data;
|
||||
|
||||
// Convert to grayscale: set R, G, B to luminance
|
||||
for (let i = 0; i < data.length; i += 4) {
|
||||
const r = data[i];
|
||||
const g = data[i + 1];
|
||||
const b = data[i + 2];
|
||||
const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
|
||||
data[i] = data[i + 1] = data[i + 2] = luminance;
|
||||
}
|
||||
|
||||
ctx.putImageData(imageData, 0, 0);
|
||||
return canvas.toDataURL();
|
||||
}
|
||||
Reference in New Issue
Block a user