Take Screenshot

ExeOutput for PHP
1

Hi, is there a way to programatically take a “screenshot” of the window contents?

(Need to capture only Exe window’s contents, the entire screen is not needed).

It could be any HEScript function/code or maybe any javascript thing.

According to some SO posts, this is possible with some libraries like html2canvas, but they use the HTML of the DOM elements and render an almost same image of the contents on a canvas.

It would be really great if this is possible natively (i. e. just like we press Print Screen key on keyboard).

2

Maybe in the future, why not. I put your request on the TODO list.

3

I managed to save the screenshot with pure JS, here it is!

    async function takeScreenshotStream() {
// see: [https://developer.mozilla.org/en-US/docs/Web/API/Window/screen](https://developer.mozilla.org/en-US/docs/Web/API/Window/screen)
    const width = screen.width * (window.devicePixelRatio || 1)
const height = screen.height * (window.devicePixelRatio || 1)
const errors = []
let stream
try {
// for electron js
stream = await navigator.mediaDevices.getUserMedia({
audio: false,
video: {
mandatory: {
chromeMediaSource: 'screen',
minWidth : width,
maxWidth : width,
minHeight : height,
maxHeight : height,
},
},
})
} catch (ex) {
errors.push(ex)
}
if (errors.length) {
console.debug(...errors)
}
return stream
}
async function takeScreenshotCanvas() {
const stream = await takeScreenshotStream()
if (!stream) {
return null
}
// from: [https://stackoverflow.com/a/57665309/5221762](https://stackoverflow.com/a/57665309/5221762)
    const video = document.createElement('video')
const result = await new Promise((resolve, reject) => {
video.onloadedmetadata = () => {
video.play()
video.pause()
// from: [https://github.com/kasprownik/electron-screencapture/blob/master/index.js](https://github.com/kasprownik/electron-screencapture/blob/master/index.js)
            const canvas = document.createElement('canvas')
canvas.width = video.videoWidth
canvas.height = video.videoHeight
const context = canvas.getContext('2d')
// see: [https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement)
            context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight)
resolve(canvas)
}
video.srcObject = stream
})
stream.getTracks().forEach(function (track) {
track.stop()
})
return result
}
// from: [https://stackoverflow.com/a/46182044/5221762](https://stackoverflow.com/a/46182044/5221762)
function getPngBlob(canvas) {
return new Promise((resolve, reject) => {
// docs: [https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob)
        canvas.toBlob(blob => resolve(blob), 'image/png', 1)
})
}
async function takeScreenshotPngBlob() {
const canvas = await takeScreenshotCanvas()
if (!canvas) {
return null
}
return getPngBlob(canvas)
}
takeScreenshotPngBlob().then(r=>{
let url = URL.createObjectURL(r);
let tempLink = document.createElement('a');
tempLink.setAttribute('href', url);
tempLink.setAttribute('download', 'Screenshot.png');
tempLink.click();
})

This code prompts to save it as a PNG file, but you can also use the Blob to do other things as you like!

1 Like
5

Great, thanks! We’ll try to mention it into the doc.