Esri Take Map Scrrenshots using Javascript
<p>I am trying to generate a pdf report  including current map screenshot of <strong>ESRI map</strong> using JavaScript. Here is my code.</p>

<pre><code>    var getCurrentMapScreenShot = function (success, error) {
                esriLoader.Config.defaults.io.proxyUrl = myAppSettingsModel.SettingsModel.MapSettings.AGSProxyURL;
                esriLoader.Config.defaults.io.alwaysUseProxy = true;
                var printTask = new esriLoader.PrintTask("myexportUrl");

                var template = new esriLoader.PrintTemplate();
                template.exportOptions = {
                    width: 600,
                    height: 600,
                    dpi: 96
                };
                template.format = "image/png";
                template.layout = "MAP_ONLY",
                template.preserveScale = true;
                template.layoutOptions = {
                    legendLayers: [], // empty array means no legend
                    scalebarUnit: "Miles"
                };
                var params = new esriLoader.PrintParameters();

                params.map = map;
                params.template = template;

                printTask.execute(params, success, error);
}
</code></pre>

<p>This function will give you an event that contains a url , Then I am passing this url to get map base64 data.
Here is the function calling.</p>

<pre><code>map.GetCurrentMapScreenShot(function (event) {
                var mapScreenShotURL = event.url;
                Factory.GetBase64ForImgUrl(mapScreenShotURL, 
                function (mapImageBase64Encoded) {});
</code></pre>

<p>and here is the function that converts url to base64image</p>

<pre><code>function getBase64ForImgUrl(url, callback, outputFormat) {
            console.log("#################### Summary Report Image " + url);

            var canvas = document.createElement('CANVAS');
            var ctx = canvas.getContext('2d');
            var img = new Image;
            img.crossOrigin = 'Anonymous';
            img.onload = function () {
                canvas.height = img.height;
                canvas.width = img.width;
                ctx.drawImage(img, 0, 0);
                var dataURL = canvas.toDataURL(outputFormat || 'image/png');
                callback.call(this, dataURL);
                // Clean up
                canvas = null;
            };
            img.src = url;

        }
</code></pre>

<p>I am getting base64 image data of the map , But the problem is that, I am getting blurred image of the map with no feature layers and no icons..And also map contains some junk texts.</p>

<p>Thanks</p>