Potrzebuję przetworzyć piksele z obrazu 1000x1000px * .bmp (~ 1MB) w javascript
W tej chwili jestem nieco zablokowany, ponieważ strona zawiesza się, gdy próbuję zrzucić dane do konsoli .
ważny kod do tej pory:pobierz piksel z bitmapy
var img = new Image();
img.src = 'image.bmp';
context.drawImage(img, 0, 0);
console.log(context.getImageData(0, 0, canvas.height, canvas.width);
myślę, że jest to problem z wydajnością, ale czy jest lepszy sposób, aby uzyskać dostęp do danych pikseli? Naprawdę nie muszę czytać wszystkiego naraz, czytanie pikseli po kolei byłoby również w porządku.
EDIT:
tutaj jest zaktualizowany kod, to wypełnić 2D tablicę z czerwonym wartości obrazu (mam do czynienia z czarnym/białym obrazie, więc to wystarczy)
var img = new Image();
img.src = 'image.bmp';
context.drawImage(img, 0, 0);
var imgData = context.getImageData(0, 0, canvas.height, canvas.width);
var pixel = new Array();
for(i=0;i<canvas.height;i++){
pixel[i] = new Array();
for(j=0;j<canvas.width;j++){
pixel[i][j] = imgData.data[i*canvas.width+j*4];
}
}
//now pixel[y][x] contains the red-value of the pixel at xy in img
żadne problemy z wydajnością :) tylko dziwactwo jest to, że wiersze/kolumny są odwrócone
Głupie pytanie: Czy próbowałeś zrobić to najpierw z małym obrazkiem, żeby to zadziałało? – epascarello
Czy wysyłasz * 1 milion pikseli * do konsoli i zastanawiasz się, dlaczego przeglądarka zawiesza się? Poważnie? –
Pekka: Tak, doszedłem do wniosku, że to był problem z wydajnością, gdybym wiedział, jak uzyskać dostęp do pikseli jeden po drugim, nie zapytałbym. – fruight