How to create HTML To Image Converter using JavaScript

Creative Javascript | February 20, 2022

Today in this blog you’ll learn how to create HTML To Image Converter using JavaScript.

In this article you can learn how to convert any HTML to Image using JavaScript plugin dom-to-html

Video tutorial of How to create HTML To Image Converter using JavaScript

This tutorial video can help you to create HTML To Image Converter using JavaScript

How to create HTML To Image Converter using JavaScript [Source Codes]

This source code can help you to create HTML To Image Converter using JavaScript
JavaScript Plugin source

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="container">
	<div id="htmlcapture">
		<div class="x-box"></div>
		<div class="x-box-cont">
			<h1>Seasons of the year</h1>
			<strong style="color: #ff264a">Summer 35%</strong>
			<strong style="color: #feec1e">Monsoon 35%</strong>
			<strong style="color: #12CBC4">Winter 30%</strong>
		</div>	
	</div>
	<button onClick="htmlToImg()">HTML to Image</button>
	<button onClick="imgDown()">Download</button>
	<img src="" id="showImg">
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: linear-gradient(133deg, #171f1a, #3c57d2);
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}
#htmlcapture{
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	
}
h1{
	font-size: 40px;
	font-weight: 700;
	color: #fff;
}
.x-box{
	width: 15vw;
	height: 15vw;
	border-radius: 50%;
	background-color:green;

	background:repeating-conic-gradient(
		from 0deg,
		#ff264a 0deg calc(3.6deg * 35),
		#feec1e calc(3.6deg * 35) calc(3.6deg * 70),
		#12CBC4 calc(3.6deg * 70) calc(3.6deg * 100)
	);
}
.x-box-cont{
	font-size: 30px;
	padding-left: 50px;
	width: 600px;
}
.x-box-cont h1{
	font-size: 30px;
	text-transform: uppercase;
}
.x-box-cont strong{
	display: block;
	margin-bottom: 15px;
}
button{
	width: 300px;
	margin:30px auto 0;
	text-align: center;
	position: relative;
	padding: 15px;
	color: #fff;
	background-color: #000;
	border-radius: 25px;
	display: block;
	font-size: 22px;
}

JavaScript Code

Copy

var node = document.getElementById('htmlcapture');

function htmlToImg(){
	domtoimage.toPng(node)
  .then(function (dataUrl) {
      /*var img = new Image();
      img.src = dataUrl;
      document.body.appendChild(img);*/
      document.getElementById("showImg").src = dataUrl;
      imgUrl = dataUrl
  })
  .catch(function (error) {
      console.error('oops, something went wrong!', error);
  });
}

function imgDown(){
	var a = document.createElement('a');
	a.href = imgUrl;
	a.download = "htmlToImg.png";
	a.click();
}