div to image

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>
<div class="kupon" id="kupon">
	<div class="obv">
	<!--ЦЕНТРАЛЬНАЯ КАРТИНКА-->
	<div class="info">
		<p><span>СКАЧАЙ ЭТОТ</span></p>
		<p><span>КУПОН, РОСПЕЧАТАЙ</span></p>
		<p><span>И ПОЛУЧИ СКИДКУ</span></p>
		<div class="skidka">
			<p><span>3%</span></p>
		</div>
	</div>
	<!--ЦЕНТРАЛЬНАЯ КАРТИНКА-->
	
	<!--ФОРМА ВВОДА-->
	<div class="danye">
		<form method="post" action="[~[*id*]~]">
			<p><span>Купон именной, введите имя, фамилию и нажммите Enter:</span></p>
			<input class="name" type="text" name="name" placeholder="Имя"></input>
			<input class="family" type="text" name="family" placeholder="Фамилия"></input>
			<input type="submit" id="writekupon" style="display: none;"></input>
		</form>
	</div>
	<!--ФОРМА ВВОДА-->	
</div>
	<div class="obv1" id="obv1">
	<!--ЦЕНТРАЛЬНАЯ КАРТИНКА-->
	<div class="info">
		<p class="number"><span>№123</span></p>
		<p><span>СКАЧАЙ ЭТОТ</span></p>
		<p><span>КУПОН, РОСПЕЧАТАЙ</span></p>
		<p><span>И ПОЛУЧИ СКИДКУ</span></p>
		<div class="skidka">
			<p><span>3%</span></p>
		</div>
	</div>
	<!--ЦЕНТРАЛЬНАЯ КАРТИНКА-->
	
	<!--ФОРМА ВЫВОДА-->
	<div class="danye1">
		<p id="name"><span>[!name_k!]</span></p>
		<p id="family"><span>[!family_k!]</span></p>
	</div>
	<!--ФОРМА ВЫВОДА-->	
</div>
	<div class="srok">
		<p><span>Купон действует до 20 января 2016 года</span></p>
	</div>
	<div class="svkupon">
		<input type="button" id="btnSave" value="Сохранить купон"/>
	</div>
</div>
<div id="kupon_img"></div>

CSS

.opacity {
	background-color: rgba(255, 255, 255, 0);
}

.kupon {
	background:url('../img/bg.jpg') repeat;
	width: 300px;
	height: 400px;
	border-radius: 10px;
	padding: 10px;
}
div.obv {
	display: block;
	height: 100%;
	background-color: rgba(255, 255, 255, 0);
	border: 1px dashed black;
	border-radius: 10px;
}
div.obv1 {
	display: none;
	height: 100%;
	background-color: rgba(255, 255, 255, 0);
	border: 1px dashed black;
	border-radius: 10px;
}
p.number {
	color: white;
	font-weight: bold;
	font-style: italic;
	font-size: 14px;
	text-align: center;
}
div.obv1 .info {
	padding-top: 20px;
}
.info {
	color: white;
	font-weight: bold;
	font-size: 20px;
	text-align: center;
	height: 220px;
	width: 220px;
	margin: 30px;
	margin-bottom: 10px;
	padding-top: 50px;
	background:url('../img/circle_kupon.png') no-repeat center;
}
.skidka {
	margin: auto;
	padding: 5px;
	color: black;
	font-style: italic;
	font-size: large;
	font-weight: bold;
	text-align: center;
	height: 40px;
	width: 40px;
	background-color: red;
	border-radius: 100%;
}
.danye {
	font-weight: bold;
    font-size: larger;
	margin: auto;
	text-align: center;
}
.danye1 {
	padding-top: 20px;
	font-weight: bold;
    font-size: 45px;
	line-height: 35px;
	margin: auto;
	text-align: center;
}
div.danye input {
	width: 120px;
	height: 35px;
	border-radius: 5px;
	margin-left: 10px;
}
input.name {float:left;}
input.family {float:right;}

.srok {
	width: 220px;
	margin: auto;
	font-size: 12px;
    font-weight: bold;
    text-align: center;
    margin-top: -10px;
	background:url('../img/bg.jpg') repeat;	
}
div.svkupon input {
	border: 0px;
	border-radius: 30px;
	width: 150px;
	height: 35px;
	font-size: 18px;
    font-weight: bold;
    box-shadow: 1px 5px 10px rgba(0,0,0,0.5);
	background: linear-gradient(to bottom, rgba(255,227,68,1) 0%,rgba(255,201,6,1) 100%);
}
div.svkupon input:active {
	box-shadow: 0 0 0 rgba(0,0,0,0);
}
div.svkupon input:focus {
	outline: none;
}

JavaScript

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#kupon"), {
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);
                document.getElementById("kupon").style.display = "none";

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