在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);

}

转载自：https://blog.csdn.net/pdw521/article/details/78551937