Как оптимизировать производительность рендеринга холста для обнаружения краев на изображениях? ⇐ Javascript

[Anonymous]

Я работаю над проектом, который отображает края изображения на холсте HTML с помощью JavaScript. Несмотря на ряд оптимизаций, производительность не идеальна, особенно при работе с большими изображениями или динамическими обновлениями.
Мой подход предполагает уменьшение изображения, применение фильтра оттенков серого и использование порога яркости для обнаружить краевые точки. Эти точки затем динамически отображаются на холсте. Вот основы:

Код: Выделить всё

const scale = 0.25;

const brightnessThreshold = 130;

const canvas = document.getElementById("canvas");

const ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

const img = new Image();

img.crossOrigin = "anonymous";

img.src = 'https://example.com/image.jpg';

img.onload = () => {

const smallCanvas = document.createElement('canvas');

const smallCtx = smallCanvas.getContext('2d');

smallCanvas.width = img.width * scale;

smallCanvas.height = img.height * scale;

smallCtx.filter = 'grayscale(1)';

smallCtx.drawImage(img, 0, 0, smallCanvas.width, smallCanvas.height);

const imgData = smallCtx.getImageData(0, 0, smallCanvas.width, smallCanvas.height).data;

const points = [];

for (let i = 0; i < smallCanvas.width * smallCanvas.height; i++) {

const brightness = imgData[i * 4]; // Single channel (grayscale)

if (brightness < brightnessThreshold) {

const x = (i % smallCanvas.width) / smallCanvas.width * canvas.width;

const y = Math.floor(i / smallCanvas.width) / smallCanvas.height * canvas.height;

points.push({ x, y });

}

}

renderPoints(points);

};

function renderPoints(points) {

points.forEach(point => {

ctx.fillStyle = "black";

ctx.fillRect(point.x, point.y, 1, 1);

});

}

Процесс обнаружения и рендеринга краев становится медленнее при использовании больших изображений или высокой плотности краевых точек, несмотря на такие оптимизации, как масштабирование и фильтры оттенков серого.
Кроме того, проект включает дополнительные анимации (например, эффект пишущей машинки для наложения текста), что еще больше нагружает конвейер рендеринга.
Какие методы или оптимизации могут улучшить производительность рендеринга холста для обнаружения краев?
Есть ли алгоритмические корректировки или Подходы с ускорением на графическом процессоре (например, WebGL), которые можно интегрировать в этот рабочий процесс для повышения производительности?
Мне нужна техническая информация или лучшие практики, а не рекомендации для библиотек или внешних инструментов. .
Надеюсь, это соответствует правилам.
С уважением,
Конан

Подробнее здесь: https://stackoverflow.com/questions/793 ... -in-images