希望對需要的朋友提供參考

本人通過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格式。