Saving Map Snapshot
This week, while in Redlands for a holistic lab session on the Flex API for ArcGIS Server, a user showed me the following gem. Using the new Flash Player 10 FileReference class, you can create an image snapshot of a map component and save it locally to a file, without a server side service. To compile the application using FlexBuilder, you need to adjust your compiler SDK to version 3.2.
Thanks Ofir :-)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:esri="http://www.esri.com/2008/ags"
layout="vertical"
>
<mx:Script>
<![CDATA[
import mx.graphics.ImageSnapshot;
import mx.graphics.codec.JPEGEncoder;
private function clickHandler() : void
{
const decoder: JPEGEncoder = new JPEGEncoder();
map.logoVisible=false;
map.scaleBarVisible=false;
map.zoomSliderVisible = false;
const imageSnapshot:ImageSnapshot = ImageSnapshot.captureImage(map,96,decoder,true);
map.logoVisible=true;
map.scaleBarVisible=true;
map.zoomSliderVisible = true;
const fileReference:FileReference = new FileReference();
fileReference.save(imageSnapshot.data,"map.jpg");
}
]]>
</mx:Script>
<esri:Map id="map">
<esri:ArcGISTiledMapServiceLayer
url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"/>
</esri:Map>
<mx:Button label="Snapshot" click="clickHandler()"/>
</mx:Application>
Thanks Ofir :-)
Comments
I need to capture the image of an application under test but I don't want to be prompted by the file save dialog. Can it be somehow done silently through code? I checked out the FileReference.save() method for options, but it doesn't have the facility to prevent the file dialog box from popping up.
Any ideas? All help will be appreciated! Thanks.
is it possible to export it to others formats, e.g. svg? According to the Flex Reference mx.graphics.codec contains only jpg and png but I wonder if you know any workaround.
Thanks!
Manolo
I have captured image from map object and put captured image in image control but when I tried to print this image, I have found distortion in the image.
I need to save image without distortion.
Note: image control has width and height.
//this is sample code
var bitmapData:BitmapData = ImageSnapshot.captureBitmapData(map);
var encoder:JPEGEncoder = new JPEGEncoder(100);
var bytes:ByteArray = encoder.encode(bitmapData);
imgControl.load(bytes);
Thanks,
Khalid Mohie
Great help. But do you have a recommendation how to save a map snapshot if the ArcGIS Server Map is embedded in a Flex Frontend we have no access to, but want to create the snapshot with option of the REST API? How could that work? How would we need to address the service /active map window with REST and create and save a snapshot?
BR