Я работаю над веб-приложением для сравнения изображений с кукловодом, и вот что я пытаюсь сделать:
- откройте страницу кукловода, перейдите на страницу рендеринга с помощью веб-компонента программы просмотра моделей (API веб-графики Google).
- визуализировать что-либо с помощью программы просмотра моделей
- сделайте снимок экрана rgba после завершения рендеринга (используйте page.screenshot ())
- закрыть страницу.
- возьмите снимок экрана в качестве аргумента API сравнения изображений (ввод должен быть либо типом буфера nodejs, либо файлом png)
Все работает хорошо, за исключением 3-го шага, потому что при использовании метода page.screenshot () выходной файл png имеет формат RGB, а не RGBA. Я не нашел способа сделать это, и вот два решения, которые я попробовал:
Решение 1: api средства просмотра моделей имеет встроенную функцию, называемую toBlob (), которая возвращает объект Blob со всеми данными RGBA необходимого мне компонента средства просмотра моделей. Я знаю, как преобразовать объект Blob в буфер, поэтому это должно сработать, если я получу объект Blob. Вот как я пытаюсь получить объект blob.
const Blob = await page.evaluate(async () => {
const modelViewer = document.querySelector('#modelViewer');
const Blob = await (modelViewer as any).toBlob();
//console.log(Blob) this shows a correct Blob object under puppteer browser's devtool
// in order to return something, i have convert Blob object all the way to a unit8Array
//const arrayBuffer = await new Response(Blob).arrayBuffer();
//const unit8Array = new Uint8Array(arrayBuffer);
return Blob;
});
Проблема в том, что объект Blob, возвращенный из page.evaluate (), пуст. Я дважды проверил объект Blob внутри функции Assessment (), и он правильно зарегистрирован в devtool браузера Puppteer. Я думаю, что причина в том, что eval () требует, чтобы возвращаемое значение было сериализуемым, а объект Blob, возможно, нет. Чтобы вернуть что-то непустое в контекст приложения, мне нужно полностью преобразовать это в unit8Array. Но я не нашел способа преобразовать unit8Array в объект Buffer, и даже если он есть, я думаю, это может быть очень неэффективным, потому что объект Blob, содержащий всю информацию о пикселях, может быть очень большим и, вероятно, будет много вычислений. в процессе конвертации.
Решение 2: я думаю об использовании page.evaluateHandle () для получения jsHandle компонента просмотра модели и запуска goBlob в контексте моего приложения, исправьте меня, если я ошибаюсь, но я думаю, что jsHandle только предполагается использовать в контексте марионетки, не так ли? Так что это решение должно быть неправильным
Следовательно, можно ли улучшить какое-либо мое решение? Или есть решение получше? Спасибо !
