MapView.takeScreenshot() blank on iOS

383
1
Jump to solution
09-23-2019 01:28 PM
ToddAtkins
Occasional Contributor

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);
}
Tags (3)
0 Kudos
1 Solution

Accepted Solutions
ToddAtkins
Occasional Contributor

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.

View solution in original post

1 Reply
ToddAtkins
Occasional Contributor

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.