JavaScript. Подробное руководство, 6-е издание

Флэнаган Дэвид

var canvas = document.createElement("canvas");

canvas.width = img.width;

canvas.height = img.height;

// Скопировать изображение в холст и извлечь его пикселы

var context = canvas.getContext("2d");

context.drawImage(img, 0, 0);

var pixels = context.getImageData(0,0,img.width,img.height)

//

Отправить пикселы фоновому потоку выполнения

var worker = new Worker("SmearWorker.js"); // Создать фоновый поток

worker.postMessage(pixels); // Скопировать и отдать пикселы

// Зарегистрировать обработчик для получения ответа от фонового потока

worker.onmessage = function(e) {

var smeared_pixels = e.data; // Пикселы, полученные от потока

context.putImageData(smeared_pixels, 0, 0); // Скопировать в холст

img.src = canvas.toDataURL; // А затем в изображение

worker.terminate; // Остановить поток

canvas.width = canvas.height = 0; // Освободить память

}

}

В примере 22.7 приводится программный код реализации фонового потока, используемого в примере 22.6. Основу этого примера составляет функция обработки изображения: модифицированная версия примера 21.10. Обратите внимание, что этот пример настраивает свою инфраструктуру обмена сообщениями единственной строчкой программного кода: обработчик события onmessage просто накладывает эффект смазывания на изображение и сразу же отправляет его обратно.

Пример 22.7. Обработка изображения в фоновом потоке выполнения

// Получает объект ImageData от основного потока выполнения, обрабатывает его

// и отправляет обратно

onmessage = function(e) { postMessage(smear(e.data)); }

// Смазывает пикселы в ImageData вправо, воспроизводя эффект быстрого движения.

// При обработке больших изображений этой функции приходится выполнять огромный объем

// вычислений, что может вызвать эффект подвисания пользовательского интерфейса,

// если использовать ее в основном потоке выполнения.

function smear(pixels) {

var data = pixels.data,

width = pixels.width,

height = pixels.height;

var n = 10, m = n-1; // Нем больше n, тем сильнее эффект смазывания

for(var row = 0; row < height; row++) { // Для каждой строки

var і = row*width*4 +4; //

Индекс 2-го пиксела

for(var col = 1; col < width; col++, і += 4) { // Для каждого столбца

data[i] = (data[i] + data[i-4]*m)/n; // Красная составляющая

data[i+1] = (data[i+1] + data[i-3]*m)/n; // Зеленая

data[i+2] = (data[i+2] + data[i-2]*m)/n; // Синяя

data[i+3] = (data[i+3] + data[i-1]*m)/n; // Альфа-составляющая

}

}

return pixels;

}

Обратите внимание, что программный код в примере 22.7 может обрабатывать любое количество изображений, которые будут отправлены ему. Однако для простоты пример 22.6 создает новый объект

Worker

для обработки каждого изображения. Чтобы не плодить фоновые потоки, которые ничего не делают в ожидании новых сообщений, по завершении обработки изображения работа фонового потока завершается вызовом метода

terminate.

Следующий пример демонстрирует, как с помощью фоновых потоков выполнения можно писать синхронный программный код и безопасно использовать его в клиентских сценариях на языке JavaScript. В разделе 18.1.2.1 было показано, как с помощью объекта

XMLHttpRequest

выполнять синхронные НТТР-запросы, и говорилось, что такой способ его использования в основном потоке выполнения является не лучшим решением. Однако в фоновом потоке вполне оправданно выполнять синхронные запросы, и в примере 22.8 демонстрируется реализация фонового потока выполнения, которая выполняет именно такие запросы. Его обработчик события

onmessage

принимает массив URL-адресов, использует синхронный прикладной интерфейс объекта

XMLHttpRequest

для извлечения их содержимого и затем посылает полученное текстовое содержимое в виде массива строк обратно основному потоку выполнения. Или, если какой-либо HTTP-запрос потерпит неудачу, возбуждает исключение, которое распространится до обработчика

onerror

объекта

Worker

.

Отладка фоновых потоков выполнения

Одним из прикладных интерфейсов, недоступных в объекте

WorkerGlobalScope

(по крайней мере, на момент написания этих строк), является прикладной интерфейс доступа к консоли и одна из самых ценных его функций -

console.log.

Фоновые потоки не могут выводить текст в консоль и вообще не могут взаимодействовать с документом, поэтому их отладка может оказаться весьма трудным делом. Если фоновый поток возбудит исключение, основной поток получит событие «error» в объекте

Worker

. Но чаще бывает необходимо иметь в фоновом потоке хоть какой-нибудь способ выводить отладочные сообщения, которые будут видимы в веб-консоли броузера. Один из самых простых способов добиться этого - изменить протокол передачи сообщений, используемый для взаимодействия с фоновым потоком, чтобы он мог посылать отладочные сообщения. Так, в примере 22.6 можно было бы вставить следующий программный код в начало обработчика событий

onmessage

: