通过Html2Canvas对OpenLayers截图

希望对需要的朋友提供参考

本人通过html2canvas对项目中使用的openlayers叠加的图层进行截图，生成图层数据。

其中对地图上叠加的矢量和栅格图层的截图中矢量截图没什么问题注意添加跨域就行了。

在 source属性中添加crossOrigin: 'anonymous',   即可；

对栅格数据的截图要采用png格式。

cldURL =“http://XXXXXX/XXXX/XX/XXX.png”

如果调用的图片格式为jpg或者其他格式在执行canvas.msToBlob()时会提示存在安全错误。

   html2canvas($('body'), {
                allowTaint: true,
                taintTest: false,
                useCORS: true,
                onrendered: function (canvas) {

                    if (isIE()) {
                        var blob = canvas.msToBlob();
                        navigator.msSaveBlob(blob, name);
                    }
                    canvas.id = "mycanvas";
                    //生成base64图片数据
                    var dataUrl = canvas.toDataURL();
                    ///将每次生成的会商页面保存到数组中待导出调用。但由于单幅会商页面数据量较大仅能保存两张，故舍弃此方法。
                    ///mappic.push({ "oper": "SaveIMG", "picname": name, "oge": dataUrl });

                    //调用webservice进行入库，待导出PPT webservice调用。
                    var myjson = { "oper": "SaveIMG", "picname": name, "oge": dataUrl };
                    var mappic = new Array();
                    mappic.push(myjson);
                    //alert("mytoken:"+mytoken+" myBb:"+myBb);
                    Make_PPT_DB(mappic, mytoken, myBb);
                    myBb = false;
                    //alert("已生成会商页");
                }
            });

调用的静态图层代码如下：

        var new_source = new ol.source.ImageStatic({
            crossOrigin: 'anonymous',
            url: cldURL,
            projection: epsgWMproj,
            imageExtent: CLdextents
        });
        cldlyr.setSource(new_source);

 

        cldlyr = new ol.layer.Image({
            visible: true,
            zIndex: 99991
        });

        map.addLayer(cldlyr);

注意 采用html2canvas进行截图即网络客户端进行截图；

.png:可移植网络图形格式    

.jpg:一般图片格式

截图生成图片可能是因html2canvas支持.png格式而不是.jpg格式。