Document captureElementImage() approach to OffscreenCanvas#103
Document captureElementImage() approach to OffscreenCanvas#103
Conversation
| readonly attribute unsigned long width; | ||
| readonly attribute unsigned long height; | ||
|
|
||
| // value of `id` attribute on element, or the empty string |
There was a problem hiding this comment.
Agreeing with the idea you shared with me offline, that we should remove the id attribute.
| GPUImageCopyTextureTagged destination); | ||
| } | ||
|
|
||
| [Exposed=(Window,Worker)] |
|
|
||
| // value of `id` attribute on element, or the empty string | ||
| readonly attribute DOMString id; | ||
| }; |
There was a problem hiding this comment.
Stephen mentioned this in the chat; can you add void close();? This mirrors ImageBitmap and allows developers to explicitly release memory, rather than relying on GC.
| @@ -159,10 +180,6 @@ | |||
| }; | |||
There was a problem hiding this comment.
Add ElementImage captureElementImage(Element element);?
| worker.postMessage({ canvas: offscreen }, [offscreen]); | ||
|
|
||
| // 3. Synchronize the element's CSS transform to match its drawn location. | ||
| // 2. Transfer control to the worker. |
There was a problem hiding this comment.
// 2. Transfer control to the worker.
const offscreen = canvas.transferControlToOffscreen();
worker.postMessage({ canvas: offscreen }, [offscreen]);
// 3. Forward ElementImage snapshots to the worker.
canvas.onpaint = (event) => {
const changedMap = new Map();
for (const changedElement of event.changedElements) {
changedMap.set(changedElement.id, canvas.captureElementImage(changedElement));
}
worker.postMessage({ changed: changedMap }, [...changedMap.values()]);
};
| `worker.js`: | ||
|
|
||
| ```javascript | ||
| let ctx; |
There was a problem hiding this comment.
let ctx;
onmessage = ({data}) => {
// 1. Initial setup.
if (data.canvas) {
ctx = data.canvas.getContext('2d');
}
// 2. Respond to changes.
if (data.changed) {
if (data.changed.has('label')) {
let transform = ctx.drawElementImage(data.changed.get('label'), 0, 0);
self.postMessage({id: 'label', transform: transform});
}
if (data.changed.has('input')) {
let transform = ctx.drawElementImage(data.changed.get('input'), 100, 0);
self.postMessage({id: 'input', transform: transform});
}
}
};
2 participants
No description provided.