在OpenLayers4中將地圖及疊加顯示的圖層生成圖片保存到數據庫方法

在調用自己發佈的圖層服務時注意在圖層源屬性中加入跨域。

new ol.layer.Image({
                   source: new ol.source.ImageArcGISRest({
                       ratio: 1,
                       params: {},
                       crossOrigin: 'anonymous',
                       url: "http://10.5.1.186:6080/arcgis/rest/services/thly/thlyfq/MapServer"
                   })
               })

否則在圖片轉換時報錯。

navigator.msSaveBlob(canvas.msToBlob(), 'map.png'); 中提示canvas.msToBlob()發生嚴重性錯誤。

 

openlayers4獲取地圖及疊加圖層的代碼如下：

//*****************************************************************************************************
//*****************************************圖片持久化轉換**********************************************
//*****************************************************************************************************
        function readBlobAsDataURL(blob, callback) {
            var a = new FileReader();
            a.onload = function (e) {
                callback(e.target.result);
            }
            a.readAsDataURL(blob);
        }




        $("#savemap").click(function () {
            map.once('postcompose', function (event) {
                var canvas = event.context.canvas;
                var SLT_pic = new ArrayBuffer();


                if (navigator.msSaveBlob) {
                    var ttt = canvas.msToBlob();
                    


                    readBlobAsDataURL(ttt, function (dataurl)
                    {
                        var name = "testpic.png";
                        post_webservice_async_json({ "oper": "SaveIMG","picname":name,"oge": dataurl });
                    })


                } else {
                    canvas.toBlob(function (blob) {
                        var mmm = blob;
                        alert("Binary pic",mmm);
                    });
                }
            });
            map.renderSync();
        });


        function post_webservice_async_json(paramObj) {
            var returnStr = "";
            var defer = $.Deferred();
            $.ajax({
                type: 'post',
                async: true,
                dataType: 'json',
                url: 'JiangSu.ashx',
                traditional: true,
                data: { paramInfo: JSON.stringify(paramObj) },//圖片轉成二進制長度很大，故採用Json格式進行處理。
                success: function (data) {
                    //alert("保存圖層成功");
                    defer.resolve(data);
                }
            })
            return defer.promise();
        }

 

JiangSu.ashx代碼如下：

 //js通過ajax傳遞參數至該模塊
    public void ProcessRequest (HttpContext context) {
        string res;
        string paramInfo = null;
        paramInfo = context.Request.Form["paramInfo"];
        //圖片讀取
        if (paramInfo != null && paramInfo != "")
        {
            JavaScriptSerializer aa = new JavaScriptSerializer();


            Dictionary<string, string> dic = aa.Deserialize<Dictionary<string, string>>(paramInfo);


            string obj = dic["oge"].Replace(" ", "+").Split(',')[1];


            byte[] array = Convert.FromBase64String(obj);//轉成二進制數組


            string oper = dic["oper"];
            string picname = dic["picname"];


            ////////MemoryStream ms = new MemoryStream(array);

            ////////Image image = new Bitmap(ms);

            ////////image.Save(context.Server.MapPath(@"~1.png"));

          //調用持久化函數，將圖片二維數組進行保存
            res = JS_PicBinaryFunc("SaveCons", oper, picname, array);

}