https://serviciiharta.brasovcity.ro/webgis2update/js/__map/wg2.mapPrint.ol2.js

1WebGis.MapPrint = OpenLayers.Class({
2
3    /*********************************************************************************************/
4    /********************************* Variables ************************************************/
5    /********************************************************************************************/
6
7    map: null,
8    printImgDivClass: "printDiv",
9    printImgName: "Harta",
10
11    /********************************************************************************************/
12
13    /*********************************************************************************************/
14    /********************************* Constructor ***********************************************/
15    /*********************************************************************************************/
16
17    initialize: function (_map) {
18        this.map = _map;
19        this.printImgName = _mapControl.config.map.Name == null ? this.printImgName : _mapControl.config.map.Name;
20    },
21
22    /********************************************************************************************/
23
24    //Save map as PNG image 
25    PrintMap: function () {
26
27        //The map div content is copied to the printImgDiv and the printImgDiv's width and height are set according to the  
28        //map div's width and height
29        var mapControlDiv = $("#" + _mapControl.divMap);
30
31        this.getPrintDiv().html(mapControlDiv.html());
32        this.getPrintDiv().height(mapControlDiv.height());
33        this.getPrintDiv().width(mapControlDiv.width());
34
35        //Convert the svg inside the div to canvas 
36        canvgDiv(this.printImgDivClass);
37        //Convert the div html to canvas
38        html2canvas(this.getPrintDiv(), {
39
40            //When the rendering is ready save the canvas content as a png picture on the server and then download it
41            onrendered: function (canvas) {
42
43                if (_mapControl.print.getPrintDiv().width() == 0) {
44                    return;
45                }
46                //The fileName must be unique and that's why are used the curent date and time 
47                var fileName = _mapControl.print.printImgName + "_" + (new Date()).toISOString().replace(/:/g, "").replace(/,/g, "");
48
49                //Get data URI containing a representation of the image in the PNG format
50                var urlImg = canvas.toDataURL("image/png");
51                //Save the image on the server and then download it 
52                $.ajax({

53                    type: "POST",
54                    url: _mapControl.main.url.writeImage + '?imageName=' + fileName + '.png&w=' + mapControlDiv.width() + "&h=" + (mapControlDiv.height() + 60),
55                    data: { 'data': urlImg }
56                }).success(function (msg) {
57                    window.location = _mapControl.main.url.downloadImage + "?imageName=" + fileName + ".png";
58                });
59
60
61                //Clear the content of the printImgDiv and hide it
62                _mapControl.print.getPrintDiv().height("0px");
63                _mapControl.print.getPrintDiv().width("0px");
64                _mapControl.print.getPrintDiv().html('');
65
66            },
67            timeout: 10000,
68            proxy: _mapControl.main.url.proxyImages
69        });
70    },
71
72    /************************************************************************************************/
73
74    getPrintDiv: function () {
75
76        if ($('.' + this.printImgDivClass).length == 0) {
77            $("body").append('<div class="'+this.printImgDivClass+'"></div>');
78        }
79
80        return $('.' + this.printImgDivClass);
81    }
82});