Google Map not appearing in the Screenshot
Opened this issue · 5 comments
Google map uses a canvas of type "webgl2" which cannot be captured unless preserveDrawingBuffer
is set to true
when the canvas context is created.
You can use the workaround in https://stackoverflow.com/a/55762772
@leonzdev hi checked out the link you shared, tried to implement it didnt work, can you show a snippet of it being used in a react/nextjs component?
I have a injectHacks.ts
with
// @ts-nocheck
// source: https://stackoverflow.com/a/55762772
HTMLCanvasElement.prototype.getContext = function(origFn) {
return function(type, attribs) {
attribs = attribs || {};
if (type === 'webgl' || type === 'webgl2') {
attribs.preserveDrawingBuffer = true;
}
return origFn.call(this, type, attribs);
};
}(HTMLCanvasElement.prototype.getContext);
export {}
Then in my App.tsx
// other imports
import ‘./injectHacks’;
// other stuff
function App() {
// some React code
}
export default App;
The key is to override HTMLCanvasElement.prototype.getContext
before your map components load.
I think its working.. tho I'm getting another error. its probably because of the library im using.. gonna post the error here just in case someone knows the solution
Uncaught TypeError: Converting circular structure to JSON --> starting at object with constructor 'Window' --- property 'window' closes the circle at JSON.stringify (<anonymous>) at en-tv-chart.132c7060.html:1:1253 at en-tv-chart.132c7060.html:1:1279 at en-tv-chart.132c7060.html:1:7330
We can't take screenshots of Google Maps. This is because the google map component behind the scene is wrapped in an iframe tag which is a separate document hence the package is not able to take its screenshot.