div to image

by santosh joshi

HTML

<script src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
<script src="http://www.nihilogic.dk/labs/canvas2image/base64.js"></script>
<script src="http://www.nihilogic.dk/labs/canvas2image/canvas2image.js"></script>
<table class="info"  >
		<tr>
			
			<td width="100%" colspan="2">
				<table>
					<tr height="12.8%">
						<td colspan="2" >
							<table>
								<tr>
									<td width="3.7%" class="line">
										 <img src="http://www.triplived.com/static/tl/images/share/ic_launcher.png" class="icon img-title" style="margin-top: 16px;" />
									</td>
									<td class="title-cell">
										<span class="title"> New Delhi. Switzerland. New Delhi </span>
									</td>
								</tr>
							</table>
						</td>
					</tr>
					<tr>
						<td width="32%">
							<table>
								<tr height="14.4%">
									<td width="11.5%" class="line">
										  <img src="http://www.triplived.com/static/tl/images/share/location.png" class="icon"  />  
									</td>
									<td class="tripsummary">
										 <span class="hotelTitle">City visited:</span><br/>
										<span class="hotelBody">Shimla, Manali, Delhi</span>
									</td>
								</tr>
								<tr height="17.6%">
									<td width="11.5%" class="line">
										 <img src="http://www.triplived.com/static/tl/images/share/hotel.png" class="icon"  />
									</td>
									<td class="hotel">
										<span class="hotelTitle">Hotels checked-in:</span><br/>
										<span class="hotelBody">Taul de mount</span>
									</td>
								</tr>
								<tr height="17.6%">
									 <td width="11.5%" class="line">
										 <img src="http://www.triplived.com/static/tl/images/share/attraction_icon.png" class="icon"  />
									</td>
									<td class="attraction">
										<span class="attractionTitle">Attraction visited:</span><br/>
										<span class="attractionBody">The Alps</span>
									</td>
								</tr>
								<tr height="17.6%">
									<td...

CSS

table.info {
			background: url(http://www.triplived.com/static/tl/images/share/back_ground_1.jpg);
		}
		
		table {
			width:100%;
			height: 100%;
		}
		table tr, table td {
			/*  border: 0.5px solid green;  */
		}
		
		body {
		 margin: auto;
		 padding: 0px;
		 width: 600px;
		height: 312px;
		margin: auto;
		 
		}
		span.title {
		    vertical-align: bottom;
    		font-weight: bold;
    		font-size: 14px;
    		padding-left:5px;
		}
		span.reviewTitle{
			color: red;
			font-weight: bold;
			font-size: 12px;
		}
		td.reviewTitle{
			text-align: center;
			visibility: hidden;
		}
		td.title-cell {
			vertical-align: bottom;
		}
		span.summaryBody {
			font-size:12px;
    		margin: 5px;
    		visibility: hidden;
    		display: none;
		}
		td.summaryBody{
			line-height: 15px;
			text-align: center;
			padding-right: 12px;
			visibility: hidden;
			display: none;
		}
		
		span.hotelTitle, span.attractionTitle, span.attractionTitle {
		   padding-left: 3px;
		   color: black;
		}
		span.hotelBody, span.attractionBody, span.attractionBody {
		   padding-left: 5px;
		   color: black;
		   font-size: 10px;
		}
		td.hotel, td.attraction, td.attraction, td.download, td.tripsummary{
			vertical-align: bottom;
    		line-height: 14px;    
    		font-size: 11px;
    		font-weight: bold;
		}
		span.tripsummary {
			/* color:red; */
		}
		td.download{
		   font-weight: normal;
		   font-size: 10px;
		   vertical-align: middle;
		}
		table  {
   			border-collapse: collapse;
		}
		
		td.line{
		    background: url(http://www.triplived.com/static/tl/images/share/arrow.png);
   			background-repeat: repeat-y;
    		background-position-x: 87%;
		}
		img.icon {
			 width:15px;
			 height:15px;
			 float:right;
			 margin-top:11px;
		 
		}
		img.uimg {
			float:left;
			font-size: 0;
			 box-shadow: 7px 7px 7px #888888;
		}
		.margin-top-15{
			margin-top: 15px;
		}
		span.downloadTitle , span.downloadBody{
		visibility: hidden;
		
		}

.dataset {
    float: left;
   ...

JavaScript

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);

                // Convert and download as image 
                Canvas2Image.saveAsPNG(canvas); 
                $("#img-out").append(canvas);
                // Clean up 
                //document.body.removeChild(canvas);
            }
        });
    });
});