Use this skill when the user wants a browser screenshot.
load helper
- Import
/mod/_core/skillset/ext/skills/screenshots/screenshots.js
- The helper lazy-loads
html2canvas for you
- Prefer these exports instead of pasting the whole capture script inline
- If you need lower-level control, inspect
/mod/_core/skillset/ext/skills/screenshots/screenshots.js and pass custom html2canvasOptions
helpers
await import("/mod/_core/skillset/ext/skills/screenshots/screenshots.js")
takeScreenshot({ target?, filename?, type?, quality?, html2canvasOptions? }) -> { canvas, blob, width, height, type, filename }
screenshotBase64(options) -> { base64, width, height, type, filename }
screenshotDownload("name.png", options?) -> downloads and returns { downloaded: true, filename, width, height, type }
target
- Omit
target for a full-page document.body screenshot
target may be a CSS selector string or a DOM element
- Default file name is
page-content.png
guidance
- Prefer
screenshotDownload(...) when the user wants an actual image file
- Use
screenshotBase64(...) only when JavaScript needs inline image data, because the return value is large
examples
Taking a low-level screenshot result
_____javascript
const screenshots = await import("/mod/_core/skillset/ext/skills/screenshots/screenshots.js")
return await screenshots.takeScreenshot()
Downloading a full-page screenshot
_____javascript
const screenshots = await import("/mod/_core/skillset/ext/skills/screenshots/screenshots.js")
return await screenshots.screenshotDownload("page-content.png")
Capturing a specific panel
_____javascript
const screenshots = await import("/mod/_core/skillset/ext/skills/screenshots/screenshots.js")
return await screenshots.screenshotDownload("panel.png", {
target: "[data-panel]"
})
Getting base64 image data
_____javascript
const screenshots = await import("/mod/_core/skillset/ext/skills/screenshots/screenshots.js")
return await screenshots.screenshotBase64()
1---2name: screenshots3description: Capture the current page or a DOM target as a PNG4---56Use this skill when the user wants a browser screenshot.78load helper9- Import `/mod/_core/skillset/ext/skills/screenshots/screenshots.js`10- The helper lazy-loads `html2canvas` for you11- Prefer these exports instead of pasting the whole capture script inline12- If you need lower-level control, inspect `/mod/_core/skillset/ext/skills/screenshots/screenshots.js` and pass custom `html2canvasOptions`1314helpers15- `await import("/mod/_core/skillset/ext/skills/screenshots/screenshots.js")`16- `takeScreenshot({ target?, filename?, type?, quality?, html2canvasOptions? })` -> `{ canvas, blob, width, height, type, filename }`17- `screenshotBase64(options)` -> `{ base64, width, height, type, filename }`18- `screenshotDownload("name.png", options?)` -> downloads and returns `{ downloaded: true, filename, width, height, type }`1920target21- Omit `target` for a full-page `document.body` screenshot22- `target` may be a CSS selector string or a DOM element23- Default file name is `page-content.png`2425guidance26- Prefer `screenshotDownload(...)` when the user wants an actual image file27- Use `screenshotBase64(...)` only when JavaScript needs inline image data, because the return value is large2829examples30Taking a low-level screenshot result31_____javascript32const screenshots = await import("/mod/_core/skillset/ext/skills/screenshots/screenshots.js")33return await screenshots.takeScreenshot()3435Downloading a full-page screenshot36_____javascript37const screenshots = await import("/mod/_core/skillset/ext/skills/screenshots/screenshots.js")38return await screenshots.screenshotDownload("page-content.png")3940Capturing a specific panel41_____javascript42const screenshots = await import("/mod/_core/skillset/ext/skills/screenshots/screenshots.js")43return await screenshots.screenshotDownload("panel.png", {44 target: "[data-panel]"45})4647Getting base64 image data48_____javascript49const screenshots = await import("/mod/_core/skillset/ext/skills/screenshots/screenshots.js")50return await screenshots.screenshotBase64()