Converting HTML text to an Image- Javascript
canvas, html, javascript
Solution
window.onload=function(){
$("#show_img_btn").on("click", function () {
var canvas = document.createElement("canvas");
canvas.width = 620;
canvas.height = 80;
var ctx = canvas.getContext('2d');
ctx.font = "30px Arial";
var text = $("#the_text").text();
ctx.fillText(text,10,50);
var img = document.createElement("img");
img.src=canvas.toDataURL();
$("#show_img_here").append(img);
//$("body").append(canvas);
});
};
canvas{
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
</head>
<body>
<div id="the_text">Hey! Im a text! I will be converted to an image</div>
<button id="show_img_btn">Convert to Image</button>
<div id="show_img_here"></div>
</body>
Problem
I am new to this. I am just trying to get a single line of text to be converted to an image. This is the javascript ``` <!doctype html> <html> <head> <title>Html to image</title> <script type="text/javacript"> $(function () { $("#show_img_btn").click(function () { html2canvas("#the_text", { onrendered: function (canvas) { $("<img/>", { id: "image", src: canvas.toDataURL("image/png"), width: '95%', height: '95%' }).appendTo($("#show_img_here").empty()); } }); }); }); } </script> ``` This is the line of code I wish to covert to an image and display the image in a div on button click ``` </head> <body> <div id="the_text">Hey! Im a text! I will be converted to an image</div> </br> <button id="show_img_btn">Convert to Image</button> <div id="show_img_here"></div> <body> </html> ```