Menu
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>
270
asked Feb 19 '26 23:02
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
