Я использую opencv для обработки изображений.Они способны очень быстро выполнять CLAHE , чего не удается достичь с помощью графического процессора, используя WebGL.
Но поскольку я продолжаю обрабатывать несколько изображений после загрузки с помощью API-интерфейса HTML5 FileReader, память GPUувеличивается, и в какой-то момент, скажем, после 20-30 изображений он выходит из строя графического процессора и выдает AW, Snap в браузере Chrome.
Код:
`
var applyClahe = function(inputCanvas) {
let src = cv.imread(inputCanvas);
let equalDst = new cv.Mat();
let claheDst = new cv.Mat();
cv.cvtColor(src, src, cv.COLOR_RGBA2GRAY, 0);
cv.equalizeHist(src, equalDst);
let tileGridSize = new cv.Size(8, 8);
// You can try more different parameters
let clahe = new cv.CLAHE(40, tileGridSize);
clahe.apply(src, claheDst);
//cv.imshow('canvasOutput', equalDst);
cv.imshow('canvasOutput', claheDst);
src.delete(); equalDst.delete(); claheDst.delete(); clahe.delete();
};
var applyAHE = function (inputCanvas) {
let src = cv.imread(inputCanvas);
let dst = new cv.Mat();
cv.cvtColor(src, src, cv.COLOR_RGBA2GRAY, 0);
cv.equalizeHist(src, dst);
//cv.imshow('canvasOutput', src);
cv.imshow('canvasOutput', dst);
src.delete(); dst.delete();
}
`
Я использую приведенный выше код и обрабатываю холст каждый раз, когда на экране появляется новое изображение.
HTML-код:
`
<div class="inputoutput">
<canvas id="tempImg" alt="No Image"></canvas>
<div class="caption">
<input type="file" id="fileLoader" name="file" />
<button onclick="applyAHE(_canvas)">AHE</button>
<button onclick="applyClahe(_canvas)">CLAHE</button>
</div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput" ></canvas>
<div class="caption">canvasOutput</div>
</div>
`
Для стороны ЦП существует утечка, при которой простая перезагрузка страницы увеличивает объем используемой памяти минимум на 100 МБ.