<script type="text/javascript" src="js/html2canvas.min.js"></script>
<script type="text/javascript" src="js/canvas2image.js"></script>
<script type="text/javascript" src="js/jsPDF.js"></script>

var boxlist=[];
		var tagname=['rect','ellipse','path'];
        //获取dom节点
		function findChild(dom){			
			for(var i=0;i<dom.children.length;i++){
				if(dom.children[i].children.length>0){
					findChild(dom.children[i]);
				}
				if(tagname.indexOf(dom.children[i].tagName)!=-1){
					if(dom.children[i].tagName=="path"&&dom.children[i].getBBox().height<500&&dom.children[i].getBBox().width<500){						
						boxlist.unshift(dom.children[i].getBBox());	
					}
					else if(dom.children[i].tagName!="path"){
						boxlist.unshift(dom.children[i].getBBox());	
					}
				}
			}
			
		}
        //处理svg区域
        function downsvg(type) {
            var divdom = document.getElementsByClassName("geDiagramContainer")[0];
            var svg = divdom.getElementsByTagName("svg")[0];
            //var rectlist = svg.getElementsByTagName("rect");
            //var ellipseList = svg.getElementsByTagName("ellipse");
            //var pathList = svg.getElementsByTagName("path");
            var left = 0;
            var right = 0;
            var top = 0;
            var bottom = 0;
			findChild(svg);
			for (var i = 0; i < boxlist.length; i++) {
                var path = boxlist[i];
				//left
				var tx = path.x;
				//top
				var ty = path.y;
				//right
				var bx = path.x + path.width;
				//bottom
				var by = path.y + path.height;

				left = left == 0 ? tx : (left > tx ? tx : left);
				right = right == 0 ? bx : (right < bx ? bx : right);
				top = top == 0 ? ty : (top > ty ? ty : top);
				bottom = bottom == 0 ? by : (bottom < by ? by : bottom);
            }
			
            
            left -= 100; top -= 100; right +=100; bottom +=100;
            var svgheight = bottom - top;
            var svgwidth = right - left;

            var svglastwidth = svg.width.animVal.value;
            var svglastheight = svg.height.animVal.value;


            html2canvas(svg, {
                backgroundColor: '#ef5350', scale: 4, width: svgwidth, height: svgheight, x: left - divdom.scrollLeft + divdom.offsetLeft, y: top - divdom.scrollTop + divdom.offsetTop, allowTaint: true, taintTest: true, useCORS: true, backgroundColor: null
            }).then(function (canvas) {

                if (type == "pdf") {
                    exportCanvasAsPDF(canvas, svgwidth, svgheight);
                }
                else {
                    if (canvas.msToBlob) {     // IE 9+浏览器
                        blob = canvas.msToBlob();
                        window.navigator.msSaveBlob(blob);
                    } else {
                        exportCanvasAsPNG(canvas, svgwidth, svgheight);
                    }
                }
			});
		}
        //导出PDF
        function exportCanvasAsPDF(canvas, svgwidth, svgheight) {
            canvas = canvasToImage(canvas, "#ffffff");
            //返回图片URL，参数：图片格式和清晰度(0-1)
            var pageData = Canvas2Image.getDataURL(canvas, 'image/jpeg', svgwidth * 2, svgheight * 2);
            //方向默认竖直，尺寸ponits，格式a4【595.28,841.89]
            var pdf = new jsPDF('p', 'pt', 'a4');
            //需要dataUrl格式
			if(svgwidth/svgheight>595.28/841.89){
				pdf.addImage(pageData, 'image/jpeg', 0, 0, 595.28, 595.28/svgwidth* svgheight);
			}
			else{
				pdf.addImage(pageData, 'image/jpeg', 0, 0, 841.89/svgheight*svgwidth, 841.89);
			}            
            pdf.save(decodeURI(getQueryVariable("title")));
        }
        //导出PNG
        function exportCanvasAsPNG(cvas, svgwidth, svgheight) {
            var url = Canvas2Image.getDataURL(cvas, 'image/png', svgwidth * 2, svgheight * 2);
    
            //var url=cvas.toDataURL('image/jpge');
            var dlLink = document.createElement('a');
            dlLink.download = decodeURI(getQueryVariable("title"));
            dlLink.href = url;
            dlLink.dataset.downloadurl = ['image/png', dlLink.download, dlLink.href].join(':');

            document.body.appendChild(dlLink);
            dlLink.click();
            document.body.removeChild(dlLink);
        }
        //更改canvas的北京颜色
        function canvasToImage(canvas, backgroundColor) {
            //cache height and width        
            var w = canvas.width;
            var h = canvas.height;
            var context = canvas.getContext("2d");
            var data;

            if (backgroundColor) {
                //get the current ImageData for the canvas.
                data = context.getImageData(0, 0, w, h);

                //store the current globalCompositeOperation
                var compositeOperation = context.globalCompositeOperation;

                //set to draw behind current content
                context.globalCompositeOperation = "destination-over";

                //set background color
                context.fillStyle = backgroundColor;

                //draw background / rect on entire canvas
                context.fillRect(0, 0, w, h);
            }
            //get the image data from the canvas
            //var imageData = canvas.toDataURL("image/png");
            if (backgroundColor) {
                //clear the canvas
                //context.clearRect (0,0,w,h);

                //restore it with original / cached ImageData
                //context.putImageData(data, 0,0);        

                //reset the globalCompositeOperation to what it was
                context.globalCompositeOperation = compositeOperation;
            }
            //return the Base64 encoded data url string
            return canvas;
        }