AhammadaliPK AhammadaliPK - 10 months ago 47
Javascript Question

Esri Take Map Scrrenshots using Javascript

I am trying to generate a pdf report including current map screenshot of ESRI map using JavaScript. Here is my 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);

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.

map.GetCurrentMapScreenShot(function (event) {
var mapScreenShotURL = event.url;
function (mapImageBase64Encoded) {});

and here is the function that converts url to base64image

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;


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.


Answer Source

I resolved the issue almost, Now I am getting the map image that contains map Icons and layer graphics, But unfortunately still getting some junk texts.

I have changed the code as follows.

        template.format = "JPG";
        template.layout = "A4 Landscape",
        template.preserveScale = false;
        template.layoutOptions = {
            "legendLayers": [], // empty array means no legend
            "scalebarUnit": "Miles"