In a recent project, there is a functional requirement for map printing, which outputs map base maps and overlapping layer services to image preservation.

There are usually two ways to implement this function. One is to use the PrintTask interface provided by ArcGIS API For JS.( https://developers.arcgis.com/javascript/3/jssamples/#search/PrintTask However, this method is applicable to the layer services published by ArcGIS Server. If the bottom map is sky map, Golden map and so on, the output will be blank. The second method is to use the HTML 2 canvas plug-in for general screen capture output. This method is suitable for various types of bottom map services. The map printing function implemented below is also based on HTML 2 canvas plug-in.

The implementation process is also relatively simple, directly paste code.

 html2canvas($("div.map-container"), {
                    useCORS: true,
                    imageTimeout:0,
                    onrendered: function (canvas) {
                        //Sectional transmission of long characters
                        var imgBase64Str = canvas.toDataURL(); // Get the url of the generated image  
                        //Go back to the background and generate pictures
                        $.ajax({
                            type: "POST",
                            url: $tools.getServerBase() + "FileTool/createImgByBase64",
                            dataType: 'json',
                            data: {
                                base64Str: imgBase64Str
                                },
                            success: function (resultObj) {
                                if (resultObj.code == '1') window.open($tools.getServerBase() + resultObj.path);
                                else alert("Screen capture error!" + resultObj.message);
                                unloading();
                            },
                            error: function () {
                                unloading();
                            }
                        });
                    }
                });

 public string createImgByBase64()
        {
            string path = "";
            Dictionary<string,string> resultObj = new Dictionary<string,string>();
            try
            {
                string folder = AppDomain.CurrentDomain.BaseDirectory + "output";
                string savePath = folder + @"\\ouput.jpg";
                string req = Request["base64Str"].Replace("data:image/png;base64,", "");
                byte[] arr = Convert.FromBase64String(req);
                MemoryStream ms = new MemoryStream(arr);
                Bitmap bmp = new Bitmap(ms);
                if (!System.IO.Directory.Exists(folder)) System.IO.Directory.CreateDirectory(folder);
                bmp.Save(savePath, System.Drawing.Imaging.ImageFormat.Jpeg);
                ms.Close();
                path = "output//ouput.jpg";
                resultObj.Add("code", "1");
                resultObj.Add("path", path);
            }
            catch (Exception ex)
            {
                resultObj.Add("code", "0");
                resultObj.Add("message", ex.Message);
            }
            JavaScriptSerializer jsonSerializer = new JavaScriptSerializer();
            string s = jsonSerializer.Serialize(resultObj);
            return s;
        }

In the process of realizing the function, there are some problems. First, there are some problems in downloading screenshots directly by using a tag at the front end. Then, it turns to transfer the base64 string to the backend to generate the picture path and return to the front end. At this time, it encounters the problem of too long url string, which requires the following settings in webConfig:

<system.web>
    <authentication mode="None"/>
    <compilation debug="true" targetFramework="4.5.2"/>
    <httpRuntime targetFramework="4.5.2" maxUrlLength="10999" maxQueryStringLength="2097151" maxRequestLength="10000" useFullyQualifiedRedirectUrl="true"/>
  </system.web>

  <security>
       <requestFiltering>
       <requestLimits maxUrl="10999" maxQueryString="2097151" />
       </requestFiltering>
   </security>