Skip to content
Permalink
Browse files

Add module workers

Closes #550. The Worker and SharedWorker constructors now get an options
object, which can be specified as { type: "module", credentials }, where
credentials specifies the credentials mode used for the initial fetch
and for subsequent imports. (This only applies to module workers; in
the future we could extend it to classic workers if we wished.)

importScripts will always throw a TypeError in modules, per discussion
in the pull request.

The module fetching and execution machinery is entirely reused from that
for <script type="module">. This also refactors the machinery for
fetching a classic worker script out into its own sub-algorithm of the
"Fetching scripts" section.
  • Loading branch information...
domenic committed Feb 1, 2016
1 parent 2a03759 commit e3a5bb757f64374c37d8c4528c01298463ef0b2a
Showing with 233 additions and 44 deletions.
  1. +17 −0 demos/workers/modules/filters.js
  2. +64 −0 demos/workers/modules/page.html
  3. +7 −0 demos/workers/modules/worker.js
  4. +145 −44 source
@@ -0,0 +1,17 @@
export function none() {}

export function grayscale({ data: d }) {
for (let i = 0; i < d.length; i += 4) {
const [r, g, b] = [d[i], d[i + 1], d[i + 2]];

// CIE luminance for the RGB
// The human eye is bad at seeing red and blue, so we de-emphasize them.
d[i] = d[i + 1] = d[i + 2] = 0.2126 * r + 0.7152 * g + 0.0722 * b;
}
};

export function brighten({ data: d }) {
for (let i = 0; i < d.length; ++i) {
d[i] *= 1.2;
}
};
@@ -0,0 +1,64 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>Worker example: image decoding</title>

<label>
Type an image URL to decode
<input type="url" id="image-url" list="image-list">
<datalist id="image-list">
<option value="https://html.spec.whatwg.org/images/drawImage.png">
<option value="https://html.spec.whatwg.org/images/robots.jpeg">
<option value="https://html.spec.whatwg.org/images/arcTo2.png">
</datalist>
</label>

<label>
Choose a filter to apply
<select id="filter">
<option value="none">none</option>
<option value="grayscale">grayscale</option>
<option value="brighten">brighten by 20%</option>
</select>
</label>

<script type="module">
const worker = new Worker("worker.js", { type: "module" });
worker.onmessage = receiveFromWorker;
const url = document.querySelector("#image-url");
const filter = document.querySelector("#filter");
const output = document.querySelector("#output");
url.oninput = updateImage;
filter.oninput = sendToWorker;
let imageData, context;
function updateImage() {
const img = new Image();
img.src = url.value;
img.onload = () => {
output.innerHTML = "";
const canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
context = canvas.getContext("2d");
context.drawImage(img, 0, 0);
imageData = context.getImageData(0, 0, canvas.width, canvas.height);
sendToWorker();
output.appendChild(canvas);
};
}
function sendToWorker() {
worker.postMessage({ imageData, filter: filter.value });
}
function receiveFromWorker(e) {
context.putImageData(e.data, 0, 0);
}
</script>
@@ -0,0 +1,7 @@
import * as filters from "./filters.js";

self.onmessage = e => {
const { imageData, filter } = e.data;
filters[filter](imageData);
self.postMessage(imageData, [imageData.data.buffer]);
};

0 comments on commit e3a5bb7

Please sign in to comment.
You can’t perform that action at this time.