Take screenshot

View inC++QMLView on GitHubSample viewer app

Take a screenshot of the map.

screenshot

Use case

GIS users may want to export a screenshot of a map to enable sharing as an image or printing.

How to use the sample

Pan and zoom to find an interesting location. Press Take screenshot, and a screenshot image will display over the map. Note that there may be a small delay if the map is still rendering when you push the button.

How it works

  1. The exportImage function is executed on the MapView.
  2. Once the asynchronous task completes, a QML Image uses the image URL to render an Image on the screen.

Relevant API

  • GeoView.exportImage

Tags

capture, export, image, print, screen capture, screenshot, share, shot

Sample Code

TakeScreenshot.qml
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
// [WriteFile Name=TakeScreenshot, Category=Maps]
// [Legal]
// Copyright 2018 Esri.

// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
// http://www.apache.org/licenses/LICENSE-2.0

// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
// [Legal]

import QtQuick 2.6
import QtQuick.Controls 2.2
import QtGraphicalEffects 1.0
import Esri.ArcGISRuntime 100.15

Rectangle {
    id: rootRectangle
    clip: true
    width: 800
    height: 600

    // Declare a MapView
    MapView {
        id: mapView
        anchors.fill: parent

        Component.onCompleted: {
            // Set the focus on MapView to initially enable keyboard navigation
            forceActiveFocus();
        }

        // Declare a Map
        Map {
            // Add the Imagery basemap
            Basemap {
                initStyle: Enums.BasemapStyleArcGISImageryStandard
            }
        }

        // connect to the exportImageUrlChanged signal
        onExportImageUrlChanged: {
            mapImage.source = mapView.exportImageUrl
            imageRect.visible = true;
            busyIndicator.visible = false;
        }

        Button {
            anchors {
                horizontalCenter: parent.horizontalCenter
                bottom: mapView.attributionTop
                margins: 10
            }
            text: "Take screenshot"
            onClicked: {
                mapView.exportImage();
                busyIndicator.visible = true;
            }
        }
    }

    Rectangle {
        id: imageRect
        anchors.fill: parent
        visible: false
        RadialGradient {
            anchors.fill: parent
            opacity: 0.7
            gradient: Gradient {
                GradientStop { position: 0.0; color: "white" }
                GradientStop { position: 0.7; color: "black" }
            }
        }

        Image {
            id: mapImage
            anchors.centerIn: parent
            width: parent.width * 0.75
            height: parent.height * 0.75

            Rectangle {
                anchors {
                    right: parent.right
                    top: parent.top
                    margins: 10
                }
                width: 28
                height: width
                color: "lightgray"
                radius: 50

                Image {
                    anchors.centerIn: parent
                    width: parent.width * 0.95
                    height: parent.height * 0.95
                    source: "qrc:/Samples/Maps/TakeScreenshot/close.png"
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: imageRect.visible = false;
                }
            }
        }
    }

    BusyIndicator {
        id: busyIndicator
        anchors.centerIn: parent
        visible: false
    }
}

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.