title: Esri Take Map Scrrenshots using Javascript
body: <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>