openlayer4地圖及圖層導出圖片問題小結

直接使用ol4中的地圖導出功能在我們的項目中可能會存在跨域問題，導致地圖不能正常的轉爲二進制。

解決方法：

1 //自定義圖層中添加crossOrigin，具體如下：
        var tdtTerLayer = new ol.layer.Tile({
            visible: true,
            source: new ol.source.XYZ({
                crossOrigin: 'anonymous',
                url: tdtter
            })
        });


        var edge = new ol.layer.Image({
            source: new ol.source.ImageArcGISRest({
                crossOrigin: 'anonymous',
                ratio: 1,
                params: {},
                url: jsmap
            })
        });

2//疊加顯示

var map = new ol.Map({
            controls: ol.control.defaults().extend([
                new ol.control.ScaleLine({}),
                new ol.control.ZoomSlider({}),
                new ol.control.ZoomToExtent({})]),
            target: 'map',
            layers: [
             tdtTerLayer, edge
           //  openstreemap,contries
            ],
            view: new ol.View({
                maxZoom: 19,
                minZoom: 6,
                projection: epsgWMproj,
                center: ol.proj.transform([120.3351, 31.1918], epsg84proj, epsgWMproj),
                zoom: 8
            })
        });

3//導出函數

       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: 'Test.ashx',
                traditional: true,
                data: { paramInfo: JSON.stringify(paramObj) },
                success: function (data) {
                    //alert("保存圖層成功");
                    defer.resolve(data);
                }
            })
            return defer.promise();
        }

4//圖片保存

 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(@"~2.png"));
        }