https://www.sgi-network.org/js/saveDivAsPng.js

1(function() {
2
3	var doctype = '';
4
5	function inlineImagesDiv(callback) {
6
7		var images = document.querySelectorAll('svg image');
8		var left = images.length;
9		if(left == 0){ callback(); }
10
11		for(var i = 0; i < images.length; i++) {
12			var image = images[i];
13			var canvas = document.createElement('canvas');
14			var ctx = canvas.getContext('2d');
15			var img = new Image();
16			img.src = image.getAttribute('xlink:href');
17
18			img.onload = function() {
19				canvas.width = img.width;
20				canvas.height = img.height;
21				ctx.drawImage(img, 0, 0);
22				image.setAttribute('xlink:href', canvas.toDataURL('image/png'));
23				left--;
24				if (left == 0){ callback(); }
25			}
26
27		}
28
29	}
30
31	window.saveDivAsPng = function(el, name, scaleFactor, titl, sour, view, head){
32
33		scaleFactor = scaleFactor || 1;
34
35		inlineImagesDiv(function(left) {
36
37			var outer = document.createElement("div");
38			var clone = el.cloneNode(true);
39
40			// SET CSS
41			if(view == "thematic_time"){
42				var margin_left = clone.getElementsByClassName('marg_3')[0];
43				margin_left.setAttribute("style", "width:50px;");
44				var margin_left = clone.getElementsByClassName('marg_3')[1];
45				margin_left.setAttribute("style", "width:50px;");
46			}
47			else if(view == "survey_structure"){
48				var margin_left = clone.getElementsByClassName('marg_1')[0];
49				margin_left.setAttribute("style", "width:130px;");
50				var margin_left = clone.getElementsByClassName('marg_1')[1];
51				margin_left.setAttribute("style", "width:130px;");
52
53				var class_subline = clone.getElementsByClassName('subline')[0];
54				class_subline.setAttribute("style", "font-family:'sgi-reg',sans-serif;");
55				var class_subline = clone.getElementsByClassName('subline')[1];
56				class_subline.setAttribute("style", "font-family:'sgi-reg',sans-serif;");
57				
58				var tag_h3 = clone.getElementsByTagName('h3');
59				for(var i = 0; i< tag_h3.length; i++){
60					tag_h3[i].setAttribute("style", "font-family:'sgi-reg',sans-serif;");
61				}
62
63				clone.setAttribute("style", "margin-bottom:0px;");
64			}
65
66			// SET HEADER
67			var header = document.createElement("div");
68			header.setAttribute("class", "D3_title_22 D3_color_blk");
69			header.setAttribute("style", "margin-left:5px; margin-top:15px; margin-bottom:20px;");
70			header.innerHTML = head;
71			clone.insertBefore(header, clone.firstChild);
72
73			// SET TITLE
74			var title = document.createElement("div");
75			title.setAttribute("class", "D3_title_13 D3_color_grey_7");
76			title.setAttribute("style", "float:left; margin-left:5px; margin-top:10px;");
77			title.innerHTML = titl;
78			clone.appendChild(title);
79
80			// SET SOURCE
81			var source = document.createElement("div");
82			source.setAttribute("class", "D3_title_13 D3_color_grey_7");
83			source.setAttribute("align", "right");
84			source.setAttribute("style", "margin-right:10px; margin-top:10px;");
85			source.innerHTML = sour;
86			clone.appendChild(source);
87
88			outer.appendChild(clone);
89
90			// REPLACE MASK ABSOLUTE URL
91			//var re = /http:\/\/127.0.0.1\/~mapspace\/SGI\/MapSpaceImac\/SGI-NETWORK-2024\/export.php/gi;
92			var WWW = document.URL.split("#");
93			var re = WWW[0].replace(/\//g, "\\\/");
94			var str = outer.innerHTML;
95			var newstr = str.replace(new RegExp(re,"gi"), "");
96
97			outer.innerHTML = newstr;
98
99
100//			EXPORT VIA PHANTOMJS
101
102			if(document.getElementById('export_div')){
103
104				document.getElementById('export_data').value = newstr;
105				document['export_div'].submit();
106
107			}
108			else{
109
110				var form = document.createElement("form");
111				form.setAttribute("action", "export/saveDivAsPng.php");
112				form.setAttribute("name", "export_div");
113				form.setAttribute("id", "export_div");
114				form.setAttribute("method", "post");
115				form.setAttribute("target", "_blank");
116
117				var target = document.getElementById('wrap');
118				target.appendChild(form);
119
120				var input = document.createElement("input");
121				input.setAttribute("type", "hidden");
122				input.setAttribute("name", "file");
123				input.setAttribute("value", name);
124
125				var target = document.getElementById('export_div');
126				target.appendChild(input);
127
128				var input = document.createElement("input");
129				input.setAttribute("type", "hidden");
130				input.setAttribute("id", "export_data");
131				input.setAttribute("name", "data");
132				input.setAttribute("value", newstr);
133
134				var target = document.getElementById('export_div');
135				target.appendChild(input);
136
137				document['export_div'].submit();
138
139			}
140/*
141//			EXPORT VIA CLIENT (WORKS FIREFOX AND CROME ONLY)
142
143			var svg = doctype + outer.innerHTML;
144
145			var image = new Image();
146			image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svg)));
147			image.onload = function(){
148
149				var canvas = document.createElement('canvas');
150				canvas.width = image.width;
151				canvas.height = image.height;
152				var context = canvas.getContext('2d');

153				context.drawImage(image, 0, 0);
154
155				var a = document.createElement('a');
156				a.download = name + ".png";
157				a.href = canvas.toDataURL('image/png');
158				document.body.appendChild(a);
159				a.click();
160			}
161
162*/
163
164		});
165	}
166})();