Отображение матрицы / изображения с плавающей точкой с использованием HTML5 Canvas

Question

Я ищу способ использовать элемент холста HTML5 для отображения изображения с плавающей точкой. Рассмотрим изображение в оттенках серого, где значения не являются 8-битными или 16-битными целыми числами, но являются числами с плавающей точкой (или двойными числами) Я хотел бы иметь решение javascript / html5 для отображения изображения в браузере с использованием карты цветов. Кроме того, я хотел бы, чтобы пользователь мог в интерактивном режиме регулировать минимальное и максимальное значение.

Эта операция довольно распространена в научных программах для обработки изображений, таких как ImageJ, но я не нашел решения javascript / html5. Pixastic , кажется, находится на правильном пути для этого, но больше ориентируется на обработку цветных изображений.

Любые идеи, заранее спасибо

Answer 1

Я думаю, у меня была такая же потребность в работе. Сначала я бы сказал, что я не предлагаю библиотечное решение, но я расскажу вам, как я это кодирую.

Я выбираю создание холста цветовой карты с использованием линейного градиента холста.

Чтобы применить этот градиент к моей картинке, я просто вычисляю минимальное / максимальное значение, которое мне нужно представить, а затем я искал для каждого значения, какие цвета соответствуют, учитывая мой линейный градиент.

Моя картинка была включена в холст с помощью drawImage.

Затем я изменил цвет каждого пикселя, используя метод canvasPixel для массива данных.

Для интерактивного перемещения карты цветов я выбрал ползунок JqueryUi.

Все это связано с моим кодом, и это было немного долго.

Что ж, я добавил несколько более сложных вещей, потому что пользователь может изменять цвет linearGradient с помощью плагина Jquery colorPicker, но это более или менее то, что вы хотите?

Надеюсь, я отвечу на ваш вопрос. Удачи.