Here is my code that....
- Handle a base64 screenshot taken by Puppeteer.
- Create an image element.
- Wait for the image onload event.
- set the src attribute of an image to the screenshot.
- Create canvas not attached to DOM and write image to it.
- Stroke two rectangles on the canvas.
- return the canvas data.
async function (rectangle1, rectangle2, screenshot) {
let screenshotHighlighted = await driver.page.evaluate(async function (rectangle1, rectangle2, screenshot) {
let image = new Image();
let imgLoadPromise = async function(){ return new Promise((resolve, reject) => {
image.onload = () => {console.log('loaded'); return resolve};
image.onerror = reject;
});}
image.src = 'data:image/png;base64,' + screenshot;
await imgLoadPromise;
let canvas = document.createElement("CANVAS");
let context = canvas.getContext("2d");
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
context.drawImage(image, 0, 0);
//solid black and dashed red
context.strokeStyle = "black";
context.strokeRect(rectangle1.minX, rectangle1.minY, rectangle1.width, rectangle1.height);
context.setLineDash([5, 10]);
context.strokeStyle = "red";
context.strokeRect(rectangle1.minX, rectangle1.minY, rectangle1.width, rectangle1.height);
context.setLineDash([]);
//solid black and dashed yellow
context.strokeStyle = "black";
context.strokeRect(rectangle2.minX, rectangle2.minY, rectangle2.width, rectangle2.height);
context.setLineDash([5, 10]);
context.strokeStyle = "yellow";
context.strokeRect(rectangle2.minX, rectangle2.minY, rectangle2.width, rectangle2.height);
return canvas.toDataURL();
}, rectangle1, rectangle2, screenshot);
return screenshotHighlighted;
}To save the file in Node.JS
fs.writeFile(path.join(directory,imageFileName),highlightedScreenshot.split(',')[1], 'base64',
function(err) {
if(err) {
console.log('ERROR IN SAVING IMAGE');
console.log(err);
}
});Traversing pixels of an HTML canvas can be found in the following answer