MapView.takeScreenshot() blank on iOS

ToddAtkins — Sat, 11 Dec 2021 16:21:58 GMT

I've got a few different app I've developed that use the .takeScreenshot() method to export an image of the map. Everything works as expected on the desktop, but on iOS (both 12 and 13) and both iPad and iPhone devices, the screenshot is just a blank black image.

I'm using the dataUrl property of the screenshot result to generate a pdf using jspdf. But even just opening the dataUrl in the browser shows me a blank black image. I've seen some references on the web that if the base64 string isn't divisible by 4 then it won't render, but that isn't the case here since the string is divisible by 4.

Wondering if this is a bug with iOS, the JS API, or my implementation. It works fine in Safari for the desktop along with the other desktop browsers so I lean towards an iOS issue, but maybe somebody else out there has run across this and has a working solution...

Specs:

iOS 12 & 13

iPhone X

JS API 4.11 & 4.12

const options = {
    height: 8.5 * dpi,
    width: 11 * dpi
} as __esri.MapViewTakeScreenshotOptions;

try {
    const screenshot = await props.view.takeScreenshot(options);
} catch (error) {
    console.error(error);
}
‍‍‍‍‍‍‍‍‍‍

Re: MapView.takeScreenshot() blank on iOS

ToddAtkins — Sat, 11 Dec 2021 16:22:00 GMT

So it is of course my implementation that was at fault here. Basically I was trying to be too clever with the DPI and the resulting image size was too big (I guess) when on ios. Instead, I set the screenshot options to be something like below which works how I was expecting (isLandsape is just a boolean I calculate elsewhere which is true if width > height and I'm setting the height and width to be appropriate for US Letter sized sheets):

const options = {
    height: isLandscape ? props.view.height * window.devicePixelRatio : (11 / 8.5) * props.view.width * window.devicePixelRatio,
    width: isLandscape ? (11 / 8.5) * props.view.height * window.devicePixelRatio : props.view.width * window.devicePixelRatio
} as __esri.MapViewTakeScreenshotOptions;‍‍‍‍

Ultimately i'm converting this image to a pdf and overlaying some logos and it's working beautifully now.

topic Re: MapView.takeScreenshot() blank on iOS in ArcGIS JavaScript Maps SDK Questions

MapView.takeScreenshot() blank on iOS

Re: MapView.takeScreenshot() blank on iOS