使用Puppeteer获取画布并运行canvas.toDataUrl()
使用Puppeteer获取画布并运行canvas.toDataUrl()
提问于 2022-03-16 20:38:24
我是新来的傻瓜。我正在使用木偶师尝试获取画布并运行toDataUrl()方法。当我控制台记录我所希望的画布时，它似乎得到了正确的dom元素。
_remoteObject: {
type: 'object',
subtype: 'node',
className: 'HTMLCanvasElement',
description: 'canvas',
objectId: '-861002856273230536.3.2'
},但是任何使用$eval运行函数的尝试(不确定这是否正确？)失败了。
const dataUrl = await page.$eval('canvas', (cnv) => {
return cnv.toDataUrl()
});有人能检查一下我的密码吗?看看怎么回事？
const chromium = require('chrome-aws-lambda');
const puppeteer = require('puppeteer-core');
exports.handler = async function (event, context) {
const browser = await puppeteer.launch({
args: chromium.launch,
executablePath:
process.env.CHROME_EXECUTABLE_PATH ||
(await chromium.executablePath),
headless: true,
});
const page = await browser.newPage();
await page.goto('https://qifi.org/');
await page.focus('#ssid');
await page.keyboard.type('homebase');
await page.focus('#key');
await page.keyboard.type('tubulargagy');
await page.click('#generate');
const dataUrl = await page.$$eval('#qrcode + canvas', (cnv) => {
return cnv.map((canvas) => {
return {
data: canvas.toDataUrl(),
};
});
});
// const data = await page.$('canvas');
console.log('data', dataUrl);
// const title = await page.title();
await browser.close();
return {
statusCode: 200,
body: JSON.stringify({
status: 'Ok',
page: {
data: dataUrl,
},
}),
};
};回答 1
Stack Overflow用户
发布于 2022-03-17 03:26:14
#qrcode + canvas是一个错误的选择器。<canvas>是#qrcode元素的子元素，而不是下一个同级。可以使用#qrcode canvas来选择所需的元素。
页面上只有一个QR，所以$$看起来应该是$，尽管这不会导致失败。除了选择器故障之外，代码看起来还可以。
下面是一个最小的、可运行的示例：
const puppeteer = require("puppeteer"); // ^13.5.1
let browser;
(async () => {
browser = await puppeteer.launch({headless: true});
const [page] = await browser.pages();
await page.goto("https://qifi.org/");
await page.type("#ssid", "homebase");
await page.type("#key", "tubulargagy");
await page.click("#generate");
console.log(await page.$eval("#qrcode canvas", el => el.toDataURL()));
})()
.catch(err => console.error(err))
.finally(() => browser?.close())
;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71503972
复制相关文章
相似问题
腾讯云开发者
